Echarts 官网

安装Echats

npm install echarts --save
或
yarn add echarts --save

使用

在main.js中引入Echarts

// 引入Echarts
import Echarts from 'echarts'
Vue.prototype.echarts = Echarts
Vue.use(Echarts)

      或

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

在模板中加入挂载Echarts的DOM节点

<template>
  <div id="app" class="app">
    <div ref="echarts" id="echarts"></div>
  </div>
</template>

<style lang="less">
#echarts {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
</style>

在 methods 中添加 Echarts 调用方法

methods: {
    echartsMit() {
      let dom = this.$refs.echarts;
      let myChart = this.$echarts.init(dom);
      let option = {
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            data: [
              {
                value: 235,
                name: "视频广告",
              },
              {
                value: 274,
                name: "联盟广告",
              },
              {
                value: 310,
                name: "邮件营销",
              },
              {
                value: 335,
                name: "直接访问",
              },
              {
                value: 400,
                name: "搜索引擎",
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },