echarts折线图的一些功能示例

echarts折线图

option = {
color:[‘green’,‘red’,‘blue’, ‘purple’,‘pink’],
title: {
text: ‘折线图堆叠’
},
tooltip: {
trigger: ‘axis’,
position: ‘top’,
},
legend: {
textStyle: {
color: ‘skyblue’
},
padding:[20,0,0,0],
data: [‘邮件营销’, ‘联盟广告’, ‘视频广告’, ‘直接访问’, ‘搜索引擎’]
},
grid: {
left: ‘6%’,
right: ‘6%’,
top:‘20%’,
bottom: ‘6%’,
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: ‘category’,
boundaryGap: false,
axisTick: {
show: false
},
data: [‘周一’, ‘周二’, ‘周三’, ‘周四’, ‘周五’, ‘周六’, ‘周日’],
axisLine: {
lineStyle: {
color: ‘#2898e5’,
},
},
},
yAxis: {
axisTick: {
show: false
},
type: ‘value’,
axisLine: {
lineStyle: {
color: ‘#2898e5’,
},
},
splitLine: {
show: true,
lineStyle: {
type:‘dashed’,
color: [‘rgb(1,155,246,0.3)’], //网格线
width: 1,
},
},
},
series: [
{
name: ‘邮件营销’,
symbol: ‘circle’, //实心点
symbolSize: 6, //实心点的大小
smooth: true, //折现平滑
type: ‘line’,
stack: ‘总量’,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: ‘rgb(52,214,145)’ //渐变上边颜色
}, {
offset: 1,
color: ‘transparent’ //渐变下边颜色
}])
}
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: ‘联盟广告’,
symbol: ‘circle’, //实心点
symbolSize: 6, //实心点的大小
smooth: true, //折现平滑
type: ‘line’,
stack: ‘总量’,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: ‘rgb(123,24,145)’ //渐变上边颜色
}, {
offset: 1,
color: ‘transparent’ //渐变下边颜色
}])
}
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: ‘视频广告’,
symbol: ‘circle’, //实心点
symbolSize: 6, //实心点的大小
smooth: true, //折现平滑
type: ‘line’,
stack: ‘总量’,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: ‘rgb(51,84,40)’ //渐变上边颜色
}, {
offset: 1,
color: ‘transparent’ //渐变下边颜色
}])
}
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: ‘直接访问’,
symbol: ‘circle’, //实心点
symbolSize: 6, //实心点的大小
smooth: true, //折现平滑
type: ‘line’,
stack: ‘总量’,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: ‘rgb(51,14,145)’ //渐变上边颜色
}, {
offset: 1,
color: ‘transparent’ //渐变下边颜色
}])
}
},
data: [320, 332, 301, 334, 390, 330, 320]
}，
{
name: ‘搜索引擎’,
symbol: ‘circle’, //实心点
symbolSize: 6, //实心点的大小
smooth: true, //折现平滑
type: ‘line’,
stack: ‘总量’,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: ‘rgb(52,214,15)’ //渐变上边颜色
}, {
offset: 1,
color: ‘transparent’ //渐变下边颜色
}])
}
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};

效果如下

// 图例的颜色设置
直接在option中设置 color:['green','red','blue', 'purple','pink']

// 提示框设置
    tooltip: {
        trigger: 'axis',
        position: 'top',
    },

// 图例的形状设置
设置其icon的属性即可。

// 图例的字体颜色设置
我这里设置为天蓝色 textStyle: {
            color: 'skyblue'         
        },

// 图例的位置设置
  可以使用padding:[20,0,0,0],  
  也可以使用position:['20%','20%']
  或者position:[20,20]相当于20px,20px  

// 整个表的位置设置
   grid: {
        left: '6%',
        right: '6%',
        top:'20%',
        bottom: '6%'
    },

// 坐标轴的刻度隐藏
     axisTick: {
        show: false
           },

// 坐标轴的颜色设置
    axisLine: {
             lineStyle: {
                  color: '#2898e5',
                },
            },

// 网格线的设置
     splitLine: {
          show: true,
          lineStyle: {
            type:'dashed',
            color: ['rgb(1,155,246,0.3)'],  //网格线
            width: 1,
          },
        },

// 折线图变得平滑
    symbol: 'circle',  //实心点
            symbolSize: 6,     //实心点的大小
            smooth: true,      //折现平滑

// 折线图的阴影设置
        areaStyle: {
            normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgb(52,214,15)'  //渐变上边颜色
            }, {
              offset: 1,
              color: 'transparent'      //渐变下边颜色
            }])
          }
        },