需求描述
- 視覺化折線圖
- 有好幾條線，不同的線條單位不一樣
- 在滑鼠懸浮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>
總結
- 很多東西，很快就忘
- 記錄一下，留個印象
- 他日再用，找到文章
- 複製貼上，不忙不慌