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

Echarts-折線圖-多條線

//企業排名top5根據客車、貨車
                   var optionTwo={
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    lineStyle: {
                                        color: '#57617B'
                                    
} } }, legend: { icon: 'rect', itemWidth: 14, itemHeight: 5, itemGap: 13,
data: [], right: '4%', textStyle: { fontSize: 12, color: '#b0fcff' } }, 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: '#b0fcff' } }, splitLine:{ show:false }, data: [] }], yAxis: [{ /* type: 'value', name: '單位(%',*/ axisLine:{ show:false, lineStyle:{ color:'#193b4e' } }, axisTick:{ show:false }, axisLabel: { textStyle: { color: '#b0fcff' } }, splitLine:{ lineStyle:{ color:'#053b4c' } } }], series: [ ] }; function ajaxRunTwo(num){ var jg = num; $.ajax({ async : false, type: "POST", url: "clyyqs/qymcTopFive/"+jg, dataType: 'json', success: function (data) { optionTwo.xAxis[0].data=data.daysBetweenToStrArray; var leg=[]; for(var i in data.topFiveQYK){ 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:'#0000ff' } , 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.qymcByMCs){ for(var n in data.qymcByMCs[i]){ var mcs = data.qymcByMCs[i]; var mc = mcs[n]; for(var m in data.daysBetweenToStrArray){ if(data.daysBetweenToStrArray[m]==mc.COUNTDATE){ score[m]=mc.NM; } } // } /*if(data.qymcByMCs[ii].PG_NAME==data.sjzlpgNames[i]){ for(var m in data.tenDates){ if(data.tenDates[m]==data.dataQualitySjzlpgs[ii].PG_DATA){ score[m]=data.dataQualitySjzlpgs[ii].PG_SCORE; } } }*/ } //放入線的名稱 ser.name=data.topFiveQYK[i].QYMC; //放入線的數量 ser.data=score; var col = randomColor() ser.itemStyle.normal.lineStyle.color=col; var l={ name:'', textStyle:{color:""} } l.name = ser.name; l.textStyle.color = col; leg.push(l); optionTwo.series.push(ser); optionTwo.legend.data=leg; } chartTwo.setOption(optionTwo); } }); } ajaxRunTwo(1); $("#select1").change(function(){ chartTwo.clear(); optionTwo.series=[]; optionTwo.legend.data=[]; ajaxRunTwo($("#select1").val()); }); //隨機顏色 function randomColor(){ return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6); }
資料:{"daysBetweenToStrArray":["2018-01-19","2018-01-20","2018-01-21","2018-01-22","2018-01-23","2018-01-24","2018-01-25"],"topFiveQYK":[{"QYMC":"湖北宜昌交運集團股份有限公司","NM":1375},{"QYMC":"荊州先行運輸集團有限公司","NM":903},{"QYMC":"湖北神州運業集團有限公司","NM":818},{"QYMC":"漢川盛達客運有限公司","NM":634},{"QYMC":"鄂州市交通發展有限公司","NM":626}],"qymcByMCs":[[{"QYMC":"湖北宜昌交運集團股份有限公司","COUNTDATE":"2018-01-22","NM":359},{"QYMC":"湖北宜昌交運集團股份有限公司","COUNTDATE":"2018-01-25","NM":353},{"QYMC":"湖北宜昌交運集團股份有限公司","COUNTDATE":"2018-01-24","NM":333},{"QYMC":"湖北宜昌交運集團股份有限公司","COUNTDATE":"2018-01-23","NM":330}],[{"QYMC":"荊州先行運輸集團有限公司","COUNTDATE":"2018-01-22","NM":242},{"QYMC":"荊州先行運輸集團有限公司","COUNTDATE":"2018-01-23","NM":234},{"QYMC":"荊州先行運輸集團有限公司","COUNTDATE":"2018-01-24","NM":229},{"QYMC":"荊州先行運輸集團有限公司","COUNTDATE":"2018-01-25","NM":198}],[{"QYMC":"湖北神州運業集團有限公司","COUNTDATE":"2018-01-22","NM":224},{"QYMC":"湖北神州運業集團有限公司","COUNTDATE":"2018-01-23","NM":215},{"QYMC":"湖北神州運業集團有限公司","COUNTDATE":"2018-01-24","NM":214},{"QYMC":"湖北神州運業集團有限公司","COUNTDATE":"2018-01-25","NM":165}],[{"QYMC":"漢川盛達客運有限公司","COUNTDATE":"2018-01-22","NM":162},{"QYMC":"漢川盛達客運有限公司","COUNTDATE":"2018-01-25","NM":161},{"QYMC":"漢川盛達客運有限公司","COUNTDATE":"2018-01-23","NM":156},{"QYMC":"漢川盛達客運有限公司","COUNTDATE":"2018-01-24","NM":155}],[{"QYMC":"鄂州市交通發展有限公司","COUNTDATE":"2018-01-22","NM":168},{"QYMC":"鄂州市交通發展有限公司","COUNTDATE":"2018-01-23","NM":155},{"QYMC":"鄂州市交通發展有限公司","COUNTDATE":"2018-01-24","NM":152},{"QYMC":"鄂州市交通發展有限公司","COUNTDATE":"2018-01-25","NM":151}]]}
多條線: