lenged formatter

yuyu_2019

已于 2023-03-13 12:43:58 修改

阅读量632

点赞数

CC 4.0 BY-SA版权

分类专栏： vue-echarts的千奇百变文章标签： javascript 前端 vue.js

于 2022-01-14 17:07:54 首次发布

本文链接：https://blog.youkuaiyun.com/yuyu_2019/article/details/122498409

vue-echarts的千奇百变专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种使用ECharts进行图例展示的方法，通过自定义formatter实现数据的百分比显示，提高了图表的可读性和信息传达效率。文章详细介绍了如何设置图例的位置、样式以及如何动态计算并显示数据的百分比。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

legend: {
  top: 'center',
  left: '60px',
  orient: 'vertical',
  textStyle: {
    color: '#fff', // 文字颜色
    fontSize: 14,
  },
  padding: [50, 20], // 整体padding
  itemGap: 20, // 每项间距
  formatter: (pamars) => {
    console.log(pamars)
    let data = this.orgOptions.series[0].data
    console.log(data)

    // 算总数
    var total = 0;
    for (var i = 0; i < data.length; i++) {
      total += data[i].value;
    }

    for (let i = 0; i < data.length; i++) {
      if (data[i].name === pamars) {
        let value = data[i].value
        var pec = (data[i].value / total * 100).toFixed(2)
        return `${pamars}（${value} 处，占比${pec}%）`
      }
    }
  }
},

legend: {
          top: '40%',
          right: '20px',
          icon: 'circle',
          width: '260px',
          orient: 'horizontal', // 排列方式 horizontal（水平） vertical（垂直） 
          itemHeight: 10, // 控制小圆点的大小
          itemWidth: 12,
          itemGap: 20,
          textStyle: {
            color: '#fff', // 文字颜色
            lineHeight: 16,
          },
          formatter: (name) => {
            let data = this.orgOptions.series[0].data
            console.log('这里')
            console.log(data)

            let total = 0 // 总数，用来计算百分比
            let number = 0 // 数字
            let pec = 0 // 百分比

            for (let i = 0; i < data.length; i++) {
              total += data[i].value
            }
            for (let i = 0; i < data.length; i++) {

              if (data[i].name == name) {
                number = data[i].value
                pec = (number / total * 100).toFixed(2)
              }

            }

            return [
              `${name}`,
              `${number} (${pec})%`,
            ].join("\n");

          }
        },