How does the echarts map selection effect use the original area color?

the effect now is that each area of the map is mapped, so the color of each piece is uncertain (determined by the value of that area)

visualMap: {
        type:"piecewise",
        pieces: [
            {gt: 85, label: "85%",color: "-sharpf54579"},
            {gt: 60, lte: 85, label: "60%-85%",color: "-sharp614bd2"},
            {gt: 0, lte: 60, label: "60%",color: "-sharp0789b8"},
        ]
    },

however, the requirement now is that I just want to change the color of the border without changing the color of the area, but it actually shows that if the color is not set, there will be a default color (such as khaki in the following image)

emphasis: {
    itemStyle: {
        //areaColor :"-sharp0073e6",
        borderColor: "-sharpfff",
        borderWidth: 4,
    },
    label: {
        show: true,
        fontSize:22,
        //fontWeight:"bold",
        color:"-sharpfff"
    },
}

clipboard.png
]

is there a way not to change the color while the mouse is over (even better if there is a zoom in)?

Nov.19,2021

you can disable mouse event silent but stop all mouse events


use echarts 3.x to solve this problem.


did not find the official api; to provide you with a new idea:
1. Draw two identical maps on top of each other
2. Set the above map to be fully transparent when highlighted
3. Set silent:true

example for the following map:
`

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)
`
Menu