echarts折线图数据的展示样式
var option = { title: { text: '问题总数', subtext: quality_total,//副标题文本 left: 'center', top: '40%', textStyle: { fontFamily: "微软雅黑", color: '#fff', fontStyle: 'normal', //风格 fontWeight: 'bold', //粗细 fontSize: 14, //大小 align: 'center' //水平对齐 }, //富文本樣式 subtextStyle: { fontFamily: "微软雅黑", fontSize: 24, color: '#fff', } }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)',//自定义样式一 formatter: function(params) {//自定义样式二var result = params[0].name+'<br>';params.forEach(function(item) { result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>'; if(parseFloat(item.data)>=0){ result +=item.seriesName+" : "+'<span style="color:#e30101">'+ item.data+"%</span><br>" }else if(parseFloat(item.data)<0){ result +=item.seriesName+" : "+'<span style="color:#049500">'+ item.data+"%</span><br>" } }); return result; } }, grid: { left: '5%', right: '10%', top: '20%', bottom: '15%', containLabel: true }, tooltip: { show: true, trigger: 'item' }, legend: { data: [], type: 'scroll', orient: 'horizontal', icon: 'rect', top: 5, /* right: 30, top: 40, bottom: 20,*/ inactiveColor: '#ccc', itemGap: 10, itemWidth: 20, itemHeight: 14, symbolKeepAspect: true, //缩放时保持长宽比 textStyle: { color: 'white' } }, xAxis: { type: 'category', boundaryGap: false, axisLabel: { color: fontColor }, axisLine: { show: true, lineStyle: { color: '#397cbc' } }, axisTick: { show: false, }, splitLine: { show: false, lineStyle: { color: '#195384' } }, }, yAxis: { type: 'value', name: '', axisLabel: { formatter: '{value}', textStyle: { color: '#2ad1d2' } }, axisLine: { lineStyle: { color: '#27b4c2' } }, axisTick: { show: false, }, splitLine: { show: true,//横向分割线，false是去掉分割线 lineStyle: { color: '#195384', type: 'xndsj'//虚线，默认是实线 } } }, animation: false, series: [ { name: '', type: 'line', // barWidth: '30', symbol: 'circle', symbolSize: 8,//折线点的大小 itemStyle: { normal: { color: '#0092f6',//折线点的颜色 lineStyle: { color: "#0092f6",//折线的颜色 width: 1 }, } }, markPoint: { itemStyle: { normal: { color: 'red' } } }, data: [] } ] }; var pointData = [];//测点数据 var pointName = [];//测点名称 for (var i in result) { var pointName1 = [];//测点名称 var pointData1 = [];//测点数据 var pointTime = [];//上传时间 var arr = result[i]; pointName.push(arr.pointSn); pointName1.push(arr.pointSn); for (var j in arr.collectTime) { var array = arr.collectTime[j] let formatDate = new Date(array).Format("yyyy-MM-dd hh:mm:ss"); pointTime.push(formatDate); } pointData1 = arr.pointData; // 处理series需要的数据 var object = new Object(); object.name = pointName1[0]; object.data = pointData1; object.type = "line"; pointData.push(object); } myChart.setOption({ //加载数据图表 title: {}, legend: { data: pointName }, xAxis: { data: pointTime }, series: pointData });