Vue Echarts
made with Vuejs

Vue Echarts是一个Vue.js的ECharts图表组件，是对EChart的封装。

Vue Echarts是基于 ECharts v4.1.0+ 开发，依赖 Vue.js v2.2.6+。

安装

Npm

npm i echarts vue-echarts

Yarn

yarn add echarts vue-echarts

浏览器

<script src="https://cdn.jsdelivr.net/npm/echarts@4.1.0/dist/echarts.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-echarts@4.0.2"></script>

使用

引入 Vue和 vue-echarts

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

手动引入 ECharts 各模块来减小打包体积

import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'

如果需要配合 ECharts 扩展使用，只需要直接引入扩展包即可，以 ECharts-GL 为例：

需要安装依赖：

npm install --save echarts-gl

并添加如下引用

import 'echarts-gl'

注册组件后即可使用

Vue.component('v-chart', ECharts)

调用组件

    <v-chart :options="polar"/>

数据

  let data = []

    for (let i = 0; i <= 360; i++) {
        let t = i / 180 * Math.PI
        let r = Math.sin(2 * t) * Math.cos(2 * t)
        data.push([r, i])
    }

polar: {
    title: {
      text: '极坐标双数值轴'
    },
    legend: {
      data: ['line']
    },
    polar: {
      center: ['50%', '54%']
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    angleAxis: {
      type: 'value',
      startAngle: 0
    },
    radiusAxis: {
      min: 0
    },
    series: [
      {
        coordinateSystem: 'polar',
        name: 'line',
        type: 'line',
        showSymbol: false,
        data: data
      }
    ],
    animationDuration: 2000
  }
}

示例