本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_VisualizationvisualMap）用于进行视觉编码，也就是将数据映射到视觉元素（视觉通道）。视觉元素可以是：
-
symbol——图元的图形类别。
-
symbolSize——图元的大小。
-
color——图元的颜色。
-
colorAlpha——图元的颜色的透明度。 -
opacity——图元以及其附属物（如文字标签）的透明度。
-
colorLightness——颜色的明暗度。
-
colorSaturation——颜色的饱和度。
-
colorHue——颜色的色调。
option 中的 visualMap 内设置。visualMap 组件可以定义多个，从而可以同时对数据中的多个维度进行视觉映射。visualMap 组件可以定义为 分段型或 连续型，通过 type 来区分。
以下是分段型（visualMapPiecewise）一些常用的参数：
| 参数 | 描述 |
type |
视觉映射组件的类型，分段型为piecewise |
min |
指定 visualMapPiecewise 组件的最小值 |
max |
指定 visualMapPiecewise 组件的最大值 |
splitNumber |
对于分段型数据，自动平均切分成几段，默认为5段 |
pieces |
自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式 |
text |
两端的文本 |
seriesIndex |
指定取哪个系列的数据 |
showLabel |
是否显示每项的文本标签。默认情况是，如果 visualMap-piecewise.text 被使用则不显示文本标签，否则显示。 |
inRange |
定义 在选中范围中 的视觉元素 |
outOfRange |
定义 在选中范围外 的视觉元素 |
orient |
如何放置 visualMap 组件，水平（’horizontal’）或者竖直（’vertical’） |
left |
visualMap 组件离容器左侧的距离 |
| 参数 | 描述 |
type |
视觉映射组件的类型，连续型为continuous |
min |
指定 visualMapContinuous 组件的允许的最小值 |
max |
指定 visualMapContinuous 组件的允许的最大值 |
range |
指定手柄对应数值的位置。range 应在 min max 范围内 |
calculable |
是否显示拖拽用的手柄（手柄能拖拽调整选中范围） |
text |
两端的文本 |
seriesIndex |
指定取哪个系列的数据 |
inRange |
定义 在选中范围中 的视觉元素 |
outOfRange |
定义 在选中范围外 的视觉元素 |
orient |
如何放置 visualMap 组件，水平（’horizontal’）或者竖直（’vertical’） |
left |
visualMap 组件离容器左侧的距离 |
本次首先绘制一个两个y轴的基础图表（散点图+柱状图）：
1 // 设置图表的参数
2 var option = {
3
4 title: {
5 text: "图表", //主标题文本
6 },
7
8 tooltip: {},
9
10
11 legend: {
12 data: ["蒸发量", "温度"], //图例的数据数组
13 },
14
15
16 xAxis: {
17 type: "category",
18 data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
19 },
20
21 // 两个y轴
22 yAxis: [{
23 type: "value", // 坐标轴类型
24 name: "Temperature", //坐标轴名称
25 position: "left", // y 轴的位置
26 alignTicks: true, //在多个 x 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效。
27 axisLine: {
28 show: true, // 是否显示坐标轴轴线
29 lineStyle: { color: "#91CC75" }, //坐标轴线线的颜色
30 },
31 axisLabel:{
32 formatter:"{value} ml" // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
33 },
34 }, {
35 type: "value", // 坐标轴类型。'value' 为数值轴，适用于连续数据
36 name: "Evaporation", //坐标轴名称
37 position: "right", // y 轴的位置
38 // alignTicks:true,
39 axisLine: {
40 show: true, // 是否显示坐标轴轴线
41 lineStyle: { color: "#5470C6" }, //坐标轴线线的颜色
42 },
43 axisLabel:{
44 formatter:"{value} ℃" // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式
45 },
46 }],
47
48
49 series: [{
50 name: "蒸发量",
51 type: "bar",
52 data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
53 yAxisIndex: 1, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
54 }, {
55 name: "温度",
56 type: "scatter",
57 data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
58 yAxisIndex: 0, // 使用的 y 轴的 index
59 }]
60 };
图表效果如下所示：
在上图的基础上，针对不同的数据系列定义不同的visualMap 组件，并进行设置：
1 // 视觉映射组件
2 // 定义了两个visualMap
3 visualMap: [{
4 type: "continuous", // 连续型视觉映射组件（visualMapContinuous）
5 min: 0, // 指定 visualMapContinuous 组件的允许的最小值
6 max: 170, // 指定 visualMapContinuous 组件的允许的最大值
7 range: [10, 100], // 指定手柄对应数值的位置。range 应在 min max 范围内
8 calculable: true, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
9 text: ["High", "蒸发量: Low"], // 两端的文本
10 seriesIndex: 0, // 指定取哪个系列的数据,默认取所有系列
11 inRange: {
12 color: ['#99FFFF', '#0066FF'], // 以数组内的颜色作为基准，形成一种『渐变』的色带，数据映射到这个色带上
13 },
14 outOfRange: { // 定义 在选中范围外 的视觉元素
15 color: "black", // 定义颜色
16 opacity: 0.5, // 定义透明度
17 },
18 orient: "horizontal", // 如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）
19 left: "right", // visualMap 组件离容器左侧的距离
20 }, {
21 type: "piecewise", // 分段型视觉映射组件（visualMapContinuous）
22 min: 0, // 指定 visualMapContinuous 组件的允许的最小值
23 max: 25, // 指定 visualMapContinuous 组件的允许的最大值
24 // splitNumber: 6, // 自动平均切分成几段，默认为5段
25 pieces: [ // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
26 { max: 10 },
27 { min: 10, max: 20 },
28 { min: 20 }
29 ],
30 calculable: true, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
31 text: ["温度:"], // 两端的文本
32 seriesIndex: 1, // 指定取哪个系列的数据,默认取所有系列
33 showLabel:true, // 是否显示每项的文本标签
34 inRange: {
35 color: ['#FF9900', '#FF66FF', 'red'], // 以数组内的颜色作为基准，形成一种『渐变』的色带，数据映射到这个色带上
36 symbolSize: [10, 50],
37 },
38 outOfRange: { // 定义 在选中范围外 的视觉元素
39 color: "black", // 定义颜色
40 opacity: 0.5, // 定义透明度
41 },
42 orient: "horizontal", // 如何放置 visualMap 组件，水平（'horizontal'）或者竖直（'vertical'）
43 }],
图表效果如下所示：
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
