当前位置：首页>数据库>正文

echarts一组数据使用多个图例来控制数据展示效果（视觉映射）

数据库2024-10-24 01:41:09

注意：以下均来自于echarts官网示例，在示例基础上修改的，如需要看效果，自行复制代码，到示例里运行。

效果图

option = {
  legend: {},
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name:"图例",
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

比如期望使用多个图例更直观的来控制数据的展示情况，但使用legend: {},的话只能展示一个图例，并不能满足需求

1 使用视觉映射实现

效果图

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: true, // 控制视觉映射组件的排列方向, 当设置为true时，会使视觉映射组件的排列方向颠倒，即最小值显示在最右边，最大值显示在最左边。
    pieces: [ // 使用 pieces 属性来精确定义每个分段的取值范围和颜色
        { min: 0, max: 19, label: "图例1", color: '#E7BCF3' },
        { min: 20, max: 39, label: "图例2", color: '#E690D1' },
        { min: 40, max: 69, label: "图例3", color: '#E062AE' },
        { min: 60, max: 89, label: "图例4", color: '#FB7293' },
        { min: 80, max: 99, label: "图例5", color: '#FF9F7F' },
        { min: 100, max: 119, label: "图例6", color: '#FFDB5C' },
        { 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'
    }
  ]
};

查看全文

https://www.xamrdz.com/database/6px1997531.html

1 使用视觉映射实现

相关文章：