Vue2中使用Echarts（一）配置，全局能使用使用

$ npm install echarts vue-echarts

要在 Vue 2 下使用 vue-echarts，需要确保 @vue/composition-api 已经安装：

npm i -D @vue/composition-api

main.js

import ECharts from 'vue-echarts'
import { THEME_KEY } from "vue-echarts";
Vue.config.productionTip = false
import { use } from 'echarts/core'
// 手动引入 ECharts 各模块来减小打包体积

import {
  CanvasRenderer
} from 'echarts/renderers'
import {
  BarChart
} from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent
} from 'echarts/components'

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

// 全局注册组件（也可以使用局部注册）
Vue.component('v-chart', ECharts)

new Vue({
  router,
  store,
  ECharts,
  THEME_KEY,
  render: h => h(App)
}).$mount('#app')

在使用的页面

<v-chart class="chart" :option="option" />

script:中

import { THEME_KEY } from "vue-echarts";是必须引入的

import { THEME_KEY } from "vue-echarts";
  export default {
    name: "HelloWorld",

    provide: {
      [THEME_KEY]: "white"
    },
    data() {
      return {
        option: {
          title: {
            text: "Traffic Sources",
            left: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: "vertical",
            left: "left",
            data: [
              "Direct",
              "Email",
              "Ad Networks",
              "Video Ads",
              "Search Engines"
            ]
          },
          series: [
            {
              name: "Traffic Sources",
              type: "pie",
              radius: "55%",
              center: ["50%", "60%"],
              data: [
                { value: 335, name: "Direct" },
                { value: 310, name: "Email" },
                { value: 234, name: "Ad Networks" },
                { value: 135, name: "Video Ads" },
                { value: 1548, name: "Search Engines" }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        }
      };
    }
  };