如何在Vue.js中使用echarts创建饼图

1. 功能场景

在vue.js中，使用echarts组件，创建一个饼图，并且获取饼图的数据和属性

2. 技术支持

• vue.js
• element
• echarts
• webpack

3. 实现源码

3.1 饼图组件

3.2 index.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router'
import echarts from 'echarts'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(echarts)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

3.3 路由配置

import Vue from 'vue'
import Router from 'vue-router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Pie from '@/components/charts/pie'

Vue.use(Router)
Vue.use(ElementUI)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Pie',
      component: Pie
    }
  ]
})

4. 源码说明

4.1 安装echarts

npm install echarts

4.2 导入echarts

import echarts from 'echarts'

4.3 创建饼图容器

4.4 初始化图形数据

buildData() {
        let labels = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        let values = []
        for (let i = 0; i < labels.length; i++) {
          values.push({
            value: parseInt(Math.random() * 10000),
            name: labels[i],
            color: this.randomColor()
          })
        }

        return {
          labels,
          values
        }
      }

5. 效果预览

饼图

点击饼图打印结果