vue中使用echarts

以下使用的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>