echarts饼图 vue2 代码示例

当使用Vue2和Echarts来实现饼图时，你可以按照以下步骤进行操作：

1. 首先，确保你已经安装了Vue2和Echarts的相关依赖包。你可以通过npm或者yarn来安装它们。

2. 在你的Vue组件中，引入Echarts和相关的样式文件。你可以在`<script>`标签中使用`import`语句来引入它们。

import echarts from 'echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'

3. 在Vue组件的`mounted`生命周期钩子函数中，初始化Echarts实例，并设置相关的配置项和数据。

mounted() {
  // 初始化Echarts实例
  const chartDom = this.$refs.chart
  const myChart = echarts.init(chartDom)

  // 设置配置项
  const options = {
    title: {
      text: '饼图示例',
      subtext: '数据来源',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 335, name: '直接访问' },
          { value: 310, name: '邮件营销' },
          { value: 234, name: '联盟广告' },
          { value: 135, name: '视频广告' },
          { value: 1548, name: '搜索引擎' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }

  // 使用配置项和数据绘制图表
  myChart.setOption(options)
}

4. 在Vue组件的模板中，使用`ref`属性给图表容器元素添加一个引用。

<template>
  <div>
    <div ref="chart" style="width: 600px; height: 400px;"></div>
  </div>
</template>

这样，你就可以在Vue2中使用Echarts来实现饼图了。