Echarts柱状图柱子上方显示数据和百分比

async.1

已于 2024-03-04 14:42:04 修改

阅读量5.5k

点赞数

分类专栏： Vue 文章标签： echarts 前端 javascript vue.js

于 2023-10-18 16:42:42 首次发布

本文链接：https://blog.csdn.net/m0_65983287/article/details/133909409

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

需要实现效果图如下

代码：

res为后台返回的数据

 series: [
            {
              name: '男生',
              data: res.map(d => d.maleCount),
              type: 'bar',
              label: {
                show: true,
                position: 'top',//在上方显示
                textStyle: {//数值样式
                  fontSize: '12px',
                  color: '#999'
                },
                formatter: function (d) {
                  let sum =(( d.data / (d.data + res[d.dataIndex].femaleCount))*100).toFixed(2)+'%'
                 return d.data+'\n'+sum
                }
              },
            },
            {
              name: '女生',
              data: res.map(d => d.femaleCount),
              type: 'bar',
              label: {
                show: true,
                position: 'top',//在上方显示
                textStyle: {//数值样式
                  fontSize: '12px',
                  color: '##999'
                },
                formatter: function (d) {
                  let sum =(( d.data / (d.data + res[d.dataIndex].maleCount))*100).toFixed(2)+'%'
                 return d.data+'\n'+sum
                }
              },
            },
          ]

完整代码：

 // 柱状图
    statAreaStudentCount() {
      statAreaStudentCount().then(res => {
        console.log(res)
        res.forEach(item => {
          this.boyList += item.maleCount
          this.girlList += item.femaleCount
        })
        var chartDom2 = document.getElementById('main');
        var myChart2 = echarts.init(chartDom2);
        this.option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          xAxis: {
            type: 'category',
            data: res.map(d => d.areaName),
            axisLabel: {
              showMaxLabel: true,
              interval: 0,
              rotate: 0
            }
          },
          yAxis: {
            type: 'value'
          },
          grid: {
            show: false,
            top: '10%',
            right: '5%',
            bottom: '12%',
            left: '8%'
          },
          series: [
            {
              name: '男生',
              data: res.map(d => d.maleCount),
              type: 'bar',
              label: {
                show: true,
                position: 'top',//在上方显示
                textStyle: {//数值样式
                  fontSize: '12px',
                  color: '#999'
                },
                formatter: function (d) {
                  let sum =(( d.data / (d.data + res[d.dataIndex].femaleCount))*100).toFixed(2)+'%'
                 return d.data+'\n'+sum
                }
              },
            },
            {
              name: '女生',
              data: res.map(d => d.femaleCount),
              type: 'bar',
              label: {
                show: true,
                position: 'top',//在上方显示
                textStyle: {//数值样式
                  fontSize: '12px',
                  color: '##999'
                },
                formatter: function (d) {
                  let sum =(( d.data / (d.data + res[d.dataIndex].maleCount))*100).toFixed(2)+'%'
                 return d.data+'\n'+sum
                }
              },
            },
          ]
        };
        this.option && myChart2.setOption(this.option);

      })
    },