vue中使用echarts

在src目录下创建echarts目录，结构如下：

 安装echarts

npm install vue-echarts --save

 index.js内容:

import Vue from 'vue'
import ECharts from 'vue-echarts'

// 按需引入
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/chart/line'

// 若使用：ECharts-GL
// 需要安装依赖：npm install --save echarts-gl
// import 'echarts-gl'

// 注册组件后即可使用
Vue.component('v-chart', ECharts)

main.js中

import './echarts'

组件中使用：

 <v-chart :options="datas" autoresize />

data(){
    return {
datas: {
        title: {
          text: "..."
        },
        legend: {
          data: ["line"]
        },
        polar: {
          center: ["50%", "54%"]
        },
        tooltip: {
          trigger: "axis"
        },
        angleAxis: {
          type: "value",
          startAngle: 0
        },
        radiusAxis: {
          min: 0
        },
        series: [
          {
            coordinateSystem: "polar",
            name: "line",
            type: "line",
            showSymbol: false,
            data:[]
          }
        ]
      }
}
}
}

vue.config.js添加如下内容：

module.exports = {
transpileDependencies: [
    'vue-echarts',
    'resize-detector'
  ]
}