vue2自定义echarts饼图图例，图例图标以及图形中间文字

官网： Apache ECharts

vue项目中引入步骤：

        1、使用npm安装Echarts：在终端运行命令npm install echarts --save

        2、在vue项目的入口文件也就是main.js中引入Echarts：import * as echarts from 'echarts'

        3、将Echarts挂载到vue原型：在main.js中使用vue.prototype.$echarts = echarts

        4、定义图表容器，设置echarts配置项，初始化echarts实例

        

template>
    <div class="chartBox" ref="chartBox"></div>
</template>
<script>
export default {
  components: {},
  data() {
    const vm = this
    return {
      option: {
        color: ["#376FFF", "#FAAD3A", "#FA5339"],//可自定义也可以随机生成
        tooltip: {
          trigger: 'item',
        },
        title: {//标题
          text: '饼图',
          left: 'center',
          top: '10%',
          textStyle:{
            color: "#000",
            fontSize: '39px'
          }
        },
        legend: [//图例
          {
            orient: 'vertical',//图例布局：'horizontal'、'vertical'
            icon: "citrianglercle",//图例图标：'circle', 'rect', 'roundRect',
            //'diamond', 'pin', 'arrow', 'none','triangle',
            textStyle: {
              color: "#C0C4C7",
              fontSize: '14px'
            },
            align: 'right',//图标位置
            itemWidth : 8,//图例宽度
            itemHeight: 8,//图例高度
            data: ['Search Engine'],//左侧图例数据
            x: "left",//图例位置
            top: '50%',
          },
          {
            orient: 'vertical',
            icon: "circle",
            textStyle: {
              color: "#C0C4C7",
              fontSize: '14px'
            },
            itemWidth : 8,
            align: 'left',
            itemHeight: 8,
            data: ['Direct Direct','Email Email'],//右侧图例数据
            x: "right",
            top: '50%',
          }  
        ],
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['30%', '43%'],//饼图内半径、外半径
            center: ['50%', '50%'],//饼图x、y轴距离
            label: {
              show: true,
              position: 'center',//文字位置
              formatter: params =>{//自定义文字内容
                return '{total|数量}'+ '\n\r' + '{active|汇总}'
              },
              rich: {//自定义文本样式
                total:{
                  fontSize: 18,
                  fontFamily : "微软雅黑",
                  color:'red',
                },
                active: {
                  fontFamily : "微软雅黑",
                  fontSize: 15,
                  color:'#6c7a89',
                  width: 50,
                  lineHeight: 30
                },
              },
            },
            data: [
              { value: 1048, name: 'Search Engine'},
              { value: 735, name: 'Direct Direct'},
              { value: 580, name: 'Email Email'},
            ]
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  methods: {
    init(){
      let chartBox = document.getElementById('chartBox')
      chartBox.setOption(this.options)
    },
  },
  created() {
  },
  mounted() {
    this.init()
  },
}
</script>
<style lang="scss" scoped>
.chartBox{
    height: 200px;
    width: 500px;
}
</style>

图例: 在legend的data中自定义两侧数据(legend自定义文本内容也可以通过formatter设置)，icon设置图例图标样式，orient设置图例布局；

饼图中间文字：series的label中通过formatter中自定义文字内容，rich中自定义文字样式