const XData = ['2022-01', '2022-02', '2022-03', '2022-04', '2022-05', '2022-06', '2022-07', '2022-08', '2022-09', '2022-10', '2022-11', '2022-12'] const valueData = { jfsbs: [805, 860, 400, 400, 400, 400, 990, 985, 990, 850, 560, 772], md: [300, 390, 290, 285, 290, 288, 790, 795, 795, 760, 660, 480], znhbl: [95, 78, 50, 60, 85, 78, 76, 70, 65, 90, 74, 66] } option = { tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' shadowStyle: { shadowColor: 'rgba(60, 161, 246, 0.43)', shadowBlur: 10 } }, backgroundColor: '#FFFFFF', borderColor: 'rgba(60, 161, 246, 0.43)', borderWidth: 1, shadowColor: ' rgba(111, 193, 253, 0.35)', shadowBlur: 10, formatter: function (params) { // return params.value; const strName1 = params[0].seriesName const value1 = params[0].value const strName2 = params[1].seriesName const value2 = params[1].value const strName3 = params[2].seriesName const value3 = params[2].value return '

密度数' + value1 + '

设备数' + value2 + '

智能化比例' + value3 + '%

' }, textStyle: { rich: { name: { color: 'rgba(36, 36, 36, 1)', fontSize: 13, align: 'center' }, percent: { fontFamily: 'DIN', fontWeight: 500, fontSize: 22, color: '#1D91F5', align: 'center' } } } }, grid: { left: '2%', right: '4%', bottom: '14%', top: '16%', containLabel: true }, legend: { top: '5%', textStyle: { color: 'rgba(128, 125, 125, 1)', fontSize: 12 }, icon: 'rect', itemWidth: 12, itemHeight: 12, itemGap: 25 }, xAxis: { type: 'category', data: XData, axisLine: { lineStyle: { color: 'rgba(204, 204, 204, 1)' } }, axisLabel: { textStyle: { color: 'rgba(185, 185, 185, 1)' } }, axisTick: { show: false } }, yAxis: [{ type: 'value', axisLabel: { textStyle: { color: 'rgba(185, 185, 185, 1)' } }, axisLine: { show: false }, axisTick: { show: false }, splitLine: { show: true, lineStyle: { color: 'rgba(237, 237, 237, 1)', type: 'dotted' } } }, { type: 'value', nameTextStyle: { color: 'rgba(185, 185, 185, 1)' }, position: 'right', axisLine: { show: false }, splitLine: { show: false }, axisTick: { show: false }, axisLabel: { show: true, formatter: '{value} %', // 右侧Y轴文字显示 textStyle: { color: 'rgba(185, 185, 185, 1)' } } } ], series: [{ name: '新增基桩数', type: 'bar', barWidth: '12px', itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(141, 113, 226, 1)' }, { offset: 1, color: 'rgba(141, 113, 226, 0.2)' }]) } }, data: valueData.jfsbs }, { name: '本月检测数', type: 'bar', barWidth: '12px', itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: 'rgba(116, 178, 252, 1)' }, { offset: 1, color: 'rgba(116, 178, 252, 0.2)' }]) } }, data: valueData.md }, { name: '累计完成率', type: 'line', smooth: true, yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用 symbol: 'emptycircle', // 标记的图形为实心圆 symbolSize: 0, // 标记的大小 itemStyle: { color: 'rgba(65, 197, 95, 1)' }, areaStyle: { // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ { offset: 0, color: 'rgba(65, 197, 95, 0.4)' }, { offset: 1, color: 'rgba(255,255,255, 0)' } ], false ) }, data: valueData.znhbl } ] } //你的代码

Echarts在线免费图表