组件：

<template><div><div@click="onclick"ref="echartsbar":style="{ width: width, height: height }"></div></div>
</template><script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");export default {name: "comBarxy",props: {bardatanum: {type: Object,default: () => {return {};},},height: {type: String,default: "100%",},width: {type: String,default: "100%",},},watch: {bardatanum: {//深度监听，可监听到对象、数组的变化handler(newV, oldV) {// do something, 可使用this// console.log(newV, oldV)// console.log(newV, 'newV')var that = this;if (newV.datax || newV.datay) {setTimeout(function () {that.barCharts();}, 500);}},deep: true,immediate: true, // 该回调将会在侦听开始之后被立即调用},},data() {return {xData: {},xDataName: {},chickechartsId: 0,echartsId: 0,echartsHierarchy: "",echartsName: "",ai: 0,timer: null,option: {// legend: {},tooltip: {trigger: "axis",axisPointer: {type: "shadow",},},dataZoom: [{type: "inside", //inside sliderrealtime: true,// handleSize: "100%", //滑动条两侧的大小start: 0,end: 100,},],grid: {},xAxis: [{type: "category",data: [],axisPointer: {type: "shadow",},axisLine: {lineStyle: {color: "#d8dadd",},},axisTick: {show: false, //隐藏X轴刻度lineStyle: {color: "#d8dadd",},},axisLabel: {show: true,textStyle: {color: "#737373", //X轴文字颜色},},},],yAxis: [{type: "value",splitLine: {show: true,lineStyle: {color: "#ededed", //网格线的颜色},},axisTick: {show: true,},axisLine: {show: true,lineStyle: {color: "#FFFFFF",},},axisLabel: {show: true,textStyle: {color: "#545151",},},},{type: "value",name: " ",position: "right",splitLine: {show: false,},},],series: [{name: "数量",type: "bar",barWidth: 0,itemStyle: {color: "#5087ec",},data: [],},],},};},methods: {barCharts() {let that = this;// 基于准备好的dom，初始化echarts实例// if (this.myChart != null && this.myChart != '' && this.myChart != undefined) {//     this.myChart.dispose() //销毁//     this.myChart.clear()// }let myChart = echarts.init(this.$refs.echartsbar);// myChart.setOption(this.option)// this.myChart = myChart// let option = this.optionif (this.bardatanum.formatterAddName) {this.bardatanum.formatterAddName =this.bardatanum.formatterAddName;} else {this.bardatanum.formatterAddName = " ";}let paramAdd = this.bardatanum.formatterAddName;if (this.bardatanum.type == 0) {this.option.series[0].data = [];this.option.grid = this.bardatanum.grid;this.option.dataZoom = this.bardatanum.dataZoom;this.option.xAxis[0].data = this.bardatanum.datax;// this.option.xAxis[0].type='category'this.option.series[0].data = this.bardatanum.datay;this.option.series[0].barWidth = this.bardatanum.barWidth;this.option.series[0].itemStyle.color =this.bardatanum.barColor;// this.option.tooltip = {//     formatter: function (params) {//         return (//             params.name +//             paramAdd +//             "<br/>" +//             params.marker +//             params.value//         );//     },// };// console.log("柱状图：", this.option);myChart.setOption(this.option);} else if (this.bardatanum.type == 1) {this.option.series = [];myChart.setOption({grid: this.bardatanum.grid,xAxis: {type: "value",},yAxis: {type: "category",data: this.bardatanum.datax,},series: {data: this.bardatanum.datay,// barWidth:this.bardatanum.barWidth,// color:this.bardatanum.barColor,},// tooltip: {//     formatter: function (params) {//         return (//             params[0].name +//             "<br/>" +//             params[0].marker +//             params[0].value +//             "人"//         );//     },// },});} else if (this.bardatanum.type == 2) {this.option.series = [];myChart.setOption({grid: this.bardatanum.grid,xAxis: {data: this.bardatanum.datax,type: "category",},yAxis: {type: "value",},series: this.bardatanum.datay,toolbox: {show: true,},// legend: {//     data: this.bardatanum.legenddata,// },tooltip: {trigger: "axis",formatter: function (params) {//数据单位格式化var relVal =params[0].name +this.bardatanum.formatterAddName; //x轴名称relVal += "<div style='width:140px'>";for (var i = 0, l = params.length; i < l; i++) {if (params[i].value) {// relVal +=//     "<span  style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +//     params[i].color +//     ";'>" +//     '<span  style="display:block;padding-left:15px;margin-top:-4px">' +//     params[i].seriesName +//     " : " +//     params[i].value +//     "个" +//     "</span>" +//     "</span>" +//     "<br>";relVal +="<span  style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +params[i].color +";'>" +'<span  style="display:block;padding-left:15px;margin-top:-4px">' +params[i].seriesName +" : " +'<span style="font-weight:700;">' +params[i].value +"</span>" +"  个" +"</span>" +"</span>" +"<br>";}}relVal += "</div>";return relVal;},},});} else {let dataYseries = [];console.log(this.bardatanum);for (let i = 0; i < this.bardatanum.datay.length; i++) {dataYseries.push({name: this.bardatanum.datay[i].name,type: this.bardatanum.typeval,data: this.bardatanum.datay[i].data,barWidth: this.bardatanum.barWidth,itemStyle: {color: this.bardatanum.barColor[i],},});}if (this.bardatanum.barlinetype) {for (let i = 0; i < this.bardatanum.datayline.length; i++) {dataYseries.push({name: this.bardatanum.datayline[i].name,type: this.bardatanum.typeline,yAxisIndex: 1,data: this.bardatanum.datayline[i].data,barWidth: this.bardatanum.barWidth,itemStyle: {color: this.bardatanum.barColorLine[i],},});}}let opyAxisarry = [{type: "value",splitLine: {show: true,lineStyle: {color: "#ededed", //网格线的颜色},},axisTick: {show: true,},axisLine: {show: true,lineStyle: {color: "#FFFFFF",},},axisLabel: {show: true,textStyle: {color: "#545151",},},},{type: "value",name: " ",position: "right",splitLine: {show: false,},},];this.option.legend = { data: this.bardatanum.legenddata };this.option.grid = this.bardatanum.grid;this.option.dataZoom = this.bardatanum.dataZoom;this.option.xAxis[0].data = this.bardatanum.datax;// this.option.xAxis[0].type='category'this.option.series = dataYseries;this.option.yAxis = opyAxisarry;console.log("多个柱状图：", this.option);myChart.setOption(this.option);}// myChart.clear()//  myChart.setOption(this.option,true)// 阴影部分点击事件（有阴影点击可以去掉柱子点击）myChart.getZr().off("click");myChart.getZr().on("click", function (params) {var pointInPixel = [params.offsetX, params.offsetY];// 使用containPixel API判断点击位置是否在显示图形区域，下面的例子过滤了绘制图形的网格外的点击事件，好比X、Y轴lable、空白位置等的点击事件。if (myChart.containPixel("grid", pointInPixel)) {var xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX,params.offsetY,])[0];let op = myChart.getOption();// 获取当前点击位置要的数据this.xData = op.series[0].data[xIndex];this.xDataName = op.xAxis[0].data[xIndex];}this.echartsId = this.xData.id;this.echartsName = this.xDataName;this.echartsHierarchy = this.xData.level;this.chickechartsId = {echartsId: this.echartsId,echartsName: this.echartsName,echartsHierarchy: this.echartsHierarchy,};that.$emit("onclick", this.chickechartsId);});/*  //柱状图点击事件 此点击事件有问题 会多次触发点击myChart.on("click", function (params) {this.echartsId = params.data.id;this.echartsName = params.name;this.echartsHierarchy = params.data.level;this.chickechartsId = {echartsId: this.echartsId,echartsName: this.echartsName,echartsHierarchy: this.echartsHierarchy,}that.$emit("onclick", this.chickechartsId);});*//*     //   建议使用这种方式myChart.off("click").on("click", function (params) {this.echartsId = params.data.id;this.echartsName = params.name;this.echartsHierarchy = params.data.level;this.chickechartsId = {echartsId: this.echartsId,echartsName: this.echartsName,echartsHierarchy: this.echartsHierarchy,};_this.$emit("onclick", this.chickechartsId);}); */// this.chickechartsId = myChart;if (this.bardatanum.datax.length > 0) {this.autoFnpie(this.bardatanum.datax.length, myChart);}// this.autoFnpie(this.bardatanum.datax.length, myChart)},onclick() {// console.log("2子组件id：",this.params)// console.log("获取点击id：",this.chickechartsId)// this.$emit("onclick", this.chickechartsId);// this.echartsId = undefined// this.echartsName = undefined// this.echartsHierarchy = undefined},// 图形自定义展示autoFnpie(leng, myChart) {var that = this;//轮播效果var currentIndex = -1;var dataLen = leng;that.timer = setInterval(() => {//  计时器增加that.ai++;if (that.ai == dataLen) {that.ai = 1;}// 取消之前高亮的图形myChart.dispatchAction({type: "downplay",seriesIndex: 0,dataIndex: currentIndex,});currentIndex = (currentIndex + 1) % dataLen;// 高亮当前图形myChart.dispatchAction({type: "highlight",seriesIndex: 0,dataIndex: currentIndex,});// 显示 tooltipmyChart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: currentIndex,});}, 5000);},},
};
</script><style>
</style>

