echarts 折线图点击高亮

最新推荐文章于 2024-06-16 11:18:18 发布

前端-文龙刚

最新推荐文章于 2024-06-16 11:18:18 发布

阅读量3.4k

点赞数

分类专栏： eCharts Javascript 文章标签： echarts javascript ecmascript

本文链接：https://blog.csdn.net/qq_17211063/article/details/123252458

版权

Javascript 同时被 2 个专栏收录

84 篇文章 1 订阅

订阅专栏

eCharts

14 篇文章 1 订阅

订阅专栏

<!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
评论
echarts 折线图点击高亮

<!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<.
复制链接

扫一扫