echarts 折线图点击高亮

最新推荐文章于 2024-06-28 10:15:37 发布
最新推荐文章于 2024-06-28 10:15:37 发布
阅读量3.5k 收藏 4
点赞数
分类专栏： eCharts Javascript 文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17211063/article/details/123252458
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
        .rank-num{
            font-size: 24px;
        }
    </style>
</head>
<body>
<div class="rank-num"></div>
<div id="main" style="height: 400px;width: 100%"></div>

</body>
<script src="jquery-2.1.1.min.js"></script>
<script src="echarts.min.js"></script>
<script>
    var myChart = echarts.init(document.getElementById('main'));
    var scoreList = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120];
    option = {
        grid: {
            x: '15%',
            y: '15%'
        },
        tooltip: { //鼠标悬浮弹窗提示
            trigger: 'none',
            show: true,
            showDelay: 0,
            hideDelay: 0,
            transitionDuration: 0,
            backgroundColor: 'rgba(255,255,255,0)',
            borderColor: 'rgba(255,255,255,0)',
            //       borderRadius: 4,
            //       borderWidth: 0,
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'line', // 默认为直线，可选为：'line' | 'shadow'
                lineStyle: { // 直线指示器样式设置
                    color: 'rgba(255,255,255,0)',

                },

            },
            textStyle: {
                color: 'rgba(255,151,0,1)',
                fontSize: 14
            },
            //adding: 10, // [5, 10, 15, 20]
            formatter: function(params, index, callback) {
                console.log(params);
                var res;
                res = '第'+params[0].data+'名'
                var rankNum = (params[0].data);
                if(rankNum) {
                    $('.rank-num').html('互动指数' + '&nbsp' + scoreList[params[0].dataIndex]);
                }
                return;
            },

        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#BBBBBD',
                    fontSize: '12'
                }
            },
            axisTick: {
                show: false
            },
            splitLine: { // grid 分割线设置
                show: true,
                lineStyle: {
                    width: 1,
                    type: 'dashed',
                    color: ['rgba(238,238,238,1)']
                }
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value',
            inverse: true,
            scale: false,
            min: 1,
            //max:15,
            //interval: 2,
            axisLine: {
                show: false
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#BBBBBD',
                    fontSize: '14'
                }
            },
            axisTick: {
                show: false
            },
            splitLine: { // grid 分割线设置
                show: true,
                lineStyle: {
                    width: 1,
                    type: 'dashed',
                    color: ['rgba(238,238,238,1)']
                }
            },

            boundaryGap: [0, '100%']
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            showSymbol: true,
            smooth: true,
            symbol:'circle', //设定为实心点
            //symbol:'image://./images/dot@2x.png', //设定为实心点
            symbolSize: [10, 10], //设定实心点的大小
            itemStyle: {
                normal: {
                    color: 'rgba(0,170,255,1)'
                },
                emphasis: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255,151,0,1)'
                    },
                        {
                            offset: 0.5,
                            color: 'rgba(255,151,0,0.8)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(255,151,0,0.5)'
                        }
                    ]),

                    label: {
                        show: true,
                        formatter: [
                            ' {ranStyle|}第{c}名'
                        ].join("\n"),
                        rich: {
                            ranStyle: {
                                color: 'rgba(255,151,0,1)',
                                align: 'center',
                                height: 20
                            },

                        },
                        textStyle: {
                            color: 'rgba(255,151,0,1)'
                        }
                    }
                }
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: '#bfeeff'
                }, {
                    offset: 1,
                    color: '#fff'
                }]),
                origin: 'end'
            },
        }]
    };
    var currentIndex = -1;
    function init() {
        myChart.setOption(option);
        console.log("finished");
        if (currentIndex >= 0) {
            return;
        }
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 6
        });

        currentIndex = 6;
    }
    init();
    myChart.on('mouseover', function(params) {
        if (params.dataIndex == currentIndex) {
            return;
        }

        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: params.seriesIndex,
            dataIndex: params.dataIndex
        });
    });

    myChart.getZr().on('click', function(params) {

        //点击的时候切换高亮的数据
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: params.seriesIndex
        });

        let pointInPixel = [params.offsetX, params.offsetY];
        if(myChart.containPixel('grid', pointInPixel)) {
            let xIndex = myChart.convertFromPixel({
                seriesIndex: 0
            }, [params.offsetX, params.offsetY])[0];
                myChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: params.seriesIndex,
                    dataIndex: xIndex
                });
            currentIndex = xIndex;
        }
    });
    //用于使chart自适应高度和宽度
    window.onresize = function() {
        myChart.resize();
    };
