vue2引入echarts

1.安装插件

npm install echarts --save

2.引入插件

import * as echarts from "echarts";

3.举个例子：饼图和环图

 主体思路

• 先创建一个div，创建一个状态变量chart
• 在methods中创建方法，方法中：$refs获取图表dom元素 ，然后echarts.init()创建图表实例,使用this.charts接受
• 配置图表类型，样式 const options=xxxx
• 使用this.chart.setOptions(options),把图表配置挂载到div上，渲染图表

<template>
  <div style="display: flex">
    <div class="echarts-chart" ref="echarts"></div>
    <div class="echarts-chart" ref="ech2" style="margin-left: 20%"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "Console",
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    this.initChart();
    this.huantu();
  },
  methods: {
    huantu() {
      // 获取容器元素
      const container = this.$refs.ech2;

      // 创建图表实例
      this.chart = echarts.init(container);

      // 配置图表选项
      const options = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      };

      // 使用配置项显示图表
      this.chart.setOption(options);
    },

    initChart() {
      // 获取容器元素
      const container = this.$refs.echarts;

      // 创建图表实例
      this.chart = echarts.init(container);

      // 配置图表选项
      const options = {
        series: [
          {
            type: "pie",
            radius: "55%",
            data: [
              { value: 335, name: "直接访问" },
              { value: 310, name: "邮件营销" },
              { value: 234, name: "联盟广告" },
              { value: 135, name: "视频广告" },
              { value: 1548, name: "搜索引擎" },
            ],
          },
        ],
      };

      // 使用配置项显示图表
      this.chart.setOption(options);
    },
  },
  beforeDestroy() {
    // 销毁图表实例
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  },
};
</script>

<style scoped>
.echarts-chart {
  width: 400px;
  height: 400px;
}
</style>