echarts双轴图-年龄分布

npm install element-resize-detector公共⽅法，图标⾃适应窗⼝⼤⼩

import elementResizeDetectorMaker from \"element-resize-detector\";drawLine(id, option) {

const erd = elementResizeDetectorMaker();

let myChart = echarts.init(document.getElementById(id)); // 绘制图表配置 // 窗⼝⼤⼩⾃适应⽅案 myChart.setOption(option); setTimeout(function () {

// window.addEventListener('resize', () => myChart.resize(), false); // window.onresize = function () { // myChart.resize(); // };

erd.listenTo(document.getElementById(id), element => { // var width = element.offsetWidth; // var height = element.offsetHeight; // console.log(\"Size: \" + width + \"x\" + height); myChart.resize() }); }, 200); },

封装组件

⽗组件调⽤

数据格式

name 是坐标名称，value是对应的值

columndata1: [

{ name: \"百岁以上\ { name: \"90-99岁\ { name: \"80-89岁\ { name: \"70-79岁\ { name: \"60-69岁\ { name: \"45-59岁\ { name: \"18-44岁\ { name: \"6-17岁\ { name: \"0-5岁\ ],

columndata2: [

{ name: \"百岁以上\ { name: \"90-99岁\ { name: \"80-89岁\ { name: \"70-79岁\ { name: \"60-69岁\ { name: \"45-59岁\ { name: \"18-44岁\ { name: \"6-17岁\ { name: \"0-5岁\ ],