可视化 | 【echarts】金字塔图-编程知识

可视化 | 【echarts】金字塔图

文章目录

📚js
- 🐇总体框架
- 🐇option

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

📚js

🐇总体框架

使用echarts.init方法初始化了一个 ECharts 实例，指定了一个 div 元素作为图表的容器。
数据预处理，将数值转换为百分比。
定义图表的配置项option，其中包括了图表的标题、提示框、x 轴、y 轴、数据系列以及数据缩放功能等等。
通过myChart.setOption将配置项应用到echarts实例。

绑定事件处理函数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  // 女性数据百分比}
]