需要实现效果图如下

代码:

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);

      })
    },

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