问题形容
产品要这样的成果，就做这样的成果呗。有图有假相，咱们先来看一下效果图：
效果图
代码附上
运行的话，间接赋值粘贴即可，遇到相似的性能，ctrl+CV改一下就行啦 ^_^
<template> <div class="eWrap"> <div id="echartsDom"></div> </div></template><script>import Echarts from "echarts";export default { data() { return { myChart: null, // 定义变量用来寄存echarts实例 xData: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"], // 两个echarts专用的x轴的数据 y1Data: [8888, 9999, 7777, 10000, 3334, 7878, 6543], // 小件货物 y2Data: [56, 64, 32, 58, 64, 76, 81], // 网点负荷 y3Data: [88, 99, 77, 100, 21, 66, 95], // 大件货物 }; }, mounted() { this.drawEcharts(); }, methods: { // 画图办法 drawEcharts() { this.myChart = Echarts.init(document.getElementById("echartsDom")); this.myChart.setOption({ color: ["#bfa", "#baf", "pink", "#baf"], // 配置数据色彩 grid: [ // 配置第一个折线图的地位 { left: "14.5%", right: "12%", top: "10%", height: "32%", }, // 配置第二个折线图地位 { left: "14.5%", right: "12%", top: "60%", height: "32%", }, ], tooltip: { trigger: "axis", // formatter函数动静批改tooltip款式 formatter: function (params) { if (params) { var htmlStr = ""; htmlStr += params[0].name.replace(/\-/g, "/") + "<br/>"; //x轴的名称 for (var i = 0; i < params.length; i++) { var param = params[i]; // 存一份item项 var seriesName = param.seriesName; //图例名称 var value = param.value; //y轴值 var color = param.color; //图例色彩 htmlStr += "<div>"; htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>'; //圆点前面显示的文本 htmlStr += seriesName + "：" + value; switch (seriesName) { case "小件货物": htmlStr += " " + "件"; break; case "网点负荷": htmlStr += " " + "%"; break; case "大件货物": htmlStr += " " + "件"; break; default: htmlStr += " "; } htmlStr += "</div>"; } return htmlStr; } else { return; } }, backgroundColor: "#ccc", borderWidth: 1, borderColor: "#ccc", padding: 10, textStyle: { color: "#000", fontSize: 12, align: "left", }, }, legend: { show: true, x: "center", y: "0", data: ["小件货物", "网点负荷", "大件货物", "网点负荷"], textStyle: { fontSize: 12, }, }, // 将高低两个tootip合成一个 axisPointer: { link: { xAxisIndex: "all" }, }, xAxis: [ { type: "category", scale: true, axisLabel: { show: false, }, axisTick: { alignWithLabel: true, }, splitLine: { show: false, }, data: this.xData, //x轴工夫的数据 }, { gridIndex: 1, type: "category", scale: true, axisLabel: { fontSize: 10, }, axisTick: { alignWithLabel: true, }, splitLine: { show: false, }, data: this.xData, //x轴工夫的数据 }, ], yAxis: [ { type: "value", name: "件数", nameLocation: "center", nameGap: 50, nameTextStyle: { fontSize: 12, fontWeight: "500", }, axisLabel: { fontSize: 12, }, min: function (value) { return parseInt(value.min); }, max: function (value) { return parseInt(value.max * 1.05); }, scale: false, boundaryGap: [0, "100%"], splitLine: { show: false, }, splitNumber: 4, //设置坐标轴的宰割段数 }, { type: "value", name: "负荷/百分比", nameLocation: "center", nameGap: 42, nameTextStyle: { fontSize: 12, }, axisLabel: { fontSize: 12, }, // min: function (value) { // return parseInt(value.min); // }, // max: function (value) { // return parseInt(value.max * 1.05); // }, scale: true, boundaryGap: [0, "100%"], splitLine: { show: false, }, splitNumber: 4, //设置坐标轴的宰割段数 }, { type: "value", name: "件数", nameLocation: "center", gridIndex: 1, nameGap: 30, nameTextStyle: { fontSize: 12, }, axisLabel: { fontSize: 12, }, min: function (value) { return parseInt(value.min); }, max: function (value) { return parseInt(value.max * 1.05); }, scale: true, boundaryGap: [0, "100%"], splitLine: { show: false, }, splitNumber: 4, //设置坐标轴的宰割段数 }, { type: "value", name: "负荷/百分比", nameLocation: "center", gridIndex: 1, nameGap: 42, nameTextStyle: { fontSize: 12, }, axisLabel: { fontSize: 12, }, // min: function (value) { // return parseInt(value.min); // }, // max: function (value) { // return parseInt(value.max * 1.05); // }, scale: true, boundaryGap: [0, "100%"], splitLine: { show: false, }, splitNumber: 4, //设置坐标轴的宰割段数 }, ], dataZoom: [ { type: "inside", startValue: this.y1Data.length - 4, // 搁置最初4个数组 endValue: this.y1Data.length - 1, xAxisIndex: [0, 1], // 显示 0 1 的数据，这个要加，不加的话，悬浮提醒就会出问题 }, ], series: [ { name: "小件货物", type: "line", xAxisIndex: 0, yAxisIndex: 0, hoverAnimation: true, // 悬浮的动画加上 data: this.y1Data, //小件货物 }, { name: "网点负荷", type: "line", xAxisIndex: 0, yAxisIndex: 1, hoverAnimation: true, // 悬浮的动画加上 data: this.y2Data, //网点负荷 }, { name: "大件货物", type: "line", xAxisIndex: 1, yAxisIndex: 2, hoverAnimation: true, // 悬浮的动画加上 data: this.y3Data, //大件货物 }, { name: "网点负荷", type: "line", xAxisIndex: 1, yAxisIndex: 3, hoverAnimation: true, // 悬浮的动画加上 data: this.y2Data, //网点负荷 }, ], }); // 自适应 window.addEventListener("resize", () => { this.myChart.resize(); }); }, },};</script><style lang="less" scoped>.eWrap { width: 100%; height: 400px; overflow: hidden; #echartsDom { width: 100%; height: 100%; }}</style>