vue2使用echarts画饼状图

要在Vue2中使用echarts画饼状图，可以按照以下步骤进行：

1. 安装echarts

在项目中安装echarts，可以使用npm或yarn进行安装，命令如下：

npm install echarts --save

或者

yarn add echarts

2. 引入echarts

在需要使用echarts的组件中引入echarts，可以使用以下方式：

import echarts from 'echarts'

3. 创建echarts实例

在组件的mounted钩子函数中创建echarts实例，代码如下：

mounted () {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(this.$refs.chart)
  // 绘制图表
  myChart.setOption(this.chartOptions)
}

其中，this.$refs.chart是一个DOM元素，用于渲染echarts图表。this.chartOptions是一个包含echarts配置选项的对象，可以根据需要进行设置。

4. 设置饼状图的配置选项

在data中定义一个包含饼状图数据的数组，然后在chartOptions中设置饼状图的配置选项，代码如下：

data () {
  return {
    pieData: [
      {value: 335, name: '直接访问'},
      {value: 310, name: '邮件营销'},
      {value: 234, name: '联盟广告'},
      {value: 135, name: '视频广告'},
      {value: 1548, name: '搜索引擎'}
    ]
  }
},
chartOptions: {
  title: {
    text: '饼状图示例',
    subtext: '数据来自网络'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    left: 10,
    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: '50%',
      data: this.pieData,
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

其中，title、tooltip、legend和series是饼状图的配置选项，可以根据需要进行设置。在series中设置data为之前定义的pieData数组，用于展示饼状图数据。