目录
折线点样式
折线点为图片
折线样式
折线下方区域渐变色
折线渐变区域渐变
平均值
显示十条数据，其余数据滚动显示
y轴值与实际值不符
折线不同线段不同颜色
折线点样式
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',// 折线lineStyle:{color: 'blue'},// 折线点itemStyle:{color: 'red',},symbol:'circle',symbolSize:[10,10]}]};
折线点为图片
折线点图片，通过base64图片在线转换工具转成base64图片
效果不太对，还没有找到正确方式。
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',// 折线点为图片symbol:'data:image/png;base64,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',symbolSize: 20}]};
解决方法就使用线上路径
var img = '/examples/data/asset/img/weather/sunny_128.png';option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',// 折线点为图片symbol:'image://'+img,symbolSize: 20}]};
折线样式
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',// 折线样式lineStyle:{color:'red',},// 折线平滑smooth: true}]};
折线下方区域渐变色
option = {xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',areaStyle: {color: new echarts.graphic.LinearGradient(0,0,0,1, [{offset: 0,color: "#0EF0F0"},{offset: 1,color: "transparent"}])}}]};
option = {xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',areaStyle: {normal: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#638FFF'},{offset: 1,color: 'rgba(248,65,126,0.90)'}],globalCoord: false}}}}]};
折线渐变区域渐变
默认状态和悬浮状态
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: 'line',//线条样式itemStyle: {color: '#6A5ACD', normal: { lineStyle: { width: 2, type: 'solid', color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#0000FF' }, { offset: 1, color: '#CD5C5C' }]),} }, emphasis: {color: '#6A5ACD', lineStyle: {width: 2, type: 'dotted', color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#1E90FF' }, { offset: 1, color: '#0000FF' }]) } } },//区域颜色渐变areaStyle:{normal:{//颜色渐数 四个参数表示四个位置左、下、右、上color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'rgba(80,141,255,0.39)'}, {offset: .34,color: 'rgba(56,155,255,0.25)'},{offset: 1,color: 'rgba(38,197,254,0.00)'}])}},}]};
参考链接：折线图线条渐变色
平均值
markline会自动计算data里边所有数值和的平均值，你只需要简单地配置就能生成一条美丽的平均线，
option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{markLine: {data: [{type: 'average',name: '平均值'}],lineStyle: {type: 'solid'}},data: [150, 230, 224, 218, 135, 147, 260],type: 'line'}]};
显示十条数据，其余数据滚动显示
// 数据var data = [150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260,150, 230, 224, 218, 135, 147, 260]// 获取数据的个数var dataLen = data.length;// 控制条长度function computedPosition(len,dataLen) {if(dataLen>=10){return len <= 10 ? 35 : (100 - Math.floor(35 / len * 100));}else{return 100;//小于十条数据显示全部}}// 配置dataZoomvar option = {dataZoom: [{type: 'slider',show: true,handleSize: 2,height: '15px',start:0 ,end: computedPosition(1,dataLen)//dataLen是x轴返回的数据的个数},{type: 'inside',start: 40, // start和end来设置滚动条的长度来控制数据的条数end: 100},{type: 'slider',show: false,yAxisIndex: 0,filterMode: 'empty',width: 3,height: '70%',handleSize: 2,showDataShadow: false,left: '93%'}],xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun','Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: data,type: 'line'}]}
y轴值与实际值不符
option = {tooltip: {trigger: 'axis'},xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: 'Email',type: 'line',stack: 'Total',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',stack: 'Total',data: [220, 182, 191, 234, 290, 330, 310]},]};
问题就出在stack: 'Total'，只要删除就好。
option = {tooltip: {trigger: 'axis'},xAxis: {type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{name: 'Email',type: 'line',data: [120, 132, 101, 134, 90, 230, 210]},{name: 'Union Ads',type: 'line',data: [220, 182, 191, 234, 290, 330, 310]},]};
参考：echarts折线图 y轴刻度数值与获取的值不符显示错误问题
折线不同线段不同颜色
var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},visualMap: {top: 10,right: 10,pieces: [{gt: 600,lte: 900,color: '#096'}, {gt: 900,lte: 1200,color: '#ffde33'},{gt: 1200,lte: 1500,color: '#ff0000'}]},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]}
var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},visualMap: {top: 10,right: 10,pieces: [{min: 1500}, // 不指定 max，表示 max 为无限大（Infinity）。{min: 900, max: 1500},{min: 310, max: 1000},{min: 200, max: 300},{min: 10, max: 200, label: '10 到 200（自定义label）'},{value: 123, label: '123（自定义特殊颜色）', color: 'grey'}, // 表示 value 等于 123 的情况。{max: 5}// 不指定 min，表示 min 为无限大（-Infinity）。]},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]}
参考：ECharts实现折线不同线段不同颜色
【EChats】折线图—点线样式 下方区域渐变 平均值 十条固定其余滚动 y轴值与实际值不符 折线不同线段不同颜色
