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="pie">
        <div id="pie1">
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
            <div id="main1" style="float:left;width:100%;height: 300px"></div>
        </div>
        <div id="pie2">
            <div id="main2" style="float:left;width:100%;height: 300px"></div>
        </div>
    </div>
  </div>
</template>

<script>// 引入基本模板
let echarts = require('echarts/lib/echarts')
// 引入饼状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')


export default {
  created(){
  },
  mounted(){
    this.initData();
  },
  methods:{
    //初始化数据
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main1'));
      // 绘制图表
      myChart.setOption({
		  backgroundColor:'#fff', //设置间隔
          title : {
              text: '某站点用户访问来源',//主标题
              subtext: '纯属虚构',//副标题
              x:'center',//x轴方向对齐方式
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
              orient: 'vertical',
              bottom: 'bottom',
              data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series : [
              {
                  name: '访问来源',
                  type: 'pie',
                  radius : '55%',
				  // radius: ['60%', '70%'],
                  center: ['50%', '60%'],
                  data:[
                      {value:335, name:'直接访问'},
                      {value:310, name:'邮件营销'},
                      {value:234, name:'联盟广告'},
                      {value:135, name:'视频广告'},
                      {value:1548, name:'搜索引擎'}
                  ],
                  itemStyle: {
					  borderWidth:2, //设置border的宽度有多大
					  borderColor:'#fff',
                      emphasis: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  }
              }
          ]
      });
    },
  }
}
</script>

<style>
</style>