Echarts图表鼠标hover到图形交点（拐点）时，改变symbol样式

最新推荐文章于 2024-08-22 14:27:51 发布

大雨倾城

最新推荐文章于 2024-08-22 14:27:51 发布

阅读量6.3k

点赞数 3

分类专栏： echarts 文章标签： echarts 数据可视化

本文链接：https://blog.csdn.net/qq_38918953/article/details/109387063

版权

echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

举例1：散点图

     {
                name: '用户',
                type: 'scatter',
                symbol: 'emptyCircle',
                symbolSize: 8,
                itemStyle: {
                    // 线和拐点的颜色
                    color: '#0072FF', //图例的颜色
                    borderWidth: 2, 拐点的线宽
                },
                emphasis: {
                    // 鼠标hover上去的时候，拐点的颜色和样式
                    itemStyle: {
                        color: '#0072FF', //颜色
                        borderColor: '#fff', //图形的描边颜色
                        borderWidth: 2, // 描边的线宽
                        shadowBlur: 4, // 图形的阴影大小
                        shadowColor: '#0072FF', // 图形的阴影颜色
                    },
                },
            },

显示效果：
在这里插入图片描述

举例2：线性图

        {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320] ,
            itemStyle:{
                normal:{
                  color:'red',//拐点颜色
                  borderColor:'#fff',//拐点边框颜色
                  borderWidth:3//拐点边框大小
                },
                emphasis: {
                    color: '#000000'//hover拐点颜色定义
                }
            }
        },

显示效果：
在这里插入图片描述