ECharts饼状图 使用记录

let ret = {
  "code": 200,
  "msg": "success",
  "data": [{
      "value": 1048,
      "name": "高等数学",
      "isFinsh": 1
    },
    {
      "value": 735,
      "name": "大学英语",
      "isFinsh": 1
    },
    {
      "value": 580,
      "name": "数字逻辑",
      "isFinsh": 1
    },
    {
      "value": 484,
      "name": "计算机操作系统",
      "isFinsh": 0
    },
    {
      "value": 300,
      "name": "数据结构",
      "isFinsh": 0
    }
  ]
}

let legendData = []
let legendSelected = {}
let total = 0
let totalFinsh = 0

ret.data.forEach((item, index) => {
  legendData.push(item.name)
  if (item.isFinsh === 0) {
    legendSelected[item.name] = false
  } else if (item.isFinsh === 1) {
    totalFinsh += item.value
  }
  total += Number(item.value)
})

let dom = document.getElementById('container');
let myChart = echarts.init(dom, null, {
  renderer: 'canvas',
  useDirtyRect: false
});
let app = {};

let option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'horizontal',
    top: 10,
    left: 'left',
    textStyle: {
      lineHeight: 20,
      // 通过rich自定义尺寸，加宽度使百分比及数值各自对齐
      rich: {
        a: {
          width: 60,
          align: 'left'
        },
        b: {
          width: 40,
          align: 'right'
        }
      }
    },
    data: legendData,
    selected: legendSelected,
    formatter: (name) => {
      let tarValue;
      let tarName = name.length > 5 ? name.substr(0, 5) : name
      ret.data.forEach((item, i) => {
        if (item.name === name) {
          tarValue = Number(item.value ? item.value : 0)
        }
      })
      let arr = [
        '{a|' + tarName + '}' + '{b|' + tarValue + '}'
      ]
      return arr
    }
  },
  graphic: [{ //环形图中间添加文字
    type: 'text', //通过不同top值可以设置上下显示
    left: 'center',
    top: '53%',
    style: {
      text: '学业完成率\n' + Math.round(totalFinsh / total * 100) + '%',
      textAlign: 'center',
      fill: '#1E7CE8', //文字的颜色
      fontSize: 12,
      lineHeight: 16,
    }
  }],
  series: [{
    name: '绩点完成率',
    type: 'pie',
    radius: ['24%', '50%'],
    top: 50,
    data: ret.data,
    labelLine: {
      normal: {
        show: true,
        legend: 10,
        legend2: 100,
        lineStyle: {
          color: "#166AC1"
        }
      }
    },
    label: {
      formatter: function (pram) {
        console.log(pram)
        return '{a|' + pram.data.name + '}'
      },
      padding: [0, -10, 20, -10],
      rich: {
        a: {
          fontWeight: 500,
          lineHeight: 32,
          align: "right",
        },
      },
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 10,
        shadowOffsetX: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  }]
};

if (option && typeof option === 'object') {
  myChart.setOption(option);
}

myChart.on('legendselectchanged', (params) => {
  console.log(params)
  let percent = 0
  let total = 0
  let totalFinsh = 0

  ret.data.forEach((item, index) => {
    if (params.selected[item.name] === true) {
      totalFinsh += item.value
    }
    total += item.value
  })

  alert(Math.round(totalFinsh / total * 100))
})