可视化 | 【echarts】金字塔图

• html和css同可视化 | 【echarts】渐变条形＋折线复合图，主要是js的差别。

📚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  // 女性数据百分比
    }
  ]
  

• 完整代码包