1. 功能场景

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

2. 技术支持

vue.js
element
echarts
webpack

3. 实现源码

3.1 饼图组件

<template>
  <el-row :gutter="20">
    <el-col :span="24">
      <div id="pie_chart"></div>
    </el-col>
  </el-row>
</template>

<script>
  import echarts from 'echarts'
  export default {
    data() {
      return {

      }
    },
    mounted() {
      this.buildPie()
    },
    methods: {
      buildPie() {
        let pie = echarts.init(document.getElementById('pie_chart'))
        let data = this.buildData()
        let option = {
          backgroundColor: '#ddd',
          title: {
            text: '销售量统计',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}  {c} ({d}%)"
          },
          legend: {
            bottom: 10,
            left: 'center',
            data: data.labels
          },
          series: [{
            name: '星期',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: data.values,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }

        pie.setOption(option)
        pie.on('click', function(params) {
          console.log(params.name, params.value, params.percent, params.seriesName, params.seriesType)
        })
      },
      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
        }
      },
      randomColor() {
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
        return color;
      }
    }
  }
</script>

<style scoped>
  #pie_chart {
    width: 800px;
    height: 800px;
  }
</style>

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: '<App/>'
})

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 创建饼图容器

<div id="pie_chart"></div>

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
        }
      }