将 Echarts 中的 visualMap 视觉映射组件配置简单归纳，快速预览它的全部属性

       ECharts 的视觉映射组件（Visual Map）是用来展示数据与视觉元素之间映射关系的组件。它通常用于将数值型数据映射到视觉元素上，通过突出如颜色、大小、透明度等，通常用于地图、散点图、柱状图、折线图、饼图等，更直观地理解数据的含义和差异。

       文章中有截图的配置代码，直接写在文章中，配置代码以文件上传大家不方便获取。

注意： 

       当前配置这个映射组件之后，图形的显示颜色会被该组件的配置颜色覆盖，图形的颜色需要单独的在此处单独进行设置。

        图元：数据在视觉映射范围内展示的可视化图形元素，例如散点图中的点、折线图中的点和地图中的区域颜色等等

        controller 中单独配置的 inRange outOfRange，不影响全局其他的图元的颜色，而是单独配置到 控制器内部中。

        控制器两端文本和控制器标签是两个东西，两端文本固定在 控制器两端上用来展示，控制器标签是可以用来选择显示范 围的。

        inRange 中的 symbolSize 可以设置为 [2,50] 这样就可以配置 映射控制器上下两端的大小

        在配置选中和未选中的数据映射的颜色时，需要两个都配置，不然颜色块不会继承数据系列中的颜色，会有异常

一、-continuous 连续型视觉映射配置

