以下使用的echarts版本为5.5.1，未使用ts（命名为规范仅作参考）
<template>
<div @click="myEcharts(1)">zhanshi</div>
<div class="Echarts">
<div id="main11" style="width: 70vw; height: 60vh"></div>
</div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, reactive } from "vue";
const echar_data = reactive({
data: {
"杯盘垂直比（%）": [
0.65, 0.64, 0.71, 0.57, 0.64, 0.83, 0.5, 0.56, 0.49, 0.59,
],
"hide-cdr-upperbound": [
0.7, 0.69, 0.76, 0.62, 0.69, 0.88, 0.55, 0.61, 0.54, 0.64,
],
"hide-cdr-lowerbound": [
0.6, 0.59, 0.66, 0.52, 0.59, 0.78, 0.45, 0.51, 0.44, 0.54,
],
"盘沿面积比（%）": [
2.65, 2.64, 2.71, 2.57, 2.64, 2.43, 2.2, 2.16, 2.09, 1.94,
],
"hide-ca-upperbound": [
2.71, 2.7, 2.78, 2.65, 2.7, 2.49, 2.25, 2.23, 2.2, 2.01,
],
"hide-ca-lowerbound": [
2.59, 2.57, 2.65, 2.52, 2.59, 2.35, 2.14, 2.09, 2.02, 1.88,
],
"cdr-upper": [0.1, 0.1, 0.1, 0.1, 0.1, 0.09, 0.1, 0.1, 0.1, 0.1],
"cd-upper": [0.12, 0.13, 0.23, 0.13, 0.11, 0.14, 0.11, 0.14, 0.16, 0.13],
},
});
const myEcharts = (uid) => {
var myChart = echarts.init(document.getElementById("main11"));
var option = {
title: {
text: "ECharts 入门示例",
},
tooltip: {
trigger: "item",
formatter: function (tooltipItem) {
let res = tooltipItem.name + "</br>";
let dataItem =
echar_data.data[tooltipItem.seriesName][tooltipItem.dataIndex];
res += tooltipItem.seriesName + ": " + dataItem + "</br>";
let previousDataItem =
echar_data.data[tooltipItem.seriesName][tooltipItem.dataIndex - 1];
let diff =
Math.round((dataItem - previousDataItem + Number.EPSILON) * 100) /
100;
if (tooltipItem.dataIndex > 0) {
res += "环比变化值: " + diff;
}
console.log(tooltipItem);
return res;
},
},
legend: {
data: ["杯盘垂直比（%）", "盘沿面积比（%）"],
},
xAxis: {
type: "category",
data: [
2021.6, 2021.9, 2021.12, 2022.3, 2022.6, 2022.9, 2022.12, 2023.3,
2023.6, 2023.9,
],
},
yAxis: { type: "value" },
series: [
{
name: "杯盘垂直比（%）",
type: "line",
data: echar_data.data["杯盘垂直比（%）"],
},
{
name: "hide-cdr-lowerbound",
type: "line",
stack: "cdr",
data: echar_data.data["hide-cdr-lowerbound"],
lineStyle: {
color: "transparent",
width: 0,
},
itemStyle: {
opacity: 0,
},
},
{
name: "hide-cdr-upperbound",
type: "line",
stack: "cdr",
areaStyle: {
color: "rgb(0, 104, 115, 0.15)",
},
data: echar_data.data["cdr-upper"],
lineStyle: {
color: "transparent",
width: 0,
},
itemStyle: {
opacity: 0,
},
},
{
name: "盘沿面积比（%）",
type: "line",
data: echar_data.data["盘沿面积比（%）"],
},
{
name: "hide-ca-lowerbound",
type: "line",
stack: "ca",
data: echar_data.data["hide-ca-lowerbound"],
lineStyle: {
color: "transparent",
width: 0,
},
itemStyle: {
opacity: 0,
},
},
{
name: "hide-ca-upperbound",
type: "line",
stack: "ca",
areaStyle: {
color: "rgb(104, 0, 115, 0.15)",
},
data: echar_data.data["cd-upper"],
lineStyle: {
color: "transparent",
width: 0,
},
itemStyle: {
opacity: 0,
},
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
};
onMounted(() => {});
</script>
<style scoped>
#echart1 {
height: 350px;
width: 800px;
margin: 0 auto;
}
</style>