var gzData = [12, 25, 9, 62, 28, 70, 45, 82, 48, 18, 26, 22]; var bjData = [13, 15, 11, 18, 48, 69, 31, 46, 55, 28, 20, 10]; var XData = ["2019-1", "2019-2", "2019-3", "2019-4", "2019-5", "2019-6", "2019-7"]; // var statusDom = document.getElementById('s1') // var statusChart = echarts.init(statusDom) option = { // backgroundColor:'#040519', title: { // text: "设备异常情况总览", x: 'left' }, tooltip: { trigger: 'axis', backgroundColor:'white', textStyle:{ color:'#000' }, formatter: function(value) { const a0 = value[0] ? value[0].seriesName : ''; const a1 = value[1] ? value[1].seriesName : ''; const c0 = value[0] ? parseFloat(value[0].data) : ''; const c1 = value[1] ? parseFloat(value[1].data) : ''; let sum = c0 + c1; if(c0 != '' && c1 != ''){ sum =sum.toFixed(0);//保留0位小数 } const b = value[0] ? value[0].name : ''; var atext=''; var btext=''; if(c0 != ''){ atext='' + a0 + '   ' + c0 + '次   2.85%▲
'; }; if(c1 != ''){ btext='' +a1+ '   ' + c1 + '次   2.85%▼
'; }; return '全部   ' + sum + '次   2.85%▲
' + atext+ ' ' +btext + '' + b +''; } }, // legend: { // icon: 'roundRect', // right: 10, // textStyle:{ // color:'#fff' // }, // y:'5.5%', // x:'65%' // }, grid: { left: '3%', right: '4%', bottom: '3%', top:'30%', containLabel: true }, xAxis: [{ // name:'时间', type: 'category', axisPointer: { type: "shadow", shadowStyle: { color: "blue", opacity: 0.05 } }, axisLine:{ lineStyle:{ color:'#284fc4', width:1,//这里是为了突出显示加上的 } }, axisLabel:{ color:'#284fc4' }, axisTick:{ lineStyle:{ color:'#284fc4' } }, boundaryGap: false, data: XData }], yAxis: [{ name:'次', type: 'value', splitLine:{ show:false, lineStyle:{ type:'dashed', } }, axisLine:{ lineStyle:{ color:'#284fc4', width:1,//这里是为了突出显示加上的 } }, axisPointer:{ }, }], series: [{ id:'y0', name: '故障', type: 'line', smooth: true, color: "#4091fc", symbol:'circle', areaStyle: { opacity: 0.3, color: { type: "linear", x: 1, y: 0, x: 1, y2: 1, colorStops: [{ "offset": 0, "color": "#4091fc" //0% 处的颜色 }, { "offset": 1, "color": "#bdd6f7" // 100% 处的颜色 } ], "globalCoord": false // 缺省为 false } }, data: gzData }, { id:'y1', name: '报警', type: 'line', smooth: true, color: "#5f87ff", // hoverAnimation:true, symbol:'circle', areaStyle: { opacity: 0.3, color: { type: "linear", x: 1, y: 0, x: 1, y2: 1, colorStops: [{ "offset": 0, "color": "#4091fc" }, { "offset": 1, "color": "#054292" } ], "globalCoord": false } }, data: bjData }, { name: '报警', type: 'effectScatter', coordinateSystem: 'cartesian2d', data: bjData, //2d坐标系 symbol:'circle', symbolSize: 10, showEffectOn: 'emphasis', rippleEffect: { brushType: 'stroke' }, itemStyle: { normal: { color: '#2a90f8', borderColor:'white' } }, zlevel: 1, tooltip: { trigger: 'item', backgroundColor:'white', textStyle:{ color:'#000' }, formatter: '{c0}次   2.85%▼
' + '{b0}' } }, { name: '故障', type: 'effectScatter', coordinateSystem: 'cartesian2d', data: gzData, //2d坐标系 symbolSize: 10, showEffectOn: 'emphasis', rippleEffect: { brushType: 'stroke' }, itemStyle: { normal: { color: '#2d78c4', borderColor:'white' } }, tooltip: { trigger: 'item', backgroundColor:'white', textStyle:{ color:'#000' }, formatter: '{c0}次   2.85%▲
' + '{b0}' }, zlevel: 1 } ] };

Echarts在线免费图表