引入

下载安装：npm install echarts --save
 
全局引入：

import echarts from 'echarts' //引入echarts
Vue.prototype.$echarts = echarts //引入组件

局部引入：

// 引入 ECharts 主模块
let echarts = require('echarts/lib/echarts')
// 引入饼图
require('echarts/lib/chart/pie')
// 引入提示框、标题组件、图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/graphic')
require('echarts/lib/component/legend')
... // 按需引入

效果图

关于环形图中间文本显示：固定文本无hover效果使用graphic,固定文本hover效果使用series.label.normal,不固定文本hover效果使用series.label.emphasis。效果图中是固定文本无hover，取消了series.label自带的中间文本的显示，需要hover效果可根据代码调整。

实现源码

（注释里解释了用法）

html代码：

<div class="echart-sheet">
     <!--饼图-->
     <div id="main" style="width: 100%; height: 100%;"></div>
</div>

javascript代码：

data () {
    return {
      pieData: [
          {value: 400, name: '直接访问', itemStyle: {color: '#2661FF'}},
          {value: 300, name: '邮件营销', itemStyle: {color: '#638EFF'}},
          {value: 298, name: '联盟广告', itemStyle: {color: '#99B6FF'}},
          {value: 248, name: '视频广告', itemStyle: {color: '#FFA722'}},
          {value: 268, name: '搜索引擎', itemStyle: {color: '#FFCD81'}}
     ] // value为各个模块的值，name为显示值，itemStyle.color控制颜色
  },
  created () {
  },
  mounted () {
      this.$nextTick(function() {
        this.drawPie('main')
      }) // 延迟调用
  },
  methods: {
  	// 绘制饼图
      drawPie(id) {
        this.charts = echarts.init(document.getElementById(id))
        this.charts.setOption({
          tooltip: {
            trigger: 'item',
            formatter: '{a}<br/>{b}:{c} ({d}%)', // 处理hover显示的文本
            textStyle: {
              fontSize: '12'
            }
          }, // 提示文本的显示
          legend: {
            orient: 'vertical',
            x: 'right',
            data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
          }, // 用例
          graphic: {
            type: 'text',
            left: '68',
            top: '98',
            style: {
              text: `方式分析`,
              textAlign: 'center',
              fill: '#333333',
              fontSize: 12
            }
          }, // 原生图形元素组件，用来增加额外的模块，实现固定文本无hover效果
          series: [
            {
              name: '方式',
              type: 'pie',
              radius: [45, 78], // 半径，比例模式['50%', '70%']
              avoidLabelOverlap: false,
              center: [91, 98], // 位置：左右，上下；13+radius,20+radius
              label: {
                normal: {
                  show: false,
                  position: 'center'
                  // formatter: "{a}分析", // 处理hover环形图显示的文本
                  // color:'blue' // 中间显示文字的颜色
                }, // 固定文本hover效果，普通状态环形圈中间文本（各个模块文本保持一致时使用）
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: '12',
                    fontWeight: 'blod'
                  }
                } // 不固定文本hover效果，环形圈中间文本 强调状态（各个模块文本不同时使用）
              },
              labelLine: {
                normal: {
                  show: false
                }
              }, // 引导线
              data: this.pieData // 数据来源
            }
          ]
        })
      },
  }

css代码：

<style lang="scss">
  // 不多赘述，给div echart-sheet一个想要的宽高就行
</style>