echarts表特点

柱状图特点

• 柱状图描述的是分类数据，呈现的是每一个分类中有多少，通过柱状图，我们可以很清晰的看出每个分类数据的排名情况

  柱状图的常用效果

• 最大值/最小值，markPoint

• 平均值 markLine
• 数值的显示 Label

• 柱的宽度 barWidth

  series:[
  {
      data:[],
    type:'bar',
    markPoint:{
        data:[
        {
            type:'max'
        },
        {
            type:'min'
        }
      ]
    },
    markLine:{
        data:[
        {
            type:'average'
        }
      ]
    },
    label:{
        show:true
    },
    barWidth:"30%"
  }
  ]

  折线图特点

• 折线图用来分析数据随时间的变化趋势

  折线图的常用效果

• 最大值/最小值 markPoint

• 平均值 markLine
• 标注区间 markArea
• 线条样式 smooth
• 线条风格 lineStyle
• 紧挨边缘 boundartGap

• scale 缩放：脱离0值比例

  xAxis:{
    boundaryGap:false
  },
  yAxis:{
    scale:true
  }
  series:[
  {
      data:[],
    type:'bar',
    markPoint:{
        data:[
        {
            type:'max'
        },
        {
            type:'min'
        }
      ]
    },
    markLine:{
        data:[
        {
            type:'average'
        }
      ]
    },
    markArea:{
        data[
          [
              {},{}        // 开始位置和结束位置
          ],
            [
                  {},{}        // 开始位置和结束位置
                ]
      ]
    },
    smooth:true,
    lineStyle:{
        color:'red',
    }
  }
  ]

• stack 堆叠图

  series:[
  {
      type:'line',
    data:[]
    stack:'all',
    areaStyle:{}
  },
  {
      type:'line',
    data:[]
    stack:'all',
    areaStyle:{}
  }
  ]

  散点图的特点

• 散点图可以帮助我们推断出不同维度数据之间的相关性

  散点图的常用效果

  气泡图效果

• symbolSize 散点的大小不同

• itemStyle.color 散点的颜色不同

  涟漪动画效果

• type:’effectScatter’ 类型

• rippleEffect:{ 大小

scale:10
}

• showEffectOn:’emphasis’ 触发时机

  饼图的特点

• 饼图可以很好地帮助用户快速了解不同分类数据的占比情况

  饼图的常用效果

  显示数值

• label.formatter
  

  圆环

• radius:’50% 半径

• radius:[‘50%’,’50%’] 数组，实现圆环

  南丁格尔图

• roseType:’radius’ 半径大小不同，半径的大小取决于数值大小

  选中效果

• selectedMode:’single’ 能够将选中的区域偏离原点一个距离

• selectedOffect:30 设置选中的偏移量