echarts饼状曲线图，中间显示总数

记录一下吧

今天在工商银行理财app也看到了这个饼，觉得应用场景还挺多的。记是记不住的，那就写下来吧！需要实现的效果如下：

我直接在echarts官网改的。下面贴代码：

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

// 如果要换数据，就改这个datas，从数据库获取就行了
// 这里是写死的
var datas = [
  ////////////////////////////////////////
  [
    { name: '圣彼得堡来客', value: 5.6 },
    { name: '陀思妥耶夫斯基全集', value: 1 },
    { name: '史记精注全译（全6册）', value: 0.8 }
  ]
];
var a = 0;
option = {
  graphic: {
    type: 'text',
    left: 'center',
    //left: '37%',
    top: 'center',
    style: {
      text:
        '总数' +
        '\n\n' +
        String(
          datas.map((item) => {
            item.forEach((e) => {
              a += e.value;
            });
            a = a.toFixed(1);
            return a;
          })
        ).replace(/(\d)(?=(?:\d{6})+$)/g, '$1.'),
      // String(this.circularGraph.sum.number).replace(/(\d)(?=(?:\d{6})+$)/g, '$1.'),
      textAlign: 'center',
      fill: '#333',
      width: 30,
      height: 30,
      fontSize: 14
    }
  },
  series: datas.map(function (data, idx) {
    var top = idx * 33.3;
    return {
      type: 'pie',
      radius: [40, 60],
      top: '32%',
      height: '33.33%',
      left: 'center',
      width: 400,
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      color: ['#1864B5', '#32A1E8', '#d9d9d9'],
      label: {
        alignTo: 'edge',
        formatter: '{name|{b}}\n{time|{c} 小时}',
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        rich: {
          time: {
            fontSize: 10,
            color: '#999'
          }
        }
      },
      labelLine: {
        length: 15,
        length2: 0,
        maxSurfaceAngle: 80
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x < myChart.getWidth() / 2;
        const points = params.labelLinePoints;
        // Update the end point.
        points[2][0] = isLeft
          ? params.labelRect.x
          : params.labelRect.x + params.labelRect.width;
        return {
          labelLinePoints: points
        };
      },
      data: data
    };
  })
};

option && myChart.setOption(option);

 饼中间显示总数还有另外第二种方法：

// 如果要换数据，就改这个datas，从数据库获取就行了
// 这里是写死的
var datas = [
  ////////////////////////////////////////
  [
    { name: '圣彼得堡来客', value: 5.6 },
    { name: '陀思妥耶夫斯基全集', value: 1 },
    { name: '史记精注全译（全6册）', value: 0.8 }
  ]
];
// 例如上面是二维数组 可以通过这种方式算出来，或者让后端返回总数的字段，也是可以的。
let dataNum = datas.flat().reduce((pre, cur) => pre + cur.value)

let option = {
  title: {
     // 主标题样式
     textStyle: {
       color: '#666',
       fontSize: 18 
    },
     itemGap: 10,
     x: 'center',
     y: 'center',
     text: '总数',
     subtext: dataNum,
     // 副标题样式
     subtextStyle: {
      color: '#666'
     },
     left: '40%',
     top: '43%'
}

总结

echarts的属性真的是太多，过段时间不写 就又忘记了。

看到有提问数据如何变更，我更新了一下值，可以看一下注释