圆饼图 圆点显示

image.png

const colorList = ['#3AE3BC', '#FAD972', '#F88582', '#9299F3']
            const myChart = this.$echarts.init(document.getElementById('myChart_3'))
            const data = [
              {
                value: obj.fireCount,
                name: '火灾扑救'
              },
              {
                value: obj.jumpCount,
                name: '抢险救援'
              },
              {
                value: obj.bailoutCount,
                name: '社会救助'
              },
              {
                value: obj.otherCount,
                name: '其他出动'
              }
            ]

            let number = 0
            data.map(item => {
              number += item.value
            })
            const option = {
              // 悬浮展示
              // 底部小圆点
              legend: {
                right: '46',
                bottom: 'center',
                orient: 'vertical',
                icon: 'circle',
                textStyle: {
                  // color: '#fff'
                  fontSize: 24,
                  fontFamily: 'FZXBSJW'
                },
                formatter: function(name) {
                  const arr = data.filter(item => item.name === name)
                  const str = name + ' ' + arr[0].value + ' ' + '起'
                  return str
                }
              },
              // 中心字
              title: {
                show: true,
                text: ('敬请出动\n' + number) || '',
                itemGap: 8,
                left: '33%',
                top: 'center',
                textStyle: {
                  color: 'rgb(6,107,194)',
                  fontSize: 24,
                  fontFamily: 'FZXBSJW'
                },
                textAlign: 'center'
              },
              series: [
                {
                  type: 'pie',
                  // 玫瑰图
                  // roseType: 'radius',
                  radius: ['35%', '60%'],
                  center: ['33%', '50%'],
                  data: data,
                  // 饼图线上字的颜色
                  // name b，value c
                  label: {
                    color: '#333',
                    formatter: '{b} ({d}%)'
                  },
                  // 饼图线的颜色
                  // labelLine: {
                  //   smooth: 0.2,
                  //   length: 1,
                  //   length2: 10
                  // },
                  // 饼图本身颜色
                  itemStyle: {
                    normal: {
                      color: function(params) {
                        return colorList[params.dataIndex]
                      },
                      // 中间断开
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 12
                    }
                  },
                  animationType: 'scale',
                  animationEasing: 'elasticOut'

                }
              ]
            }
            myChart.setOption(option)