// 提示标题 const nameArr = ['报警','故障','提示'] let dateArray = ['9/3','9/4','9/5','9/6','9/7','9/8','9/9','9/10']; // 日期 let yData1 = [10,20,30,50,22,33,11,55]; let yData2 = [30,10,20,55,50,22,33,11]; let yData3 = [11,10,30,50,22,33,55,20]; option = { backgroundColor: '#313131', color: ['red', 'yellow', 'blue'], tooltip: { backgroundColor: 'rgba(50,50,50,0.7)', borderWidth: 0, padding: [5, 10], textStyle: { color: '#FFFFFF', fontFamily: 'sans-serif' }, trigger: 'axis', axisPointer: { type: 'shadow' }, // 格式化提示内容 formatter: function (params) { return params[1].name + '
' + "" + params[0].seriesName + ' : ' + params[0].value + '
' + "" + params[1].seriesName + ' : ' + params[1].value + '
' + "" + params[2].seriesName + ' : ' + params[2].value + '
' }, }, title: { text: "单位：条", top: -5, left: -5, textStyle: { color: 'rgba(255, 255, 255, 0.5)', fontSize: '14', fontWeight: 400, fontFamily: 'SourceHanSansCN-Regular' } }, grid: { top: '30', left: '0', right: '0', bottom: '0', containLabel: true }, xAxis: { type: 'category', boundaryGap: true, //坐标轴两边留白 data: dateArray, axisLabel: { interval: 0, textStyle: { color: '#FFFFFF', fontStyle: '400', fontSize: '14', fontFamily: 'SourceHanSansCN-Regular' } }, axisTick: { //坐标轴刻度相关设置 show: false, }, axisLine: { //坐标轴轴线相关设置 show: false }, splitLine: { //坐标轴分隔线 show: false } }, yAxis: [{ type: 'value', axisLabel: { textStyle: { color: 'rgba(255, 255, 255, 0.5)', fontStyle: 400, fontSize: '14', fontFamily: 'SourceHanSansCN-Regular' } }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: true, lineStyle: { color: 'rgba(255, 255, 255, 0.12)' } } }], series: [ // 红色折线图 { name: nameArr[0], type: 'line', // 拐点标记配置项 itemStyle: { normal: { color: 'rgba(0, 0, 0, 0)', borderColor: "#EB6060", borderWidth: 1, lineStyle: { color: "#EB6060", width: 2 }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(235, 96, 96, 0.5)' }, { offset: 1, color: 'rgba(235, 96, 96, 0)' }]) } } }, symbol: '/assets/images/red-dot.png', symbolSize: 11, data: yData1 }, // 黄色折线图圆点 { name: nameArr[1], type: 'line', // 拐点标记配置项 itemStyle: { normal: { color: 'rgba(0, 0, 0, 0)', borderColor: "#E3B947", borderWidth: 1, lineStyle: { color: "#E3B947", width: 2 }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(227, 185, 71, 0.4)' }, { offset: 1, color: 'rgba(227, 185, 71, 0)' }]) } } }, symbol: '/assets/images/yellow-dot.png', symbolSize: 11, data: yData2 }, // 蓝色折线图圆点 { name: nameArr[2], type: 'line', // 拐点标记配置项 itemStyle: { normal: { color: 'rgba(0, 0, 0, 0)', borderColor: "#17FFF1", borderWidth: 1, lineStyle: { color: "#17FFF1", width: 2 }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(23, 255, 241, 0.3)' }, { offset: 1, color: 'rgba(23, 255, 241, 0)' }]) } } }, symbol: '/assets/images/blue-dot.png', symbolSize: 11, data: yData3 } ] };

Echarts在线免费图表