'+(opt.xAxis[0].name \|\| 'xAxis')+'	' + series[0].name + '	' + series[1].name + '
' + axisData[i] + '	' + series[0].data[i] + '	' + series[1].data[i] + '

'; return table; }}, magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']}, restore: {show: false}, saveAsImage: {show: true} } }, tooltip: { trigger: 'axis', /*position: function (pt) { console.log(pt); return [pt[0], '10%']; },*/ padding: 0, extraCssText:'box-shadow: 0 0 7px rgba(0, 0, 0, 0.6);', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'line' // 默认为直线，可选为：'line' | 'shadow' }, backgroundColor: 'rgba(255,255,255,0)', show: true, formatter: function(params) { var stl = ''; $(params).each(function(index, serie) { if(serie.componentType === 'series' && serie.dataIndex > -1){ var colors = charts[0].chart.getOption().color; var color = colors[index % colors.length]; stl += '

' + serie.seriesName+': '+serie.value; } }); return stl ? '

' + (params[0] ? params[0].name : params.seriesName) + stl + '

' : ''; } } }; /*EChart内置辅助类*/ var zrUtil = echarts.util; var zrVector = echarts.vector; var zrMatrix = echarts.matrix; var zrNumber = echarts.number; var zrFormat = echarts.format; var zrGraphic = echarts.graphic; /*JSON数据处理*/ //计算描点路径 zrUtil.each(json.chart0.xcategory, function(item, index){ json.chart0.highLine.push([{coord:[index,json.chart0.high[index]] },{coord:[index+1,json.chart0.high[index+1]]}]); }); zrUtil.each(json.chart0.xcategory, function(item, index){ json.chart0.lowLine.push([{coord:[index,json.chart0.low[index]] },{coord:[index+1,json.chart0.low[index+1]]}]); }); zrUtil.each(json.chart0.high, function(item, index){ json.chart0.avg.push((json.chart0.low[index] + json.chart0.high[index]) / 2); }); var opt = { title: { text: json.chart0.text, subtext: json.chart0.subtext }, animationEasing: 'ElasticOut', legend: [{ data: json.chart0.legend[0] },{ data: json.chart0.legend[1], top:15, }], calculable: true, xAxis: [{ type: 'category', axisLabel:{ formatter:function(value){ var sepCount = 1;//每几个字符分隔 return value.replace(/(\S{1})(?=[^$])/g, "$1\n\n") } }, boundaryGap: false, data: json.chart0.xcategory }], yAxis: [{ type: 'value', axisLabel: { formatter: '{value} °C' } }], series: [{ name: '最高气温', type: 'line', data: json.chart0.high }, { name: '最低气温', type: 'line', data: json.chart0.low },{ name: '平均气温', type: 'line', data: json.chart0.avg, lineStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: 'rgb(255, 0, 0)' }, { offset: 1, color: 'rgb(0, 255, 0)' }]) } } },{ name: 'A', type: 'lines', coordinateSystem: 'cartesian2d', zlevel: 2, effect: { show: true, smooth: false, period: 6, //trailLength: 0, //symbol: planePath, //color:'rgba(55,155,255,0.5)', symbolSize: 8 }, lineStyle: { normal: { color: function(){ return getColorPalette()[0]; }(), /*color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: 'rgb(255, 0, 0)' }, { offset: 1, color: 'rgb(0, 255, 0)' }]),*/ width: 1, opacity: 0.4, curveness: 0//贝塞尔曲线度 } }, data: json.chart0.highLine },{ name: 'B', type: 'lines', coordinateSystem: 'cartesian2d', zlevel: 2, effect: { show: true, smooth: false, period: 6, symbolSize: 8 }, lineStyle: { normal: { color: function(){ return getColorPalette()[1]; }(), width: 1, opacity: 0.4, curveness: 0//贝塞尔曲线度 } }, data: json.chart0.lowLine }] }; option = zrUtil.merge(opt, baseOption, false);

折线图动态及渐变