使用echarts展示数据时数据差值较大导致显示图表不美观

Posted JackieDYH

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用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配置-示例


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配置-示例

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)'
        
      
    
  ]
;

解决

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


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)'
      
    
  ]
;

 

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'
    
  ]
;

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)'
        
      
    
  ]
;

 API

 

 

 

以上是关于使用echarts展示数据时数据差值较大导致显示图表不美观的主要内容,如果未能解决你的问题,请参考以下文章

使用echarts展示数据时数据差值较大导致显示图表不美观

echarts实现动态y轴范围且平均等分辅助线

vue使用echarts数据差距过大导致折线图展示不完全

ECharts折线图数据展示错乱

vue使用echarts总结

处理点击tab标签时Echarts图片显示不全的问题