可视化 | 【echarts】金字塔图

发布时间:2024年01月21日


在这里插入图片描述

📚js

🐇总体框架

  1. 使用echarts.init方法初始化了一个 ECharts 实例,指定了一个 div 元素作为图表的容器。
  2. 数据预处理,将数值转换为百分比。
  3. 定义图表的配置项option,其中包括了图表的标题、提示框、x 轴、y 轴、数据系列以及数据缩放功能等等。
  4. 通过myChart.setOption将配置项应用到echarts实例。
  5. 绑定事件处理函数myChart.resize以便让图表自适应新的窗口大小,确保图表在不同尺寸的屏幕上能够正确显示。
    var myChart = echarts.init(document.getElementById('test1'));
                                   
    var maleData = [
        14, 4, 10, 66,
        54, 98, 116, 144,
        210, 358, 484, 562,
        706, 671, 566, 345,
        200, 92, 24, 12,
        0.0
    ];
    
    var femaleData = [
        0, 0, 0, 15, 19,
        29, 30, 25, 27, 34,
        36, 48, 36, 56, 60,
        48, 36, 12, 8, 0,
        0.0
    ];
    
    var maleTotal = maleData.map(function(x) {
        return Math.abs(x);
    }).reduce(function(a, b) {
        return a + b;
    });
    
    var femaleTotal = femaleData.map(function(x) {
        return Math.abs(x);
    }).reduce(function(a, b) {
        return a + b;
    });
    
    var malePercentage = maleData.map(function(x){
        return -(x / maleTotal * 100); 
    });
    
    var femalePercentage = femaleData.map(function(x){
        return x / femaleTotal * 100;
    });
    
    var option = {};
    
    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener('resize', myChart.resize);
    

🐇option

  • 标题、悬浮框、图例

    title: {
         text: '唐朝人口金字塔',  // 设置标题文本为“唐朝人口金字塔”
         left: 'center',         // 标题水平居中
         top: '4%',              // 标题距离顶部的距离为4%
         textStyle: {
             color: '#333',      // 标题字体颜色
             fontSize: 24,       // 标题字体大小
             fontWeight: 'bold', // 标题字体加粗
             fontFamily: 'KaiTi, serif'  // 标题字体样式,楷体或Serif字体
         }
     },
     tooltip: {
         trigger: 'axis',           // 提示框触发类型为坐标轴
         axisPointer: {
             type: 'shadow'         // 坐标轴指示器类型为阴影
         },
         formatter: function (params) {
             return params[0].name + '<br/>' +
                 params[0].seriesName + ': ' + Math.abs(maleData[params[0].dataIndex]) + ' (' + Math.abs(params[0].data).toFixed(2) + '%)' + '<br/>' +
                 params[1].seriesName + ': ' + Math.abs(femaleData[params[0].dataIndex]) + ' (' + Math.abs(params[1].data).toFixed(2) + '%)';
             // 提示框内容格式化函数,params参数包含了鼠标悬停时的数据
         }
     },
     legend: {
         data: ['男性', '女性'],  // 图例数据为“男性”和“女性”
         align: 'left',             // 图例左对齐
         top: '6%',                 // 图例距离顶部的距离为6%
         right: 2                   // 图例距离右边的距离为2
     }
    
  • X轴Y轴

    • 在ECharts中,轴有以下类型:value:数值轴,适用于连续型数据,如年龄、温度等。 category: 类目轴,适用于离散型数据,如商品名称、地区等。time:时间轴,用于显示时间型数据。
    xAxis: {
         type: 'value',
         axisLabel: {
             formatter: function (value) {
    			//自定义X轴标签的格式化函数,返回绝对值百分比
                 return Math.abs(value)+'%';
             }
         }
     },
     yAxis: {
         type: 'category',
         data: [
             '0-4', '5-9', '10-14', '15-19',
             '20-24', '25-29', '30-34', '35-39', '40-44',
             '45-49', '50-54', '55-59', '60-64', '65-69',
             '70-74', '75-79', '80-84', '85-89', '90-94',
             '95-99', '100 + '
         ]
     }
    
  • 数据系列的配置

    • 金字塔的本质就是堆叠柱状图
    • 将男性数据处理为负数,但x轴显示又是正常百分比显示,通过堆叠实现金字塔效果。
    series: [
      {
        name: '男性',  // 数据系列的名称
        type: 'bar',   // 系列类型为条形图
        stack: 'total',  // 数据堆叠,同一个堆叠组的数据会堆叠显示
        itemStyle: {
          // 条形图的颜色渐变设置
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#3d8e86' },
            { offset: 0.5, color: '#5da39d' },
            { offset: 1, color: '#88bfb8' }
          ])
        },
        emphasis: {
          focus: 'series'  // 强调设置
        },
        data: malePercentage  // 男性数据百分比
      },
      {
        name: '女性',  // 数据系列的名称
        type: 'bar',   // 系列类型为条形图
        stack: 'total',  // 数据堆叠
        emphasis: {
          focus: 'series'  // 强调设置
        },
        itemStyle: {
          // 条形图的颜色渐变设置
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#d2a36c' },
            { offset: 0.5, color: '#d5c8a0' },
            { offset: 1, color: '#dfd6b8' }
          ])
        },
        data: femalePercentage  // 女性数据百分比
      }
    ]
    

文章来源:https://blog.csdn.net/m0_63398413/article/details/135718100
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。