共计 3849 个字符，预计需要花费 10 分钟才能阅读完成。
需要形容
- 可视化折线图
- 有好几条线，不同的线条单位不一样
- 在鼠标悬浮 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>
总结
- 很多货色，很快就忘
- 记录一下，留个印象
- 他日再用，找到文章
- 复制粘贴，不忙不慌
正文完