Apache Echarts 自学笔记 6. 概念篇 - 【ECharts 中的样式简介】 6.4 高亮的样式：emphasis 6.5 通过 visualMap 组件设定样式

灰太狼 2024-03-27 16:46 64阅读 0赞

#### Apache Echarts 自学笔记 ####

> 学习资料：【Echarts官网：https://echarts.apache.org/】
> 
> ![在这里插入图片描述][ce8cb1dd37bf4711b1ab8b8debe1ec0b.png_pic_center]
> 
> 如侵立删

##### 6. 概念篇 - 【ECharts 中的样式简介】 #####

###### 6.4 高亮的样式：emphasis ######

在鼠标悬浮到图形元素上时，一般会出现高亮的样式。

默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 [emphasis][] 属性来定制。

![在这里插入图片描述][b66b04e4fb01456999b375fac5d8088d.png_pic_center]

[emphsis][emphasis] 中的结构，和普通样式的结构相同，例如：

option = {
      series: {
        type: 'scatter',
    
        // 普通样式。
        itemStyle: {
          // 点的颜色。
          color: 'red'
        },
        label: {
          show: true,
          // 标签的文字。
          formatter: 'This is a normal label.'
        },
    
        // 高亮样式。
        emphasis: {
          itemStyle: {
            // 高亮时点的颜色。
            color: 'blue'
          },
          label: {
            show: true,
            // 高亮时标签的文字。
            formatter: 'This is a emphasis label.'
          }
        }
      }
    };

> 【注意】在 ECharts4 以前，高亮和普通样式的写法，是这样的：
> 
>     option = {
>       series: {
>         type: 'scatter',
>     
>         itemStyle: {
>           // 普通样式。
>           normal: {
>             // 点的颜色。
>             color: 'red'
>           },
>           // 高亮样式。
>           emphasis: {
>             // 高亮时点的颜色。
>             color: 'blue'
>           }
>         },
>     
>         label: {
>           // 普通样式。
>           normal: {
>             show: true,
>             // 标签的文字。
>             formatter: 'This is a normal label.'
>           },
>           // 高亮样式。
>           emphasis: {
>             show: true,
>             // 高亮时标签的文字。
>             formatter: 'This is a emphasis label.'
>           }
>         }
>       }
>     };

这种写法 **仍然被兼容**，但是，不再推荐。

事实上，多数情况下，开发者只想配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 `normal` 的配置方法（即前一个代码片段里的写法），使得配置项更扁平简单。

###### 6.5 通过 visualMap 组件设定样式 ######

[visualMap 组件][visualMap] 能指定数据到颜色、图形尺寸的映射规则【后面在’数据的视觉映射’ 中可以更详细的了解】

![在这里插入图片描述][5289c7f8835e4baba0a8b42cdada27e3.png_pic_center]

[ce8cb1dd37bf4711b1ab8b8debe1ec0b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/78837f34e4244addb962b00818a19942.png
[emphasis]: https://echarts.apache.org/option.html#series-bar.emphasis
[b66b04e4fb01456999b375fac5d8088d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ab91df1f329846ae9b35653e5aafc6f2.png
[visualMap]: https://echarts.apache.org/option.html#visualMap
[5289c7f8835e4baba0a8b42cdada27e3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/22464b1b2a464533b039500594838dbb.png