1. 程式人生 > >Echarts-折線圖-單條線

Echarts-折線圖-單條線

 var optionOne={
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                lineStyle: {
                                    color: '#57617B'
                                }
                            }
, formatter: function(params){ return params[0].name+"<br/>"+params[0].value+""; } }, legend: { icon: 'rect',
itemWidth: 14, itemHeight: 5, itemGap: 13, data: [], right: '4%', textStyle: { fontSize: 12, color
: '#333333' } }, grid: { left: '8%', right: '8%', top:'12%', bottom: '30%', containLabel: true }, xAxis: [{ type: 'category', boundaryGap: false, axisLine:{ lineStyle:{ color:'#053b4c' } }, axisTick:{ show:false }, axisLabel: { interval:0, rotate:30, textStyle: { color: '#333333' } }, splitLine:{ show:false }, data: [] }], yAxis: [{ axisLine:{ show:false, lineStyle:{ color:'#193b4e' } }, axisTick:{ show:false }, axisLabel: { textStyle: { color: '#333333' } }, splitLine:{ lineStyle:{ color:'#053b4c' } } }], series: [ ] }; $.ajax({ async : false, type: "POST", url: "clyyqs/clslqs", //通過資料來源id獲取自定義剖析資料 dataType: 'json', success: function (data) { optionOne.xAxis[0].data=data.sevenDays; var leg=[]; var ser = { name: '', type: 'line', smooth: false, symbol: 'circle', symbolSize: 5, showSymbol: false, lineStyle: { normal: { width: 2 } }, areaStyle: { normal: { color: new echart.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: 'rgba(17,235,210, 0.2)' }, { offset: 0.5, color: 'rgba(17,235,210, 0)' }], false), shadowColor: 'rgba(0, 0, 0, 0.1)', shadowBlur: 10 } }, itemStyle: { normal: { lineStyle:{ color:'#333333' } , color: new echart.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: 'rgba(16,97,204,1)' }, { offset: 1, color: 'rgba(17,235,210,1)' }]) }, emphasis: { color: 'rgb(0,196,132)', borderColor: 'rgba(0,196,132,0.2)', extraCssText: 'box-shadow: 8px 8px 8px rgba(0, 0, 0, 1);', borderWidth: 10 } }, data: [] }; var score=[0,0,0,0,0,0,0]; for(var ii in data.clslqss){ for(var m in data.sevenDays){ if(data.sevenDays[m]==data.clslqss[ii].COUNTDATE){ score[m]=data.clslqss[ii].SL; } } } // ser.name=data.sjzlpgNames[i]; ser.data=score; var col ="#333333"; ser.itemStyle.normal.lineStyle.color=col; var l={ name:'', textStyle:{color:""} } // l.name = ser.name; l.textStyle.color = col; leg.push(l); optionOne.series.push(ser); optionOne.legend.data=leg; chartOne.setOption(optionOne); } });
資料:{"clslqss":[{"SL":16479,"COUNTDATE":"2018-01-25"},{"SL":18992,"COUNTDATE":"2018-01-24"},{"SL":20479,"COUNTDATE":"2018-01-22"},{"SL":19401,"COUNTDATE":"2018-01-23"}],"sevenDays":["2018-01-19","2018-01-20","2018-01-21","2018-01-22","2018-01-23","2018-01-24","2018-01-25"]}
單條線: