elementui饼状图

使用 ElementUI 实现饼状图可以通过以下步骤：

1. 安装 ElementUI 和 echarts

npm install element-ui echarts --save

2. 在需要使用饼状图的组件中引入 ElementUI 和 echarts

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import echarts from 'echarts'

export default {
  name: 'PieChart',
  components: {
    [ElementUI.Pie, ElementUI.Card]
  },
  data () {
    return {
      chartData: {
        seriesData: [],
        legendData: []
      },
      options: {
        title: {
          text: '饼状图'
        },
        tooltip: {},
        legend: {
          data: []
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: []
        }]
      }
    }
  }
}

3. 在需要使用饼状图的组件中编写代码生成饼状图

export default {
  name: 'PieChart',
  components: {
    [ElementUI.Pie, ElementUI.Card]
  },
  data () {
    return {
      chartData: {
        seriesData: [
          {value: 335, name: '直接访问'},
          {value: 310, name: '邮件营销'},
          {value: 234, name: '联盟广告'},
          {value: 135, name: '视频广告'},
          {value: 1548, name: '搜索引擎'}
        ],
        legendData: [
          '直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'
        ]
      },
      options: {
        title: {
          text: '饼状图'
        },
        tooltip: {},
        legend: {
          data: []
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: []
        }]
      }
    }
  },
  mounted () {
    this.options.legend.data = this.chartData.legendData
    this.options.series[0].data = this.chartData.seriesData
    this.chart = echarts.init(this.$refs.chart)
    this.chart.setOption(this.options)
  }
}

4. 在模板中使用饼状图

<template>
  <el-card>
    <div ref="chart" style="height: 400px;"></div>
  </el-card>
</template>

以上是基本实现饼状图的步骤，可以根据实际需求进行修改。