" + "

" + param[0].name + '

' + "

" + "" + " " + param[0].seriesName + ': ' + "" + param[2].value + '' + unit + '' + '

' + "

" + "" + " " + param[1].seriesName + ': ' + "" + param[3].value + '' + unit + '' + '

' + '

'; return resultTooltip; }, }, grid: { top: '15%', left: '5%', bottom: '10%', right: '5%', containLabel: true, }, animation: false, xAxis: { data: newchartName, //坐标轴 axisLine: { show: true, lineStyle: { width: 1, color: '#214776' }, textStyle: { color: '#fff', fontSize: axisSize } }, type: 'category', axisLabel: { textStyle: { color: fontColor, fontWeight: 500, fontSize: axisSize } }, axisTick: { textStyle: { color: '#fff', fontSize: axisSize }, show: false, }, axisLine: { //坐标轴轴线相关设置。数学上的x轴 show: true, lineStyle: { type: 'dashed',//线的类型虚线 color: '#DEDEDE', }, }, }, yAxis: [ { show: false, name: '浓度' + unit, data: newchartValue1, nameTextStyle: { //color: '#DEDEDE', color: fontColor, fontSize: legendSize, padding: 10, }, min: 0,//最小 max: issummer ? 250 : 800,//最大 interval: issummer ? 35 : 100,//相差 type: 'value', //type: 'category', splitLine: { show: true, lineStyle: { type: 'dashed',//线的类型虚线0 opacity: 0.2//透明度 }, }, axisTick: { show: false }, axisLine: { show: false, }, //坐标值标注 axisLabel: { show: true, textStyle: { color: fontColor, fontSize: axisSize } }, }, { show: false, name: '浓度' + unit, data: newchartValue2, nameTextStyle: { color: '#DEDEDE', fontSize: legendSize, padding: 10, }, min: 0,//最小 max: issummer ? 800 : 250,//最大 interval: issummer ? 100 : 35,//相差 type: 'value', //type: 'category', splitLine: { show: true, lineStyle: { type: 'dashed',//线的类型虚线0 opacity: 0.2//透明度 }, }, axisTick: { show: false }, axisLine: { show: false, }, //坐标值标注 axisLabel: { show: true, textStyle: { color: fontColor, fontSize: axisSize } }, }, ], series: [ { name: names[0], //name: "", type: 'pictorialBar', symbolSize: [barWidth, 10], symbolOffset: ['-81%', -5], symbolPosition: 'end', z: 15, color: '#3eb6f5', zlevel: 2, data: newchartValue1, }, { name: names[1], //name: "", type: 'pictorialBar', symbolSize: [barWidth, 10], symbolOffset: ['81%', -5], symbolPosition: 'end', z: 15, color: '#ffc241', zlevel: 2, yAxisIndex: 1, data: newchartValue2, }, { //name: names[0], name: "", type: 'bar', barGap: '60%', barWidth: barWidth, itemStyle: { // // color: '', color: color1, borderColor: color1, borderWidth: 1, borderType: 'solid', }, label: { show: false, formatter: '{c}' + '%', position: 'left', color: labColor, fontSize: 12, textAlign: 'center', }, zlevel: 2, stack: false, data: newchartValue1, markLine: { symbol: 'none', // 可以设置标记点的样式，这里设置为 'none' lineStyle: { color: labColor, // 设置直线的颜色 type: 'solid', // 设置直线的类型，可选值有：'solid', 'dashed', 'dotted' 等 width: 2, // 设置直线的宽度 }, // label: { // show: false, // }, silent: true, // animation: true, data: issummer ? markLine1 : markLine2, } }, { //name: names[1], name: "", type: 'bar', barGap: '60%', barWidth: barWidth, itemStyle: { // color: 'rgba(255,164,41,.16)', color: color2, borderColor: color2, borderWidth: 1, borderType: 'solid', }, label: { show: false, formatter: '{c}' + '%', position: 'right', color: labColor, fontSize: 12, textAlign: 'center', }, zlevel: 2, stack: false, yAxisIndex: 1, data: newchartValue2, markLine: { symbol: 'none', // 可以设置标记点的样式，这里设置为 'none' lineStyle: { color: labColor, // 设置直线的颜色 type: 'solid', // 设置直线的类型，可选值有：'solid', 'dashed', 'dotted' 等 width: 2, // 设置直线的宽度 }, // label: { // show: false, // }, silent: true, // animation: true, data: issummer ? markLine2 : markLine1, } }, { name: names[0], //name: "", type: 'pictorialBar', symbolSize: [barWidth, 10], symbolOffset: ['-81%', 5], z: 12, color: '#3eb6f5', data: newchartValue1.map(e => ({ name: '', value: '100', })), }, { name: names[1], //name: "", type: 'pictorialBar', symbolSize: [barWidth, 10], symbolOffset: ['81%', 5], z: 12, color: '#ffc241', yAxisIndex: 1, data: newchartValue2.map(e => ({ name: '', value: '100', })), }, ], }; if (newchartName.length > 10) { option.dataZoom = [ { type: "slider", xAxisIndex: [0], zoomLock: true, width: "90%", height: "5px", handleSize: 0, showDetail: false, start: 0, end: newchartName.length > 10 ? 20 : 30, bottom: "0", handleStyle: { color: fontColor, }, borderColor: "#90979c" }, { type: "inside", id: "insideX", xAxisIndex: [0], start: 0, end: newchartName.length > 3 ? 20 : 30, zoomOnMouseWheel: false, moveOnMouseMove: true, moveOnMouseWheel: true } ]; }

Echarts在线免费图表