页面引用：

<template><div class="all-box"><div><!-- 上面的echarts --><div></div><!-- 中间的echarts --><div><div class="topfirst-echarts-box"><divclass="jzgzryxbtj":style="{ width: '32%', height: zztechatsheight }"><comBarxy@onclick="onclickResidenceStaffAge":bardatanum="ResidenceStaffAge":style="{ width: '100%', height: '89%' }"></comBarxy></div><divclass="gxqjzrytj":style="{ width: '68%', height: zztechatsheight }"><comBarxy:bardatanum="JurisdictionsHost":style="{ width: '100%', height: '89%' }"></comBarxy></div></div></div><!-- 底下的echarts --><div><div class="topfirst-echarts-box"><divclass="jzgzrynldtj":style="{ width: '100%', height: zztechatsheight }"><comBarxy@onclick="onclickresidentCommute":bardatanum="residentCommute":style="{ width: '100%', height: '89%' }"></comBarxy></div></div></div></div></div>
</template><script>
import comBarxy from "../../components/commEcharts/comBarxy.vue";
export default {name: "gyyqfy",components: { comBarxy },data() {return {// 定义1为本页面，2为更多数据跳转，3为居民通勤地统计跳转. 4为防疫工作台MoreDataworkbench: 1,nowDate: "", // 当前日期streetList: [], //街道数据villageList: [], //村、居委villageVal: undefined,paramsSelect: {XJZDSQJCWH: "",XJZDXZJD: "",},url: {postStreetVillageUrl: "/dsc/metadata/data/streetVillage",},NumdataTop: [{text: "现有XXXXXXXXXX人员",num: "20",color: "linear-gradient(106deg, #F92E2E, #FF5D3D)",},{text: "现有XXXXXXXXXX人员",num: "10000",color: "linear-gradient(106deg, #FF6D29, #FECC44)",},{text: "现有XXXXXXXXXX人员总数",num: "160",color: "linear-gradient(106deg, #148BFB, #1DC7FF)",},{text: "现有次XXXXXXXXXX人员总数",num: "220",color: "linear-gradient(106deg, #1ABADC, #3ADFF2)",},],zztechatsheight: "400px",// 居住/工作人员年龄ResidenceStaffAge: {formatterAddName: " 岁",datax: [],datay: [],type: 0,barWidth: 26,barColor: "#35C493",grid: {right: "50px",// left: '15%',top: "10%",bottom: "15%",},},// 各辖区居住人员统计JurisdictionsHost: {formatterAddName: "",datax: [],datay: [],type: 0,barWidth: 26,barColor: "#6395F9",grid: {right: "3%",// left: '15%',top: "10%",bottom: "15%",},},// 各辖区人员数据统计residentCommute: {formatterAddName: "",legenddata: ["检测XXXXXXXXXX","检测XXXXXXXXXX关联","检测XXXXXXXXXX次关联",],datax: [],datay: [],datayline: [],type: 3,barlinetype: true,typeline: "line",typeval: "bar",barWidth: 15,barColor: ["#F86565","#FCB04E","#74CBED","#6D9DF6","#40BDE6","#F09615","#0079E6",],barColorLine: ["#25B0E6"],grid: {left: "5%",right: "5%",top: "10%",bottom: "25%",},dataZoom: [{type: "slider", //inside sliderrealtime: true,// handleSize: "100%", //滑动条两侧的大小start: 0,end: 50,bottom: 30, //居下的距离},],},chickEcharts: {id: 0,name: "",},};},mounted() {this.ResidencesAge();this.getJurisdictionsHost();this.getResidentCommute();},created() {},methods: {//居住/工作人员年龄ResidencesAge() {// 绘制图表let xgydata = ["0-10","11-20","21-30","31-40","41-50","51-60","61-70","71-80","80以上",];let datadata = [{ value: 58026, id: 1 },{ value: 48124, id: 2 },{ value: 57987, id: 3 },{ value: 120296, id: 4 },{ value: 86562, id: 5 },{ value: 85795, id: 6 },{ value: 52397, id: 7 },{ value: 23385, id: 8 },{ value: 4842, id: 9 },];this.ResidenceStaffAge.datax = xgydata;this.ResidenceStaffAge.datay = datadata;},onclickResidenceStaffAge(val) {console.log("工作人员年龄id:", val.echartsId);},//各辖区居住人员统计getJurisdictionsHost() {// 绘制图表let xgydata = ["银河北路街道","爱民东道街道","解放道街道","新开路街道","新源道街道","南尖塔镇","万庄镇","九州镇","白家务","北旺镇","新世纪步行街管委会","经开区",];let datadata = [27563, 66826, 51050, 75535, 97750, 73141, 25680, 1726, 41625,2004, 50059, 41625,];this.JurisdictionsHost.datax = xgydata;this.JurisdictionsHost.datay = datadata;},// 各辖区人员数据统计getResidentCommute() {// 绘制图表let xgydata = ["廊坊市安次区","廊坊市经开区","北京市大兴区","天津市武清区","廊坊市永清县","北京市朝阳区","北京市通州区","北京市海淀区","北京市丰台区","廊坊市固安区","新世纪步行街管委会","经开区",];// let datadata = [27563, 66826, 51050, 75535, 97750, 73141, 25680, 1726, 41625, 2004, 50059, 41625]let datadata = [{name: "检测XXXXXXXXXX",data: [563, 826, 50, 535, 750, 141, 680, 726, 625, 204, 559,625,],},{name: "检测XXXXXXXXXX关联",data: [763, 626, 510, 755, 807, 731, 280, 126, 425, 204, 505,465,],},//  {//   name:"XXXXXXXXXX",//   data:[563, 636, 850, 835, 977, 931, 380, 106, 525, 284, 605, 365]// },// {//     name: '检测XXXXXXXXXX次关联',//     data: [783, 666, 610, 855, 577, 331, 580, 236, 425, 504, 235, 235],// },];let datadataline = [{name: "检测XXXXXXXXXX次关联",data: [1783, 6626, 6110, 1855, 577, 331, 580, 236, 425, 504,235, 235,],},];this.residentCommute.datax = xgydata;this.residentCommute.datay = datadata;this.residentCommute.datayline = datadataline;},onclickresidentCommute(val) {this.MoreDataworkbench = 3;this.chickEcharts.id = val.echartsId;this.chickEcharts.name = val.echartsName;console.log("各辖区人员数据统计:id", val.echartsName);},},
};
</script><style lang="scss" scoped>
.all-box {background-color: #f0f2f5;
}
.top-fff-box {background-color: #fff;height: 56px;line-height: 56px;margin-bottom: 16px;display: flex;justify-content: space-between;.top-select {margin-left: 13px;}
}
.topdivx {margin-bottom: 16px;display: flex;justify-content: space-between;// background-color: #fff;// padding: 20px 26px 26px;.divn {// width: 409px;// width: 32.7%;width: 24.4%;// height: 117px;height: 125px;// background-color: rgb(0, 176, 255);// border-radius: 5px;font-size: 16px;line-height: 47px;display: flex;border-radius: 5px;// flex-wrap: wrap;// flex-direction: column;// margin-left: 13px;.topspanx {font-weight: 400;font-size: 18px;color: rgba(247, 247, 247, 1);line-height: 30px;margin-left: 20px;margin-top: 20px;// margin-bottom: 21px;margin-bottom: 10px;}.text-num {display: flex;flex-wrap: wrap;flex-direction: column;width: 85%;.topspancent {font-family: DIN;font-weight: 500;font-size: 29px;color: rgba(247, 247, 247, 1);line-height: 30px;margin-left: 20px;// text-align: center;}}.top-img {margin-top: 27px;margin-right: 24px;}}
}.topfirst-echarts-box {width: 100%;display: flex;margin-bottom: 10px;.slrytj {background-color: #fff;// border-radius: 5px;margin-right: 10px;}.two-right-echarts {display: flex;// margin-right: 20px;}.two-right-echarts {display: flex;// margin-right: 20px;}.jzgzrynldtj {background-color: #fff;// margin: 0 10px;}.jmgzryhsjctj {background-color: #fff;margin-left: 10px;}.jzgzryxbtj {background-color: #fff;margin-right: 10px;}.gxqjzrytj {// margin-left: 10px;background-color: #fff;}
}
</style>

echarts 柱状图点击事件相关推荐

关于Echarts柱状图点击事件的实现方法charsjs柱状图点击事件
关于Echarts柱状图点击事件的实现方法 charsjs柱状图点击事件 ajax请求数据 var chartDom = document.getElementById('riskmain'); va ...
vue中echarts的点击事件,给当前点击的柱状图修改背景色
最近项目中需要使用到echarts,需要实现点击柱状图时,修改当前点击的柱状图背景色,且没有阴影背景的效果 (如下图) 这样的话,需要给eharts添加click点击事件,直接贴代码: html: & ...
ECharts的点击事件
首先这个地方要添加其次 let overallRiskChart5 = echarts.init(document.getElementById('waste_kupono_table')); ov ...
【Echarts图例点击事件】自定义Echarts图例legend点击事件（已解决）
目录先睹为快(效果) 1.实现Echarts多条曲线 2.点击echarts触发接口请求 2.1 先默认隐藏部分数据 2.2 自定义legend图例点击事件 3.源码下载地址(解压即用) **[写在 ...
python matplotlib 柱状图点击事件_Python：matplotlib分组Bar柱状图
Python:matplotlib分组Bar柱状图 import numpy as np import matplotlib.pyplot as plt def get_data(size): bor ...
echats 柱状图的点击事件及高亮
点击柱状图触发事件及双击柱状图高亮 <!DOCTYPE html> <html> <head><meta charset="utf-8"& ...
ECharts 全局触发click点击事件（Label及柱状）
// 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')); 前言需 ...
echarts 柱形图、折线图点击事件
// echarts 万能点击事件 this.myChart.getZr().on('click', params => {let pointInPixel = [params.offsetX, ...
v-chart柱状图点击改变颜色
ve-histogram点击时修改颜色完整代码展示效果完整代码 <template><ve-histogram ref="chart_histogram"h ...

echarts 柱状图点击事件

组件：

页面引用：

echarts 柱状图点击事件相关推荐

最新文章

热门文章