美文网首页
Echarts 折线图 鼠标悬浮拐点背景颜色改变

Echarts 折线图 鼠标悬浮拐点背景颜色改变

作者: 前端_酒館 | 来源:发表于2019-12-09 15:59 被阅读0次
    image.png

    如上图鼠标悬浮在点上背景色填充满整个圆点,刚开我在度娘上面怎么都找不到有解决这个问题的答案,后面我在文档中一个个找过去才找到答案,
    下面的代码是构建这个图表的完整代码:

    option = {
        xAxis: {
            type: 'category',
            data: ['2018.01','2018.02', '2018.03','2018.04', '2018.05','2018.06','2018.07','2018.08','2018.09','2018.10','2018.11','2018.12'],
            axisLabel:{
                show: true,
                interval: 0,
                textStyle:{
                    color: '#ccc'
                }
            },
             axisLine:{
                show: false
            },
            axisTick : {
                show: false
            },
            splitLine:{
                show: true,
                lineStyle:{
                    color: '#EAEAEA'
                }
            },
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
             axisLine:{
                show: true,
                lineStyle: {
                    color: '#EAEAEA',
                },
            },
            axisLabel: {
                textStyle:{
                    color: '#ccc'
                }
            },
            axisTick : {
                show: false,
            },
            splitLine:{
                show: true,
                lineStyle:{
                    color: '#EAEAEA'
                },
            },
        },
        tooltip:{
            show: true
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320,312,443,900,512,112],
            type : 'line',
            symbolSize: 8,
            // showSymbol: false,
            itemStyle: {
                normal : {  
                    color:'#EB547C',  
                    borderWidth: 3,
                    lineStyle:{  
                        color:'#247BA0'  
                    }  
                },
                emphasis:{
                    color: '#EB547C',
                    borderColor: '#EB547C'
                }//***这个字段就是控制鼠标悬浮在圆点上面让整个圆填充满背景色,也可以更改边框颜色等!***
            },
            formatter: (function(a, b, c){
               
            }),
        }]
    };
    

    如果此文对你有用请动动你的小手点个赞!谢谢!!!

    相关文章

      网友评论

          本文标题:Echarts 折线图 鼠标悬浮拐点背景颜色改变

          本文链接:https://www.haomeiwen.com/subject/qlzbgctx.html