安裝插件

npm install element-resize-detector

公共方法，圖標(biāo)自適應(yīng)窗口大小

import elementResizeDetectorMaker from "element-resize-detector"; drawLine(id, option) {const erd = elementResizeDetectorMaker();let myChart = echarts.init(document.getElementById(id));// 繪制圖表配置// 窗口大小自適應(yīng)方案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);},

封裝組件

<template><div id="cf-double-column" :style="{ width: width, height: height }"><!-- <p class="title"><span class="title-left"></span>{{ title }}</p> --><div :id="chartID" :style="{ width: width, height: height }"></div><div class="footer-name"><p>男</p><p>女</p></div></div> </template><script> /*** title{String} 圖表的標(biāo)題* chartID{String} 圖表的唯一標(biāo)識(shí)* width{String} 圖表的寬度* height{String} 圖表的高度* data1{Array} 左邊柱狀圖的數(shù)據(jù)* data2{Array} 右邊柱狀圖的數(shù)據(jù)** 數(shù)據(jù)格式：* data1與data2格式一致，且name應(yīng)該對(duì)應(yīng)，value是值，sum可以用來(lái)算百分比，是同類(lèi)name的值的和* data1： {name: "百歲以上",value: 23.4,sum: 30,},{name: "90-99歲",value: 16,sum: 20,},{name: "80-89歲",value: 15,sum: 20,},{name: "70-79歲",value: 1500,sum: 20,} * * */ import * as echarts from "echarts"; export default {name: "CFDoubleColumn",props: ["chartID", "width", "height", "data1", "data2", "title"],data() {return {myChart: "",};},watch: {data1: {handler(newVal, oldVal) {console.log(newVal);if (this.myChart) {this.myChart.dispose();}this.$nextTick(() => {this.getDoubleCloumn();});},immediate: true,},},mounted() {this.getDoubleCloumn();},methods: {getDoubleCloumn() {var data1 = this.data1;var data2 = this.data2;let getArrByKey = (data, k) => {let key = k || "value";let res = [];if (data) {data.forEach(function (t) {res.push(t[key]);});}return res;};var maxNum = 0; // 橫坐標(biāo)的最大值var maxNumList = [], data1Num = [], data2Num = []for (let i in data1) {data1Num.push(data1[i].value)}for (let i in data2) {data2Num.push(data2[i].value)}var data1Max = Math.max(...data1Num)var data2Max = Math.max(...data2Num)if (data1Max > data2Max) {maxNum = data1Max} else {maxNum = data2Max}for (let i = 0; i < data1.length; i++) {maxNumList.push(maxNum)}console.log(data1Max, data2Max, maxNumList)// [起始最深顏色,結(jié)束的淺顏色]let colorLeft = ["#3DA1FF", "#2749FC"];let colorRight = ["#FB857D", "#F6504A"];let option = {legend: {top: "5%",right: "10%",itemWidth: 50,itemHeight: 22,itemGap: 40,orient: "horizontal",icon: "circle",textStyle: {color: "#ffffff",fontSize: 20,},// data: ['規(guī)模豬場(chǎng)', '中小豬場(chǎng)']},grid: [{show: false,left: "2%",top: "10%",bottom: "8%",width: "40%",},{show: false,left: "51%",top: "10%",bottom: "8%",width: "0%",},{show: false,right: "2%",top: "10%",bottom: "8%",width: "40%",},],tooltip: {show: false,// 設(shè)置 是否百分比f(wàn)ormatter: " : {c}",},xAxis: [{type: "value",inverse: true,axisLine: {show: false,},axisTick: {show: false,},position: "bottom",axisLabel: {show: false,},splitLine: {show: false,},},{gridIndex: 1,show: false,},{gridIndex: 2,show: true,type: "value",inverse: false,axisLine: {show: false,},axisTick: {show: false,},position: "bottom",axisLabel: {show: true,textStyle: {color: "white",},},splitLine: {show: false,},},],yAxis: [{gridIndex: 0,triggerEvent: true,show: true,inverse: true,data: getArrByKey(data1, "name"),axisLine: {show: false,},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},},{gridIndex: 1,type: "category",inverse: true,position: "left",axisLine: {show: false,},axisTick: {show: false,},axisLabel: {show: true,interval: 0,align: "auto",verticalAlign: "middle",textStyle: {color: "#000",fontSize: 16,align: "center",},},data: getArrByKey(data1, "name"),},{gridIndex: 2,triggerEvent: true,show: true,inverse: true,data: getArrByKey(data2, "name"),axisLine: {show: false,},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {show: false,},},],series: [{type: "pictorialBar",xAxisIndex: 0,yAxisIndex: 0,// symbol: 'rect',itemStyle: {normal: {color: "rgba(0,0,0,0)",},},barWidth: 10,// symbolRepeat: true,// symbolSize: 14,data: maxNumList,barGap: "-100%",barCategoryGap: 0,label: {normal: {show: false,// formatter: (series) => {// return lastYearData[timeLineData[0]][series.dataIndex] + "%";// },position: "insideTopLeft",textStyle: {color: "#ffffff",fontSize: 20,},offset: [0, -10],},},z: -100,animationEasing: "elasticOut",animationDelay: function (dataIndex, params) {return params.index * 30;},},{// name: '規(guī)模豬場(chǎng)',type: "bar",gridIndex: 0,// showBackground: true,backgroundStyle: {barBorderRadius: 30,},xAxisIndex: 0,yAxisIndex: 0,data: data1,barWidth: 20,// barCategoryGap: '40%',itemStyle: {normal: {show: true,// 線(xiàn)性漸變，前四個(gè)參數(shù)分別是 x0, y0, x2, y2, 范圍從 0 - 1，分別表示右,下,左,上。例如（0，0，0，1）表示從正上開(kāi)始向下漸變；如果是（1，0，0，0），則是從正右開(kāi)始向左漸變。// 相當(dāng)于在圖形包圍盒中的百分比，如果最后一個(gè)參數(shù)傳 true，則該四個(gè)值是絕對(duì)的像素位置color: new echarts.graphic.LinearGradient(0,0,1,0,[{offset: 0,color: colorLeft[0], //指0%處的顏色},{offset: 1,color: colorLeft[1], //指100%處的顏色},],false),barBorderRadius: [10, 0, 0, 10],},},label: {normal: {show: false,position: "insideRight",textStyle: {color: "#ffffff",fontSize: "12",},},},},{type: "pictorialBar",xAxisIndex: 2,yAxisIndex: 2,symbol: "rect",itemStyle: {normal: {color: "rgba(0,0,0,0)",},},barWidth: 10,symbolRepeat: true,symbolSize: 14,data: maxNumList,barGap: "-100%",barCategoryGap: 0,label: {normal: {show: false,// formatter: (series) => {// return thisYearData[timeLineData[0]][series.dataIndex] + "%";// },position: "insideTopRight",textStyle: {color: "#ffffff",fontSize: 20,},offset: [0, -10],},},z: -100,animationEasing: "elasticOut",animationDelay: function (dataIndex, params) {return params.index * 30;},},{// name: '中小豬場(chǎng)',type: "bar",xAxisIndex: 2,yAxisIndex: 2,gridIndex: 2,showBackground: false,backgroundStyle: {barBorderRadius: 30,},data: data2,barWidth: 20,// barCategoryGap: '40%',itemStyle: {normal: {show: true,// 線(xiàn)性漸變，前四個(gè)參數(shù)分別是 x0, y0, x2, y2, 范圍從 0 - 1，分別表示右,下,左,上。例如（0，0，0，1）表示從正上開(kāi)始向下漸變；如果是（1，0，0，0），則是從正右開(kāi)始向左漸變。// 相當(dāng)于在圖形包圍盒中的百分比，如果最后一個(gè)參數(shù)傳 true，則該四個(gè)值是絕對(duì)的像素位置color: new echarts.graphic.LinearGradient(0,0,1,0,[{offset: 0,color: colorRight[0], //指0%處的顏色},{offset: 1,color: colorRight[1], //指100%處的顏色},],false),barBorderRadius: [0, 10, 10, 0],},},label: {normal: {show: false,position: "insideLeft",textStyle: {color: "#ffffff",fontSize: "12",},},},},],};this.myChart = this.tools.drawLine(this.chartID, option);},}, }; </script><style lang="scss" scoped> #cf-double-column {position: relative;width: 100%;height: 100%;background: #ffffff;border-radius: 0.5rem;.title {position: absolute;top: 0;left: 1rem;font-size: 1.13rem;font-weight: bold;color: #333333;.title-left {display: inline-block;width: 0.25rem;height: 1rem;background: linear-gradient(180deg, #3ea2ff 0%, #2746fc 100%);border-radius: 0.13rem;margin-right: 1rem;}}.footer-name {position: absolute;bottom: 0;color: #333333;font-size: 0.88rem;width: 100%;p {display: inline-block;width: 50%;padding: 0 3rem;}p:nth-of-type(1) {text-align: right;}} } </style>

父組件調(diào)用

<CFDoubleColumnchartID="chart2"width="48.75rem"height="28.63rem":data1="columndata1":data2="columndata2"title="年齡分布" ></CFDoubleColumn>

數(shù)據(jù)格式

name 是坐標(biāo)名稱(chēng)，value是對(duì)應(yīng)的值

columndata1: [{ name: "百歲以上", value: 234 },{ name: "90-99歲", value: 160 },{ name: "80-89歲", value: 1500 },{ name: "70-79歲", value: 1500 },{ name: "60-69歲", value: 960 },{ name: "45-59歲", value: 98 },{ name: "18-44歲", value: 97 },{ name: "6-17歲", value: 95 },{ name: "0-5歲", value: 94 },],columndata2: [{ name: "百歲以上", value: 234 },{ name: "90-99歲", value: 1600 },{ name: "80-89歲", value: 105 },{ name: "70-79歲", value: 105 },{ name: "60-69歲", value: 960 },{ name: "45-59歲", value: 98 },{ name: "18-44歲", value: 97 },{ name: "6-17歲", value: 95 },{ name: "0-5歲", value: 94 },],

總結(jié)

以上是生活随笔為你收集整理的echarts双轴图-年龄分布的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。