vue加echarts在当前页面做一个饼状图

首先需要安装 `echarts` 和 `vue-echarts`。

通过 `npm` 安装：

npm install echarts vue-echarts

或者通过 `yarn` 安装：

yarn add echarts vue-echarts

在 `main.js` 文件中引入 `echarts` 和 `vue-echarts`：

import Vue from 'vue'
import ECharts from 'vue-echarts'

Vue.component('v-chart', ECharts)

在组件中使用：

<template>
  <v-chart :options="chartOptions" />
</template>

<script>
  import echarts from 'echarts'

  export default {
    data() {
      return {
        chartOptions: {
          title: {
            text: '饼状图',
            x: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            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: '搜索引擎' }
              ]
            }
          ]
        }
      }
    }
  }
</script>

这里只是一个简单的例子，更多的配置和使用方法可以参考 `echarts` 官方文档和 `vue-echarts` 的官方文档。