echats 柱状图的点击事件及高亮

点击柱状图触发事件及双击柱状图高亮

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="text"></div><div id="main" style="width: 1000px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));var checkName = ''var obj = {"xAxis":["潍坊","临沂","泰安","运河","青岛","东营","未管所","济宁","德州","潍北","鲁北","济南","北墅","滕州","鲁西","鲁南","湖西","微湖","淄博","鲁中","渝北区戒毒所","齐州","专属","威海","第二女子","聊城","济南第二","菏泽","省","鲁宁","烟台","新康","历山","枣庄","任城"],"datas":[86,50,25,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]}// 指定图表的配置项和数据var option = {grid: {x: 40,y: 20,x2: 30,y2: 20,borderWidth: 0,bottom: "25%"},xAxis: {type: "category",data: obj.xAxis,axisLabel: {textStyle: {color: "#515A6E"},margin: 21,interval: 0,fontSize: 12,rotate: 0,formatter: function (params) {var newParamsName = "";var paramsNameNumber = params.length;var provideNumber = 6;var rowNumber = Math.ceil(paramsNameNumber / provideNumber);if (paramsNameNumber > provideNumber) {for (var p = 0; p < rowNumber; p++) {var tempStr = "";var start = p * provideNumber;var end = start + provideNumber;if (p == rowNumber - 1) {tempStr = params.substring(start, paramsNameNumber);} else {tempStr = params.substring(start, end) + "\n";}newParamsName += tempStr;}} else {newParamsName = params;}return newParamsName;},},axisLine: {show: true,lineStyle: {color: "#E0E7EF",width: 0,type: "solid",},},axisTick: {show: false,},},yAxis: {type: "value",scale: true,max: 100,min: 0,splitNumber:5,boundaryGap: [0.2, 0.2],axisLabel: {textStyle: {color: "#999",},show: true,  interval: 'auto',  formatter: "{value}%",},axisLine: {show: false,},axisTick: {show: false,},splitLine: {show: true,lineStyle: {color: 'rgb(240, 240, 240)',width: 1,type: 'solid'}}},dataZoom: [// {// type: 'slider',// show: true, //flase直接隐藏图形// xAxisIndex: [0],// left: '0%', //滚动条靠左侧的百分比// bottom: -5,// height: 15,// start: 0,//滚动条的起始位置// end: 40, //滚动条的截止位置（按比例分割你的柱状图x轴长度）// backgroundColor:"rgba(255,255,255,0)",// // fillerColor:"rgba(255,255,255,0.4)",// textStyle:false// }{type:'inside',filterMode: 'empty',maxValueSpan: 13,minValueSpan:10,start:0,end:40}],series: [{type: "bar",// barCategoryGap:'40%',barWidth: 18,itemStyle: {normal: {// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [//     { offset: 0, color: "#EAB2F6" },//     { offset: 0.5, color: "#8D8BFF" },// ]),color: function(params) {let color1 = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: "#EAB2F6" },{ offset: 0.5, color: "#8D8BFF" },])let color2 = '#000'if (params.name === checkName) {return color1} else {return color2}},barBorderRadius: [30, 30, 0, 0],label:{show:true,position:'top',textStyle:{color:'#999',fontSize:10}}},},label:{normal:{formatter:"{c}%"}},data: obj.datas,showBackground: true,backgroundStyle: {color: "#f9fafc",barBorderRadius: [30, 30, 0, 0],},},]}/*主要用在有高亮的数据部分可以点击  其他数据为0的点击不了*/ var drawChatOne = function() {myChart.clear()myChart.setOption(option);// 防止点击时触发多次事件myChart.off('click')// 添加柱状图点击事件myChart.on('click',function(params){console.log(params)//点击的柱子的名称checkName = params.name;//柱形图重构myChart.setOption(option);document.getElementById('text').innerHTML = checkName})}drawChatOne()/*主要用在所以显示的数据结构包括为0的都可以点击*/var drawChatTwo = function() {myChart.clear()myChart.setOption(option);// 防止点击时触发多次事件myChart.getZr().off('click')// 添加柱状图点击事件myChart.getZr().on('click',function(params){console.log(params)let pointInPixel = [params.offsetX, params.offsetY]if (myChart.containPixel('grid', pointInPixel)) {// 拿到点击当前图表对应的下标let xIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]//点击的柱子的名称checkName = obj.xAxis[xIndex]}//柱形图重构myChart.setOption(option);document.getElementById('text').innerHTML = checkName})}// drawChatTwo()</script>
</body>
</html>

echats 柱状图的点击事件及高亮相关推荐

Echarts柱状图实现点击事件
本次实现的是点击黄绿色的柱显示对应的人员弹窗,通过打印params值确定了每个柱子的区分字段如下: var _this = this;myChart.on("click", fun ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
Echarts柱状图的点击事件
最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大.在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所 ...
Echarts柱状图柱子点击事件
文章目录效果展示需求实现效果展示需求点击柱子显示当天的详细数据实现这里只需要拿到被点击柱子对应的X轴时间坐标,可以直接监听click事件在DOM加载完为chart注册点击事件拿到被 ...
echarts中formatter修改鼠标悬浮事件信息操作、echarts地图块、散点区分触发点击事件只触发散点问题详解
这里写目录标题 1.实例 2.案例详解 1.实例这次我拿echarts中地图组合散点图的实例 !!!实现效果:滑到散点显示不同于地图块的信息及 formatter 提示窗自定义!!! 这个显示项 ...
echarts 地图 scatter点击事件_React实现高亮可点击地图
目前越来越多的项目中开始使用地图,而对地图的需求也不仅仅是简单的纯展示,更多了各种各样的交互功能.今天这篇文章主要介绍的就react中通过Echarts实现一个高亮可点击的省市地图.接下来先看看效果图 ...
echarts 柱状图点击事件
目录组件: 页面引用: 组件: <template><div><div@click="onclick"ref="echartsbar&qu ...
android字符串点击事件,Android匹配字符串高亮并设置点击事件
public class TextRichUtil { public interface RichClickLisentner { void onClick(); } /** * 获取高亮字符串 * ...
android 微博字体高亮,安卓开发札记——高仿新浪微博文字处理（实现关键字高亮，自定义表情替换并加入点击事件实现）...
安卓开发笔记--高仿新浪微博文字处理(实现关键字高亮,自定义表情替换并加入点击事件实现) 先让大家看下效果图,这个是我自己在闲暇时间仿写的新浪微博客户端: 今天来讲讲如何实现上图的效果,这里需要用到S ...

echats 柱状图的点击事件及高亮

echats 柱状图的点击事件及高亮相关推荐

最新文章

热门文章