【echarts折线图】详解一、折线效果 && 折线点效果

迷南。 2022-02-03 12:39 722阅读 0赞

备忘：

关于折线图的 数据折线显示更多配置： https://echarts.baidu.com/option.html\#series-line

<script>
        option = {
            visualMap:{     //视觉映射  渐变过渡等效果
                show: false,
                type: 'continuous',
                seriesIndex: 0,
                min: 0,     //控制最小的数据显示色
                max: 60,    //控制最大的数据显示色
                // color:["#4C8400","#80BB0D","#B4DA20","#B6DA8C"], //折线渐变色 ， 由大到小排序  ECharts2的用法，ECharts3用inRange，如下
                inRange: {
                    color: ["#4C8400","#80BB0D","#B4DA20","#B6DA8C"],
                    symbolSize: [30, 100]   //折线点的过渡大小， 从小到大
                }
    
            },
           tooltip: {	//鼠标移入效果
                trigger: 'axis',
                formatter: function(cur){	//formatter有  字符串模板 和 回调函数格式 两种
                	//详情： https://www.echartsjs.com/zh/option.html#series-line.tooltip.formatter
    
    				//通过参数 cur 基本就可以获取想要的数据了，当然也可以自定义数据
                    console.log(cur)
    				
    				//最后把要展示的数据记得用return 出来
                    return 
                }
            },
            xAxis: {		//x轴样式与数据
                data: ["a","b","c","d","e"],
                axisLine:{
                    lineStyle:{
                        color:"#D8E3EA",
                    }
                },
                axisLabel:{
                    interval:55 ,				//X轴显示文字 间隔，数据太多，每格55个 显示一次 ， 有时候太多显示不全，可以为0，强制全部显示，
                    fontSize:12,
                    color:"#fff",
                },
                splitLine: {show: false}
            },
            yAxis: {		//y轴样式与数据
                splitLine: {
                    show: true,
                    lineStyle:{
                        color:"#A5C1D8"
                    }
                },
                axisLine:{
                    lineStyle:{
                        color:"#D8E3EA",
                    }
                },
                axisLabel:{
                    interval:55 ,
                    fontSize:14,
                    color:"#fff",
                },
            },
            series: {
                type: 'line',
                showSymbol: false,
                data: [1,2,3,4,5,6,7,8],
                symbol: 'circle',   //折线点的图形
                symbolSize: 10,     //图形大小
                itemStyle:{     //图形点和折线的颜色， 可以是单一的，也可以是渐变的
                    // color:"#f00"  //单一
                    color:{     //渐变  属性值 同CSS
                        type:"linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'red' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }],
                    }
                },
                lineStyle:{     //单独配置折线图线条的显示效果， 配置基本和 itemStyle差不多
                    color:"#f0f",        //颜色
                    width:5,    //线宽
                },
                areaStyle:{   //折线下面区域块的样式
                    color:"#fff"
                }
            },
        };
    </script>

需要注意的是 visualMap 和 series 存在一定的样式冲突， 不能同时使用

发表评论取消回复

表情：

评论列表（有 0 条评论，722人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS折线

// 写在vue项目中的 <template> <div id="app"> <div class="list"

清疚/ 2023年08月17日 15:39/ 0 赞/ 98 阅读

相关 echart 折线图 ---- 坐标轴、网格、折线配置

代码如下： var orderNumChart; function loaOrderNumChart() { var option = {

╰半夏微凉°/ 2023年06月07日 03:19/ 0 赞/ 7 阅读

相关 Echarts 折线图实现多条折线

官方例子：[Examples - Apache ECharts (incubating)][Examples - Apache ECharts _incubating] 官方

妖狐艹你老母/ 2022年12月25日 00:51/ 0 赞/ 336 阅读

相关 Echarts折线图的折线实线设置成虚线

主要修改属性 itemStyle:{ normal:{ lineStyle:{

怼烎@/ 2022年10月22日 04:30/ 0 赞/ 257 阅读

相关 Android自定义View折线效果制作

Android折线效果制作前面一段时间工作需要绘制一个折线图效果，但是网上很多框架写的代码都是比较麻烦，又是动画又是点击效果等等，而且还有很多地方的代码看不懂，我觉得还

偏执的太偏执、/ 2022年09月30日 13:51/ 0 赞/ 314 阅读

相关 Echarts 修改折线的颜色和折线的点的大小方法

在做SPC分析的时候或者一些专业的分析的时候有的客户会要求,点的大小,样式等,具体的设置方法如下: series: \[\{

﹏ヽ暗。殇╰゛Y/ 2022年05月31日 04:16/ 0 赞/ 1180 阅读

相关 echarts 折线分段（值）显示不同颜色

原文出处：[https://blog.csdn.net/qq\_36128699/article/details/77878438 （建义阅读原文）][https_blog.c

向右看齐/ 2022年05月19日 00:42/ 0 赞/ 926 阅读

相关【echarts折线图】详解一、折线效果 && 折线点效果

备忘：关于折线图的数据折线显示更多配置： https://echarts.baidu.com/option.html\series-line <script>

迷南。/ 2022年02月03日 12:39/ 0 赞/ 723 阅读

相关 echarts实现折线面积图

var option4 = { // legend: { // data: ['吃饭', '睡觉', '打豆豆'], //

港控/mmm°/ 2022年01月12日 02:43/ 0 赞/ 736 阅读

相关 echarts图表之去掉折线图的折点圆圈，折线平滑

关键属性： symbol: 'none', //取消折点圆圈 smooth: true //折线平滑默认不显示远点（鼠标放上后显示）： symbol:'circl

ゝ一纸荒年。/ 2021年07月26日 19:11/ 0 赞/ 2208 阅读