vue中使用echarts环形图

要在Vue中使用echarts环形图，需要先安装echarts和vue-echarts插件。

1. 安装 echarts 和 vue-echarts 插件

npm install echarts vue-echarts

2. 引入并注册vue-echarts组件

import VueECharts from 'vue-echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'

export default {
  components: { VueECharts },
  // ...
}

3. 在模板中使用vue-echarts组件来绘制环形图

<template>
  <div>
    <vue-echarts :options="chartOptions" style="height: 400px;"></vue-echarts>
  </div>
</template>

4. 在Vue实例中定义环形图的配置项

export default {
  data() {
    return {
      chartOptions: {
        title: {
          text: '环形图示例',
          subtext: '数据来源：某网站',
          x: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
        },
        series: [
          {
            name:'访问来源',
            type:'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data:[
              {value:335, name:'直接访问'},
              {value:310, name:'邮件营销'},
              {value:234, name:'联盟广告'},
              {value:135, name:'视频广告'},
              {value:1548, name:'搜索引擎'}
            ]
          }
        ]
      }
    }
  }
}

这样就可以在Vue中使用echarts环形图了。