echarts 饼图（pie）的封装（各属性的讲解以及使用，自定义图例排列方式）

设计稿的图例是分两列，并且左对齐排列，解决方法是，legend用一个数组，并且 数组每一项orient 设置为’vertical’（垂直）。
来人啊，上代码：

    // 封装公共饼图
    commonPie(echart, seriesName, pieData) {
      // 基于准备好的dom，初始化echarts实例
      const echarts = require('echarts')
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(echart)
      // 绘制图表
      myChart.setOption({
        backgroundColor: '', // 背景颜色透明
        title: {
          text: '' // 因为所有图表的标题都是自己定义的，所以这里置空，有需要请自行查阅文档，文档还是要看的喽，不能偷懒哦。
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // 设置饼图的颜色
        color: ['#F76367', '#17D982', '#FA8D3D', '#8B71F7'],
        legend: [{
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'vertical',
          icon: 'roundRect',
          left: '15%',
          bottom: 30,
          itemWidth: 18, // 设置图例图形的宽
          itemHeight: 9, // 设置图例图形的高
          textStyle: {
            color: '#fff', // 图例文字颜色
            padding: [0, 0, 0, 12] // 设置图例icon距离文字的距离
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
          itemGap: 20,
          data: pieData.slice(0, Math.ceil(pieData.length / 2)).map(item => {
            return item.name
          })
        }, {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'vertical',
          icon: 'roundRect', //这里有很多参数可选，按需要自行查阅文档
          right: '15%',
          bottom: 30,
          itemWidth: 18, // 设置图例图形的宽
          itemHeight: 9, // 设置图例图形的高
          textStyle: {
            color: '#fff', // 图例文字颜色
            padding: [0, 0, 0, 12]
          },
          itemGap: 20,
          data: pieData.slice(Math.ceil(pieData.length / 2)).map(item => {
            return item.name
          })
        }],
        series: [
          {
            name: seriesName,
            type: 'pie',
            radius: '55%',// 设置环形饼状图， 第一个参数设置内圈大小，第二个参数设置外圈大小，一个参数表示是实心饼，实惠好吃，加量不加价！！！
            center: ['50%', '35%'],// 设置饼状图位置，第一个参数设置水平位置，第二个参数设置垂直位置
            label: {
              show: false
            },// 隐藏值域的那条指向线
            data: pieData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              } // emphasis用来设置鼠标放到扇形上时的扇形样式、阴影
            }
          }
        ]
      })
      this.resizeEcharts(echart, myChart) 
    },