visualMap实现根据value自定义单项颜色及图例

小鱼小鱼干

于 2024-08-20 15:37:00 发布

阅读量141

点赞数 2

分类专栏：前端踩坑路漫漫文章标签： java android 开发语言

本文链接：https://blog.csdn.net/weixin_43361722/article/details/141360307

版权

前端踩坑路漫漫专栏收录该内容

97 篇文章 7 订阅

订阅专栏

效果

在这里插入图片描述

源码

option = {
  visualMap:{ // 视觉映射
    type: 'piecewise', // 'continuous'（连续型）'piecewise'（分段型）。
    splitNumber: 10, // 数据分割几份
    left: "center", // 位置
    top: 0, // 边距
    orient: "horizontal", // 布局朝向 'horizontal'（横向）'vertical'（纵向）
    // text:['High', 'Low'], // 两端文本
    min: 0, // 最小区间值
    max: 200, // 最大区间值
    itemHeight:10,
    itemWidth:10,
    align:'left', // 图例位置
    inverse: false, // 控制视觉映射组件的排列方向, 当设置为true时，会使视觉映射组件的排列方向颠倒，即最小值显示在最右边，最大值显示在最左边。
    pieces: [ // 使用 pieces 属性来精确定义每个分段的取值范围和颜色
        { min: 100, max: 150, label: "图例6", color: 'rgb(100,163,1)' },
        { min: 0, max: 19, label: "图例1", color: '#422F46' },
        { min: 20, max: 39, label: "图例2", color: '#E690D1' },
        { min: 40, max: 59, label: "图例3", color: '#E062AE' },
        { min: 60, max: 79, label: "图例4", color: '#FB7293' },
        { min: 80, max: 89, label: "图例5", color: '#FF9F7F' },
        { min: 120, max: 149, label: "图例7", color: '#9FE6B8' },
        { min: 140, max: 159, label: "图例8", color: '#67E0E3' },
        { min: 160, max: 179, label: "图例9", color: '#32C5E9' },
        { min: 180, max: 200, label: "图例10", color: '#37A2DA' },
    ] 
  }, 
  dataZoom: {}, // 动态滚动条
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};