echarts 对于数据差值较大，导致显示图形差异很大（甚至无法显示）

问题描述：

echarts  对于数据差值较大，导致显示图形差异很大。

例如：

柱状图：

 options配置如下：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [1200000, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

把options复制进去就可以看到效果 

echarts 柱状图 示例

折线图

  options配置如下：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [1200000, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

把options复制进去就可以看到效果  

echarts折线图示例

饼图：

options配置如下：

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 104800, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

把options复制进去就可以看到效果  

echarts饼图示例

解决步骤：

方式 一：

柱状图、折线图 给 y轴type设置log 就可以 。饼图 设置 minAngle

柱状图

 options配置：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'log'
  },
  series: [
    {
      data: [1200000, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

 折线图

 options配置：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'log'
  },
  series: [
    {
      data: [150000, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
};

饼图：

 options配置：

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%', //最小角度 注意必须是 number类型
      minAngle:10,
      data: [
        { value: 104800, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

echarts 饼图 minAngle api

本文参考与： 

 对于数据差值较大，导致显示图形很丑的问题 · Issue #6767 · apache/echarts · GitHub

echarts 官网

方式二：

柱状图

利用 barMinHeight  也可以 达到类似效果 。

barMinHeight 柱条最小高度，可用于防止某数据项的值过小而影响交互。

 options配置：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [1200000, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      barMinHeight:2,
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
};

方式三：

像 柱状图，折线图等只要有y轴，x轴的 都可以设置xisLabel.interval: x 来解决，这个属性是设置设置每个小格的值。

比如： x轴是 value 值 ，那可以自己 传入 axisLabel.interval: x的值

这个 梅格大小，可以根据 你传入的数据 最大值，最小值 ，取个合适的值，比如：平均值，中位数。

如果 x,y轴有  type: 'category'的还可以自己定义 该数据

 

echarts barMinHeight api

总结：

其它 图 暂时 还没试过 。有兴趣可以试试