echarts 地图选中效果如何使用原来的区域颜色?

XboxYan
  • 6.9k

现在做的效果是地图的每一块区域是通过映射得来的,所以每一块颜色不确定(是由该区域的值决定的)

visualMap: {
        type:'piecewise',
        pieces: [
            {gt: 85, label: '85%以上',color: '#f54579'},
            {gt: 60, lte: 85, label: '60%-85%',color: '#614bd2'},
            {gt: 0, lte: 60, label: '60%以下',color: '#0789b8'},
        ]
    },

但是,现在的需求是,我鼠标经过只想改变边框的颜色,而不改变区域的颜色,但实际表现是,如果不设置颜色,会有一个默认的颜色(如下图中的土黄色)

emphasis: {
    itemStyle: {
        //areaColor :'#0073e6',
        borderColor: '#fff',
        borderWidth: 4,
    },
    label: {
        show: true,
        fontSize:22,
        //fontWeight:'bold',
        color:'#fff'
    },
}

clipboard.png
]

有没有办法,在鼠标经过的时候不改变颜色呢(如果有放大就更好了)?

回复
阅读 7.6k
3 个回答

可以禁用鼠标的事件silent 但是就停止了所有鼠标事件

没有找到官方的api;给大家提供一个新思路:
1.画两个一模一样的地图叠在一起
2.给上面的地图设置高亮时候的颜色为全透明
3.给下面的地图设置silent:true

示例:
`

let commonOption={
// 你的参数
}
let myChartOption={}
Object.assign(myChartOption, commonOption)
myChartOption.series[0].emphasis.itemStyle.areaColor="rgba(0,0,0,0)"

let chartBackgroundOption={}
Object.assign(chartBackgroundOption, commonOption)
chartBackgroundOption.silent="true"

myChart.setOption(myChartOption)
chartBackground.setOption(chartBackgroundOption)
`
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