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' //渐变下边颜色 }]) } },