【echarts】饼图

饼图显示百分比

legend里用formatter格式化

image.png

        legend: {
            orient: 'vertical',
            x: '46%',
            y: '5%',
            icon: 'rect',
            itemWidth: 6,
            itemHeight: 6,
            formatter: function (name) {
              let persent = 0;
              let total = 0;
              let currentValue = 0;
              this.array.forEach(function (item) {
                total+=Number(item.value)
                if (item.name === name) {
                    currentValue = Number(item.value);
                }
              })
              persent = (currentValue/total * 100).toFixed(2)
              return name + '     ' + persent + '%'
            }
          },

标题居中

textStyle => align:"center"

        title:{
                text:"标题居中",
                left:"center",
                top:"39%",
                textStyle:{
                    color:"#F5A623",
                    fontSize:14,
                    align:"center"
                }
        },

饼图自定义颜色:color

          series: [
            {
              name: '',
              type: 'pie',
              radius: ['36%', '68%'],
              avoidLabelOverlap: false,
              label: false,
              center: ['22%', '37%'],
              labelLine: {
                show: false
              },
              hoverOffset: 3,
              color: ['#FB5350','#FCEC17','#FF8B01','#5AD8A6','#3091f3','#5f7bd3','#ff7009', '#fac858','#f88812','#fd1608'],
              data: this.array
            }
          ]