</script>

</html>

前端-文龙刚
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+Echarts 折线图markPoint凸显某条数据的实现过程
weixin_45542021的博客
06-29 1354
在vue项目中使用echarts完成一个简单的折线图，使用markPoint凸显当前选中的数据，并自定义部分样式。
关于移动端如何实现echarts折线图默认展示高亮数据点的解决办法
09-28 3481
在开发一个图表折线图的过程中,产品需求是周榜必须要默认高亮展示当天的排名和互动指数,查找很多资料包括查看echarts API,甚至请教了echarts核心开发者之一的一个人，她给我的回复是说维护一个click点击状态；也还是一直没体会她所说的,最后一个朋友的思路给我启发了,不过他的方法只能...
Echarts折线图点击某一区域后点高亮（多条折线）
相濡以沫不如相忘于江湖.
12-23 5020
因为我们的数据量可能也不是很大，所以我每次点击拿到那一个数据点的下标之后会把对应的数据点配置改成高亮，然后重新setOption，就实现了高亮，这样可以实现多个点的高亮，且业务需求。产品想要在折线图上点击某个折线，或者是点击某一区域触发事件，然后点击的地方或者区域对应的一个或者多个数据点就要变高亮，不止是在折线图的拐点，那处理方法我想了两种，如下。用官方的放大实现高亮好像不能自定义颜色及高亮的点个数，后来我就自己想了这样一种实现方式，
echart柱状图高亮示例，echart触发事件使用记录，dispatchAction代码触发事件
最新发布
Kissyulu的专栏
06-28 1253
这篇文章主要记录echart柱状图高亮效果的option配置结果，包括代码触发echarts事件高亮，监听echart事件处理对象等等， 其实echarts还是功能齐全的，文档好好看大部分需求都能满足
Echarts实现高亮某一个点
xxuxioxx的博客
04-01 1632
Echarts通过样式实现高亮某一个点
echarts 点击(柱图、折线图)图表外的按钮，高亮图表中的某些柱子何点位
cdd9527的博客
06-16 461
echarts 点击(柱图、折线图)图表外的按钮，高亮图表中的某些柱子何点位
使用echarts做一个简单的折线图[新手必看]鼠标移到那个点的时候有高亮 放大
熟悉 vue2 vue3 jquery js echarts
12-09 2317
先看一下整体效果哦 话不多说 上代码 html <div id="memory-left"></div> css #memory-left { width: 74%; border: 1px solid #ccc; border-radius: 8px; box-shadow: 0 2px 3px -1px #ccc, //底部阴影 2px 0 3px -1px #ccc; //右边阴影; } methods方法中
Echarts网格颜色渐变 + 折线图折线发光高亮效果
热门推荐
Ghjkku的博客
06-15 13万+
series:里面定义折线发光高亮的效果 网格颜色的渐变 附上封住代码
vue结合Echarts实现点击高亮效果的示例
08-27
Echarts提供了多种图表类型，如折线图、柱状图、散点图等。每种图表类型都有其自己的配置项，可以根据需要进行配置。Echarts还提供了丰富的交互功能，如点击、hover、drag等，可以根据需要进行自定义。 2. 点击高亮...
Echarts折线图拐点突出显示效果
weixin_42555053的博客
03-18 2828
代码如下： //初始化数据录入情况echarts实例 var echarts_dataEntry = echarts.init(document.getElementById('echarts_dataEntry')); option = { title: { // text: '折线图堆叠' }, tooltip: { trigger:
非常好用的Echarts饼图和折线图源码Demo
06-14
在这个“非常好用的Echarts饼图和折线图源码Demo”中，我们可以学习到如何利用Echarts库来实现这两种常见的数据展示方式。 首先，让我们深入了解一下Echarts的饼图。饼图是一种用于表示部分与整体之间关系的图形，...
echarts图表折线图点击纵向区域获取所有点的数据
09-07
echarts图表点击事件：折线图点击纵向区域获取所有点的数据，已经能正式使用，可以下载看看，做参考。
Echarts 折线图区域鼠标事件高亮
PinkCoder
06-08 6385
Echarts 折线图区域鼠标事件高亮
echarts折线图点击x值动态高亮且显示tooltip
阑珊伊人
04-28 3556
预期效果：提示框显示时，相应的x坐标月份高亮（蓝色），同时提示框显示。 实现流程： 1.设置一个变量axisValue用于接收选中x值，当横轴值等于选中的axisValue时，设置蓝色 axisLabel: { show: true, textStyle: { fontSize: 10, //更改坐标轴文字大小 fontFamily: "PingFangSC-Regular",
echarts 折线图线条粗细_echarts 折线图点击高亮
weixin_35677363的博客
02-01 940
echarts中注册事件很多 ,记录下今天做的折线图点击高亮；查了api，看了半天，发现折线图点击时只能做到圆点变大，并不能实现点击线条，整条线条高亮，也真是醉了。上图：如图所示，只能圆点变大。。。贴出代码：function chartModule () {var self = this;var myChart = null;var prevIndex = null;this.init = fun...
eChart折线图动态特效和隔几秒高亮特效
qq_43217258的博客
06-15 2105
eChart折线图动态特效和隔几秒高亮特效
echarts中,在折线图中对数据点实现闪烁/闪亮功能(涟漪图-effectScatter)
qq_37146616的博客
03-07 4549
最近需要实现一个, 在折线图中要对数据进行一个闪烁显示的功能. 用到的是ecahrts的effectScatter. 在ecahrts中, 关于涟漪图-effectScatter的文档在此链接可以进行查阅 实现图: let opt = { ... xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // splitLine :{ //网格线
echart 将折线图鼠标悬浮时高亮
qq_43036532的博客
07-12 7297
echart 将折线图高亮 用echart 做图表时， 遇到了当鼠标悬浮在折线上，使折线高亮的问题，在网上查找了各种解决办法，得到的结果是如下： 发现当鼠标移到折线上的时候，只有折线上的点会变大，而且在 emphasis 里，貌似并不能修改 linestyle ，只能修改 label，itemStyle… emphasis: {// 高亮样式 itemStyle: { ...
echarts绘制折线图
09-06
要使用echarts绘制折线图，可以按照以下步骤进行操作： 1. 在页面加载时，初始化echarts对象，并指定要渲染图表的容器元素。可以使用`echarts.init()`方法来实现，例如： ``` this.myLineChart = echarts.init(document.getElementById('lineChart')); ``` 2. 在页面加载时，显示数据正在加载的loading效果。可以使用`showLoading()`方法来实现，例如： ``` this.myLineChart.showLoading({ text: '数据正在努力加载...', color: '#409EFF', textColor: '#000' }); ``` 3. 发起后端请求，获取折线图数据。可以使用后端调用接口的方法，例如使用`this.$axios.post()`方法来发送POST请求，然后在响应的回调函数中处理返回的数据，例如： ``` this.$axios.post(this.queryLineUrl, params).then(res => { let code = res.data; if (code && code === "1") { this.myLineChart.hideLoading(); this.lineData = res.data; // 解析数据 this.commonLineData(); } else { this.lineObjData = {}; return; } }); ``` 4. 解析数据并配置折线图的参数。根据获取到的数据，可以进行相关的数据解析和处理，然后配置折线图的参数。具体的配置方法可以根据echarts的文档来进行设置，例如设置`tooltip`为空，以实现鼠标放上显示横纵坐标值的效果，例如： ``` tooltip: {}, ``` 5. 最后，在页面布局中设置折线图的名称和容器元素。例如： ``` <el-col :span="8"> <div class="border_one"> <div class="chart_name"> <div class="con_title">X-Y轴图</div> </div> <div id="lineChart" style="width: 100%;height:400px;"></div> </div> </el-col> ``` 这样，就可以使用echarts绘制折线图了。具体的代码实现可以根据实际需求进行调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Echerts 绘制折线图](https://blog.csdn.net/u012190388/article/details/120210892)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值