怎么再vue中使用echarts

在 Vue 中使用 echarts，需要先安装 echarts 和 vue-echarts 两个依赖：

npm install echarts vue-echarts

然后在 Vue 组件中引入并注册 vue-echarts 组件：

<template>
  <div class="echarts-demo">
    <v-chart :options="chartData"></v-chart>
  </div>
</template>

<script>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import { GridComponent, TooltipComponent } from "echarts/components";
import { VueECharts } from "vue-echarts/components";

use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);

export default {
  name: "EchartsDemo",
  components: {
    "v-chart": VueECharts,
  },
  data() {
    return {
      chartData: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      },
    };
  },
};
</script>

在这个示例中，我们使用了 ECharts 的柱状图，数据和图表配置都定义在了组件的 data 中，然后将组件渲染到模板中。注意，我们还要在组件中使用 ECharts 的组件、渲染器和图表类型，然后将这些组件注册到 ECharts 中。