需要形容
- 可视化折线图
- 有好几条线，不同的线条单位不一样
- 在鼠标悬浮tooltip的时候，将对应单位对应增加
效果图
思路：应用tooltip中的formatter函数去管制即可
代码
复制粘贴即可应用，不难，可能一时间想不到...
<template> <div class="demo"> <div ref="myDiv" class="echart_line" /> </div></template><script>import * as echarts from "echarts";export default { data() { return { unit: "", // 变量单位赋值 legendData: ["甲", "乙", "丙", "丁"], // 图表应用的一系列数据 series: [ { unit: "米", type: "line", data: [ 95, 16, 66, 51, 15, 15, 15, 4, 16, 5, 115, 55, 114, 56, 15, 77, 15, 99, 153, 22, 33, 88, 23, 11, 33, 46, 22, 11, 6, 129, ], name: "甲", }, { unit: "千克", type: "line", data: [ 139, 27, 60, 0, 60, 99, 11, 77, 88, 54, 68, 99, 60, 99, 24, 12, 18, 133, 99, 54, 60, 24, 60, 54, 60, 99, 88, 111, 99, 60, ], name: "乙", }, { unit: "秒", type: "line", data: [ 54, 14, 3, 69, 23, 88, 60, 54, 60, 54, 16, 72, 54, 14, 19, 34, 36, 6, 14, 54, 99, 19, 60, 27, 41, 14, 32, 72, 82, 92, ], name: "丙", }, { unit: "安培/摩尔", type: "line", data: [ 5, 72, 13, 1, 115, 82, 63, 14, 125, 99, 121, 135, 54, 15, 35, 15, 2.5, 47, 31, 23, 15, 9, 14, 7, 15, 48, 88, 123, 31, 49, ], name: "丁", // yAxisIndex: 0, // 1 可设置左侧和右侧y轴线条... }, ], // x轴刻度数值 dataX: [ "2023-03-01", "2023-03-02", "2023-03-03", "2023-03-04", "2023-03-05", "2023-03-06", "2023-03-07", "2023-03-08", "2023-03-09", "2023-03-10", "2023-03-11", "2023-03-12", "2023-03-13", "2023-03-14", "2023-03-15", "2023-03-16", "2023-03-17", "2023-03-18", "2023-03-19", "2023-03-20", "2023-03-21", "2023-03-22", "2023-03-23", "2023-03-24", "2023-03-25", "2023-03-26", "2023-03-27", "2023-03-28", "2023-03-29", "2023-03-30", ], }; }, mounted() { this.chart(); }, methods: { chart() { this.$nextTick(() => { var that = this; // 初始化一个Echarts this.myChart = echarts.init(this.$refs.myDiv); // 给Echarts设置对应的配置缠住 this.myChart.setOption({ color: ["#F26522", "#8DC63F", "#00AEEF", "#FFC20E"], // 图表左上方的圆点图例 legend: { type: "scroll", data: that.legendData, icon: "circle", itemHeight: 10, top: 4, left: 24, }, // x轴的设置 xAxis: { type: "category", // x轴的凸起小竖点 axisTick: { show: true, inside: true, lineStyle: { color: "#999", }, }, // x轴的线条色彩 axisLine: { lineStyle: { type: "dashed", color: "#999", }, }, // x轴应用的数据 data: that.dataX, // x轴的文字设置 axisLabel: { margin: 8, interval: 7, formatter: function (params) { return (params = params.slice(0)); }, }, }, // y轴的设置 yAxis: [ { type: "value", name: "(KPA)", // 左上方的圆点下方 nameTextStyle: { // 设置地位 padding: [10, 0, 0, -20], }, axisLine: { show: false, // 最左侧的y轴的线条 将其暗藏 lineStyle: { color: "#BDBDBD", // 另外的色彩设置，如刻度数值 }, }, splitLine: { show: true, // 显示横向分隔线 lineStyle: { type: "dashed", // 款式为虚线 color: "#e1e1e1", // 设置对应分隔线的色彩 }, }, min: 0, // 设置左侧Y轴的最小刻度从哪里开始，此案例从0开始 max: function (value) { // 设置最大值，即为最大值，当然也能够再加点 // return value.max; return value.max + 12; }, }, ], // 鼠标悬浮提示框 tooltip: { trigger: "axis", // 触发 // 轴指针 axisPointer: { // 鼠标款式 animation: true, // 竖线条款式 lineStyle: { color: "#123", // 设置色彩 width: 2, // 宽度 opacity: 0.8, }, }, /** * 重点是这个tooltip的formatter加工函数 * */ formatter: function (format) { /** * 依据format参数定义动静dom * */ var result = `<div style="height:100%; min-height:${30 + 28 * format.length}px; width: 200px; background: rgba(255, 255, 255, 0.27); " > <div style="width: 100%; height: 30px; padding-left:10px; background: rgba(0, 0, 0, 0.79); font-size: 14px; line-height: 30px; color: #ffffff; " > ${name ? name : format[0].name} </div> <div style=" height: 100%; padding-left:10px; width: 100%; border-radius: 3px; " > `; /** * 遍历判断动静增加dom单位 * */ format.map((item) => { // console.log("item", item); that.series.map((it, index) => { if (index == item.seriesIndex) { // 索引要对上 that.unit = it.unit; } }); result += "<div style='height: 28px;line-height:28px'>" + '<span style="display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:' + item.color + '"></span>' + item.seriesName + " : " + item.value + that.unit; ("</div>"); }); result += "</div>"; return result; }, }, // 图表应用的一系列数据 series: that.series, // 图表距容器的间隔 grid: { bottom: 60, left: "4%", right: "2%", }, // 区域缩放配置 dataZoom: [ { type: "slider", start: 0, end: 50, backgroundColor: "#e9e9e9", fillerColor: "#666", opacity: 0.2, show: true, height: "24ph", bottom: "12ph", }, ], }); // 增加自适应 window.addEventListener("resize", this.resizeFn); }); }, // 自适应函数 resizeFn() { this.myChart.resize(); }, }, beforeDestroy() { // 销毁时候移除resize事件 window.removeEventListener("resize", this.resizeFn); },};</script><style>.echart_line { width: 900px; height: 600px; border: 1px dotted #159;}</style>总结
- 很多货色，很快就忘
- 记录一下，留个印象
- 他日再用，找到文章
- 复制粘贴，不忙不慌