echarts半饼状图实现动态数据

1、实现效果

表格数据都是发请求获取到的动态的

2、官网示例

代码

3、动态实现

我的后台数据格式是这样的

 [
      {
        "value": 88,
        "name": "wahoo"
      },
      {
        "value": 118,
        "name": "CYCPLUS"
      },
      {
        "value": 121,
        "name": "ANT+"
      },
      {
        "value": 12,
        "name": "ThinkRide"
      },
      {
        "value": 15,
        "name": "T600"
      }
    ]

用的是ts，对数据格式已经限制了，用computed 添加空白项并且规定它的样式是实现不了的，，会报错

const brandData = () => {
  let count = 0
  let data = store.cycleBrandData
  data.forEach((item) => {
    count += item.value
  })
  data.push({
    value: count,
    itemStyle: {
      color: 'none',
      decal: {
        symbol: 'none'
      }
    },
    label: {
      show: false
    }
  })
  return data
}

表格也显示不出来

尝试

data:
       [
        store.cycleBrandData[0],
        store.cycleBrandData[1],
        store.cycleBrandData[2],
        store.cycleBrandData[3],
        store.cycleBrandData[4],
        {
          value:
            store.cycleBrandData[0].value +
            store.cycleBrandData[1].value +
            store.cycleBrandData[2].value +
            store.cycleBrandData[3].value +
            store.cycleBrandData[4].value,
          itemStyle: {
            color: 'none',
            decal: {
              symbol: 'none'
            }
          },
          label: {
            show: false
          }
        }
      ]

把动态数据都拆解出来然后就可以了

完整代码

onMounted(() => {
  store.getBrand()
  setTimeout(() => {
    drawChart()
  }, 500)
})
const drawChart = () => {
  var myChart = echarts.init(document.getElementById('main'))
  let options = {
    color: ['#3366CC', '#6699FF', '#0033CC', '#3366FF', '#0033FF', '000033'],
    grid: {
      left: '3%', //默认10%
      right: '0', //默认10%
      bottom: '5%', //默认60
      top: '7%',
      containLabel: true
      //grid区域是否包含坐标轴的刻度标签
    },
    series: {
      type: 'pie',
      name: 'brand',
      radius: ['50%', '60%'],
      center: ['90%', '56%'],
      // cener 控制图表的中心位置，第一个值是x方向上，越大越往右，
      // 第二个值控制y方向，越大越往下
      startAngle: -90,
      colorBy: 'data',
      avoidLabelOverlap: true,
      top: 20,
      itemStyle: {
        borderRadius: 10,
        borderWidth: 2
      },
      tooltip: {
        trigger: 'item'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 23,
          fontWeight: 'bold'
        },
        itemStyle: {
          borderRadius: 10,
          borderWidth: 4
        }
      },
      label: {
        show: true,
        position: 'outside', //默认文本标签的位置，用线引导
        margin: 2,
        formatter: function (data: { name: string; value: string }) {
          return ['{b|' + data.name + '}', '{c|' + data.value + '}' + '{p|人次}'].join('\n\n')
        },
        rich: {
          b: {
            color: '#12d9e2',
            lineHeight: 12,
            fontSize: 16
          },
          c: {
            color: 'green',
            fontSize: 16,
            padding: [2, 5, 2, 5],
            backgroundColor: '#05131d',
            borderColor: '#eee',
            borderWidth: 1,
            fontWeight: 600,
            fontStyle: 'italic'
          },
          p: {
            fontSize: 16,
            color: '#12d9e2'
          }
        }
      },

      labelLine: {
        show: true,
        length: 35,
        length2: 20
      },
      data:
       [
        store.cycleBrandData[0],
        store.cycleBrandData[1],
        store.cycleBrandData[2],
        store.cycleBrandData[3],
        store.cycleBrandData[4],
        {
          value:
            store.cycleBrandData[0].value +
            store.cycleBrandData[1].value +
            store.cycleBrandData[2].value +
            store.cycleBrandData[3].value +
            store.cycleBrandData[4].value,
          itemStyle: {
            color: 'none',
            decal: {
              symbol: 'none'
            }
          },
          label: {
            show: false
          }
        }
      ]
    }
  }
  myChart.setOption(options, { notMerge: true })
}