vue集成echart完成饼状图和条形图

下面的代码可以直接运行显示饼状图，包括甜甜圈和实心饼状图
参考：
https://www.cnblogs.com/fqh123/p/11221279.html
https://echarts.apache.org/handbook/zh/how-to/chart-types/pie/basic-pie
设置饼状图的间隔

注意引入echarts插件的方式 import * as echarts from ‘echarts’
import echarts from 'echarts’这个是错误的
南丁格尔图又称玫瑰图，通常用弧度相同但半径不同的扇形表示各个类目。
ECharts 可以通过将饼图的 series.roseType 值设为 ‘area’ 实现南丁格尔图，其他配置项和饼图是相同的。

右上角的刷新和下载

feature: {
   
	mark: {
    show: true },
	dataView: {
    show: true, readOnly: false },
	restore: {
    show: true },
	saveAsImage: {
    show: true }
}

实心饼状图：只需要在setOption->series ->radius 里设置一个百分比55%就行

甜甜圈饼状图：只需要在setOption->series ->radius 里设置两个百分比，以数组赋值，例如radius: [‘60%’, ‘70%’]，意思是内圈和外圈的百分比

如果想要饼状图每个块中间有空隙：
需要在如下两个地方设置，一个是option的顶端设置背景色，
另一个需要在option->series 设置背景色，并且指定borderWidth

EchartPie.vue

<template>
  <div>
    <div class<