option={
    // 组件单个设置
    visualMap:{    
    }
    
    // 组件多个设置
    visualMap:[{
        //系列一    
    },{
        //系列二    
    }]
    
    // 组件配置
    viuslmap:{
        type:'continuous',             // 类型为连续型视觉映射
        id:'1',                        // 组件ID
        min:10,                        // 指定可映射的最小值
        max:100,                       // 指定可映射的最大值
        range:[4,50],                  // 映射初始对应的数值
        calculable:false,              // 是否显示拖拽控制器的手柄
        realtime:true,                 // 拖拽时是否实时渲染图形
        inverse:false,                 // 是否反转组件
        precision:0,                   // 数据展示精度
        itemWidth:50,                  // 映射控制器宽度
        itemHeigth:50,                 // 图形的高度
        orient:'horizontal',           // 控制器水平还是竖直放置
        align:'auto',                  // 控制器手柄和文字的摆放位置
        text:['top','buttom'],         // 控制器两端的文本
        textGap:10,                    // 两端文字距离控制器的距离
        show:false,                    // 是否显示映射控制器
        dimension:0,                   // 选择 series.data 中的哪一组数据进行映射
        hoverLink:true,                // 是否启动控制器选择悬浮高亮
        zlevel:5,                      // 该组件的中图形的 zlevel 值 ，图形显示的优先级
        z:5,                           // 该组件中的图形 z 值，绘制图形优先级
        left:'10%',                    // 映射控制器距离容器左侧的距离
        top:'10%',                     // 映射控制器距离容器顶部的距离
        right:'10%',                   // 映射控制器距离容器右侧的距离
        bottom:'10%',                  // 映射控制器距离容器底部的距离
        padding:[5,5,5,5],             // 映射控制器内边距
        backgroundColor:'red',         // 映射控制器盒子的背景颜色
        borderWidth:2,                 // 映射控制器盒子边框宽度
        borderColor:'red',             // 映射控制器盒子边框颜色
        color:['red','#fff'],          // 该配置为了兼容 Echarts2,这里可以影响该组件中图元的颜色

        //选中的视觉元素样式
        inRange:{
            symbol:"rect",              // 图元符号形状，可以是'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'pin'
            symbolSize:15,              // 图元大小 可以设置
            color:['red','blue','#fff'] // 图元颜色   
            opacity:0.8,                // 图元透明度                       
        },
        //未选中的视觉元素样式
        outOfRange:{
             symbol:'rect',             // 未选中图元形状
             symbolSize:15,             // 未选中图元大小
             // 这里的颜色设置渐变色好像无效
             color:'rgb(255, 191, 0)',  // 未选中图元的颜色
             opacity:0.5,               // 未选中图元的透明度           
         },
         // 单独配置 映射控制器的 inRange outOfRange
        controller:{
            inRange:{ // 内容上同 }
            outOfRange:{ // 内容上同 }        
         },
         
         formatter:'{value}单位'                 // 控制器标签格式化
         // 控制器的文字样式配置
         textStyle:{
            color:'red',                          // 字体颜色
            fontStyle:'normal',                   // 字体风格
            fontWeight:'normal',                  // 字体粗细
            fontFamily:'Arial',                   // 字体系列
            fontSize:12,                          // 字体大小
            lineHeight:32,                        // 行高
            width:50,                             // 文本显示宽度
            height:50,                            // 文本显示高度
            textBorderColor:'red',                // 文字描边颜色
            textBorderWidth:20,                   // 文字描边宽度
            textBorderType:'solid',               // 文字描边类型
            textBorderDashOffset:10,              // 文字描边为虚线时，虚线的偏移量
            textShadowColor:'red',                // 文字阴影颜色
            textShadowBlur:10,                    // 文字阴影长度
            textShadowOffsetX:10,                 // 文字阴影水平偏移量
            textShaodwOffsetY:10,                 // 文字阴影竖直偏移量
            overflow:'truncate',                  // 文本超出宽度之后的配置，换行 || 截断等
            ellipsis:'···',                       // 文本超出长度，且为截断时，文本尾部展示内容          
         },
         
         // 控制器手柄配置
         handleIcon:'roundRect',                  // 手柄形状，可以为图片 'image://url'
         handleSize:15,                           // 手柄大小
         // 手柄样式
         handleStyle:{
             color:'red',                         // 手柄颜色，手柄是自己上传的图片时失效
             borderWidth:2,                       // 手柄的宽度
             borderColor:'#fff',                  // 手柄描边颜色
             borderType:'solid',                  // 手柄描边类型
             borderDashOffset:0,                  // 描边类型为虚线时的偏移量
             borderCap:'round',                   // 指定线段末端绘制方法
             borderjoin:'bevel',                  // 两个线段连接形状
             borderMiterLimit:10,                 // borderjoin 为 miter 时,斜接面比例
             shadowBlur:10,                       // 手柄阴影大小
             shadowColor:'red',                   // 手柄阴影颜色
             shadowOffsetX:10,                    // 阴影水平偏移量
             shadowOffsetY:10,                    // 阴影竖直偏移量
             opacity:0.5,                         // 阴影透明度        
         },
         // 映射控制器指示器配置
         indicatorIcon:'diamond',                 // 指示器 icon 形状
         indicatorSize:15,                        // 指示器 icon 大小
         // 指示器的样式
         indicatorStyle:{
              color:'red',                        // 指示器颜色，配置似乎无效
              borderWidth:5,                      // 指示器描边大小
              borderColor:'#fff',                 // 指示器描边颜色
              borderType:'solid',                 // 指示器描边类型
              borderDashOffset:5,                 // 描边类型为虚线时，虚线的偏移量
              borderCap:'butt',                   // 描边线段末端连接形状
              borderJoin:'bevel',                 // 描边线段两端相连形状
              borderMiterLimit:'',                // borderJoin 为 miter 时，斜接面比例
              shadowBlur:5,                       // 指示器阴影大小
              shadowColor:'#fff',                 // 指示器阴影颜色
              shadowOffsetX:10,                   // 指示器阴影水平偏移量
              shadowOffsetY:10,                   // 指示器阴影竖直偏移量
              opacity:0.8,                        // 指示器阴影透明度 
         },
    }
}

二、-piecewise 分段型视觉映射配置

将数据组进行合理的分段，以一个数据范围，一个数据范围来进行反馈，例如0到50，50到100这样进行映射，而不是以连续数据的形式进行映射。

option={
    // 组件配置
    viuslmap:{

    type:'piecewise',                 // 分段型
    id:'1',                           // 组件Id
    splitNumber:5,                    // 将数据平均切段
    // 自定义映射范围   这个配置
    pieces:[
        // 定义 0 到 60 值的样式设置
        {
            min:0,                    // 范围最小值
            max:60,                   // 范围最大值
            // min 或者 max 可以单独的配置，仅设置 一个时，另外一个范围为 无限
            color:'red',              // 该范围的颜色
            label:'标签',             //  自定义该范围的标签内容
            symbol:'circle',          // 该范围图元符号形状，可以是'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'pin'
            symbolSize:15,            // 该范围图元符号大小
            colorAlpha:0.8,           // 该范围图元颜色的透明度
            opacity:0.5,              // 该范围图元以及其附属物（如文字标签）的透明度。
        },
        // 定义 大于 100 小于 150 值的样式设置 
        {
            gt:100,                   // 大于 100
            lte:150,                  // 小于 150
            // ··· 其余配置与上面的一样         
        }, 
        // 单独定义 150 值的样式
        {
            value:150,                // 范围值
            // ··· 其余配置与上面的一样        
        }    
    ],
    categories:['系列一','系列二','系列三']，     // 指定范围标签内容，这个配置与 pieces 互斥，pieces 优先级更高。
    min:0,                                      // 指定范围最小值，对 pieces 中的配置无效
    max:100,                                    // 指定范围最大值，对 pieces 中的配置无效
    minOpen:true,                               // 使用 min/max/splitNumber 时,自动出现『< min』的选块
    maxOpen:true,                               // 使用 min/max/splitNumber 时,自动出现『< mxn』的选块
    selectedMode:'multiple',                    // 选择模式，单选还是多选范围
    inverse:true,                               // 选择模块顺序是否反转
    precision:1,                                // 数据展示保留几位小数
    itemWidth:20,                               // 颜色块宽度
    itemHeight:20,                              // 颜色块高度
    align:'left',                               // 标签文字和颜色块对齐方式
    text:['上','下'],                           // 视觉映射组件两端文字， 设置这个时 标签文字会隐藏，需要再设置 showLabel:true,
    textGap:10,                                 // 文字距离颜色块的距离
    showLabel:true,                             // 是否展示标签文字
    itemGap:10,                                 // 选择模块之间的间距
    itemSymbol:'roundRect',                     // 统一设置颜色块形状
    show:true,                                  // 是否显示组件
    dimension:1,                                // 指定数据映射维度，默认取 data 中最后一个维度。
    seriesIndex:1                               // 指定取哪个系列的数据，即哪个系列的 series.data。
    hoverLink:true,                             // 是否选中对应的数值时，图形元素高亮
    // 选中范围中视觉元素的样式配置·
    inRange:{
        symbol:"rect",              // 图元符号形状，可以是'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'pin'
        symbolSize:15,              // 图元大小 可以设置
        color:['red','blue','#fff'] // 图元颜色   
        opacity:0.8,                // 图元以及其附属物（如文字标签）的透明度
        colorAlpha:0.5,             // 图元颜色透明度     
    },
    // 未选中范围中的视觉元素的颜色配置
    outOfRange:{
        // ··· 与 inRange 配置一致   
    },
    // 控制器的 inRange outOfRange 设置
    controller:{
            // 着两天配置与上同
            inRange:{//···},
            outOfRange:{//···},
    },
    zlevel:0,                     // 图形的 zlevel 值
    z:0,                          // 组件所有图形的 z 值
    left:'10%',                   // 组件距离容器左侧的距离
    right:'10%',                  // 组件距离容器右侧的距离
    top:'10%',                    // 组件距离容器顶部的距离
    bottom:'10%',                 // 组件距离容器底部的距离
    orient:'vertical',            // 组件水平还在竖直放置
    padding:[5,5,5,5],            // 内边距
    backgroundColor:'red',        // 组件容器背景颜色
    borderColor:'red',            // 组件容器描边颜色
    borderWidth:2,                // 组件容器描边宽度
    color:'red',                  // 是为了兼容 ECharts2 而存在，ECharts3 中已经不推荐使用。它的功能已经移到了
    // 组件内部文字颜色
    textStyle:{
        color:'red',              // 文字颜色
        fontStyle:"normal",       // 文字字体风格
        fontWeight:'normal',      // 字体粗细
        fontFamily:'serif',       // 文字字体
        fontSize:15,              // 字体大小
        lineHeight:15,            // 行高
        width:50,                 // 文字显示宽度
        height:50,                // 文字显示高度
        textBorderColor:'red',    // 文字描边颜色
        textBorderWidth:2,        // 文字描边宽度
        textBorderType:'solid',   // 文字描边线类型
        textBorderDashOffset:1,   // 描边线类型为虚线时的虚线偏移量
        textShadowColor:'red',    // 文字的阴影颜色
        textShadowBlur:10,        // 文字阴影长度
        textShadowOffsetX:5,      // 文字阴影水平偏移量
        textShadowOffsetY:5,      // 文字阴影竖直偏移量
        overflow:'break',         // 文字超出宽度时，截断还是换行
        ellipsis:'···',           // 文本超出长度，且为截断时，文本尾部展示内容     
    },
    formatter:'{value}内容',      // 标签格式化
}
}

三、解剖图

连续型视觉映射

 分段型视觉映射

四、两个截图的 option 代码

使用：

 连续型视觉映射截图代码

option = {
  title: {
    text: 'Stacked Area Chart'
  },
  visualMap:{
    type:'continuous',
    min:0,
    max:1500,
    textGap:20,
    calculable:true,
    top:'40%',
    left:'8%',
    itemWidth:40,
    itemHeight:200,
    text:['上文字','下文字'],

    show:true,
    // 选中的视觉元素样式
    inRange:{
      symbol:'rect',
      color:['blue','red','#fff'],
      symbolSize:[20,20],
    },
    // 指示器样式
    indicatorStyle:{
      borderColor:'#fff',
      borderWidth:3,
      shadowBlur:5,
      shadowColor:'#fff',
    },
    // 未选中的视觉元素样式
    outOfRange:{
      symbol:'triangle',
      color:'rgb(255, 191, 0)',
      symbolSize:10,
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '25%',
    bottom: '10%',
    width:'70%',
    height:'70%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      color:'#fff',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Union Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ads',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Direct',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Search Engine',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
};

  分段型视觉映射截图代码

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  grid:{
    width:'65%',
    height:'60%',
    left:'34%',
    top:'15%',
  },
  visualMap:{
    type:'piecewise',
    itemWidth:40,
    itemHeight:30,
    // 组件上下两端文字
    text:['上','下'],
    // 显示标签
    itemStyle:'roundRect',
    showLabel:true,
    itemGap:20,
    hoverLink:true,
    borderColor:'red',
    borderWidth:2,
    textStyle:{
      color:'red',
    },
    inRange:{
      color:'red',
    },
    outOfRange:{
      color:'green',
    },
    left:'10%',
    top:"35%",
    pieces:[
      {
        min:0,
        max:60,
        color:'rgb(255, 191, 0)',
        label:'阶段一',
        symbol:'circle',

      },{
        min:60,
        max:80,
        color:'rgb(255, 0, 135)',
        label:'阶段二',
        symbol:'rect',        
      },{
        min:80,
        max:100,
        color: 'rgb(255, 191, 0)',
        label:'阶段三',
        symbol:'roundRect',        
      },{
        min:100,
        max:120,
        color: 'rgb(224, 62, 76)',
        label:'阶段四',
        symbol:'triangle',
      },{
        min:120,
        max:140,
        color: 'rgb(135, 0, 157)',
        label:'阶段五',
        symbol:'diamond',
      },{
        min:140,
        max:160,
        label:'阶段六',
        symbol:'pin',
      }]
  },
  series: [
    {
      data: [120, 75, 109, 80, 60, 110, 80],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      data: [80, 70, 85, 50, 75, 110, 99],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      data: [122, 95, 120, 80, 40, 90, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      data: [110, 60, 110, 80, 70, 78, 92],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      data: [130, 60, 103, 80, 50, 68, 126],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
    {
      data: [68, 80, 83, 89, 68, 80, 78],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    },
  ]
};

最近工作忙，更新慢，但 Echarts 的配置使用会统计完，也方便以后自己看，若文章中有错误或者改进的地方还请指出，谢谢！