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

最新推荐文章于 2024-06-16 11:18:18 发布
最新推荐文章于 2024-06-16 11:18:18 发布
阅读量4.1k 收藏 9
点赞数
分类专栏： echats 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37041819/article/details/112889294
版权

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

在这里插入图片描述

<!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>
姜天生i
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
echarts柱形图自动高亮选中
愚人码头的博客
05-16 922
var option = { backgroundColor:'#323a5e', tooltip: { trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标...
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
vue+echarts tree点击节点高亮和节点不缩放让容器放大
weixin_42979818的博客
11-20 1986
//使用之前先在main.js中引入echats //然后 Vue.use(echats) var mycharts = this.echarts,init(document.getElementById("myChart")) myChats.setOption({ echats官网找实例 //设置高亮色和平常色 itemStyle：{ normal:{ color:'#b22125' ...
echarts中柱状图添加点击事件并且选中点击的高亮
weixin_43703816的博客
06-20 8673
echarts中柱状图添加点击事件并且选中点击的高亮
echarts 点击(柱图、折线图)图表外的按钮，高亮图表中的某些柱子何点位
最新发布
cdd9527的博客
06-16 356
echarts 点击(柱图、折线图)图表外的按钮，高亮图表中的某些柱子何点位
echarts柱状图的高亮显示方案
热门推荐
专注echarts开发20年
03-05 2万+
var option = { tooltip : { trigger : 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, yAxis : { type : 'value' },...
echarts柱状图实现部分高亮效果
Run_youngman的博客
09-13 3211
有时候，我们可能会有某种特殊的需求，即在某种判断条件下，只给某几个柱状图进行高亮显示，本文介绍实现方式。
echarts 柱状图选中颜色变换
qq_44167278的博客
05-10 8214
echarts 柱状图选中单个柱形时其颜色变化 在我们使用echarts柱形图时可能需要用到点击柱形使当前点击柱形高亮显示。 1.先在data中保存柱形图被点击柱的 index 。 data () { return { echartsIndex: 0 }; }, 2.基准线是随着点击柱的变化而移动的，因此我们只需要获取到基准线的位置，这个位置也就是被点击的柱形的位置，将基准线的 index 赋值给 echartsIndex。 tooltip: { formatter: (value, in
vue结合Echarts实现点击高亮效果的示例
08-27
Echarts提供了多种图表类型，如折线图、柱状图、散点图等。每种图表类型都有其自己的配置项，可以根据需要进行配置。Echarts还提供了丰富的交互功能，如点击、hover、drag等，可以根据需要进行自定义。 2. 点击高亮...
echarts漂亮的柱状图按月统计
07-20
`标签`中的“js统计图”指的是这个项目使用JavaScript技术进行数据可视化，“按月统计”表明数据是按照月份分组的，“echarts柱状图”则强调了使用的图表类型。这个项目展示了如何利用ECharts这个强大的工具，结合...
jQuery echarts柱状图数据统计图表插件
06-10
总结，jQuery Echarts柱状图数据统计图表插件为开发者提供了一个高效、灵活的工具，以实现数据可视化，尤其适合产品销售数据分析场景。通过学习和熟练掌握这款插件，你可以轻松地为网站或应用添加交互性强、视觉效果...
echart柱图点击高亮问题
BookstoreSpirit的博客
08-04 4054
echarts柱图点击高亮问题 在建立echarts柱图时，都会有一个默认的点击高亮效果，有时候想取消高亮，有如下方法： slient(默认为’false’) series: {slient: true} 该属性为柱图是否不响应鼠标的点击，设为true则为不响应，但是后续的其他点击效果也会不生效 emphasis serise: { itemStyle: { color: "",//柱条颜色，设置为柱图颜色则取消高亮 borderColor: ''//柱条边框颜色 ... //更
echarts图表默认选中高亮
m0_70547044的博客
12-27 1414
【代码】echarts图表默认选中高亮。
echarts树图设置高亮
笑到世界都狼狈的博客
05-15 2465
首先说明一下，我最初用的echarts.js应该至少是两年前下载的吧，所以导致高亮写了半天一点效果都没有，最后实在找不到原因，就换了demo中的js。高亮的效果一下子就实现了 实现效果如下： 实现代码： emphasis: { // 高亮 focus: 'descendant' }, 代码结构： 关于高亮的属性，在官方api中有看到以下属性，要么高亮本身，要么高亮祖先，要么高亮子孙，没看到一个可以同时高亮祖先和子孙的方法。 文档地址 完整代码： <!DOC...
echarts点击与高亮事件经验小结
m0_66697014的博客
02-19 5001
饼图的点击与高亮事件
echarts柱状图自动高亮展示
WMW_wmw的博客
07-26 2012
echarts柱状图自动高亮展示。
ECharts实现同轴双向柱状图（点击bar高亮）
xiaomou_的博客
08-20 2075
echarts实现点击高亮的同轴双向柱状图
Vue2使用echarts树图（tree）
Mr Dear的博客
08-30 5636
Vue2使用echarts树图
echarts柱状图点击高亮
09-02
在该示例中，你可以学习如何通过监听echarts的点击事件，获取被点击的柱状图，并改变其样式来实现高亮效果。具体实现方法可以参考示例代码中的操作。通过这个示例，你可以更好地理解如何在echarts中实现柱状图的点击...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

姜天生i

如果本文对你有所帮助点赞就好~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值