ecarts|echarts(三)常用图表(折线图、饼图、散点图、K线图极其常用配置项)

入门篇

  • ECharts 数据可视化实验室
折线图 line
  • 折线图主要用来展示数据相随着时间推移的变化。非常适合用于展示一个连续的二维数据。
常用配置项
  • x轴
    • data 类目轴数据
    • boundaryGap 边界留白
    • axisLabel 标签
      • margin 标签偏移量
xAxis:{ data:['html','css','js','canvas'], boundaryGap: 0 },

  • series 系列集合
    • type 系列类型,line
    • name 系列名
    • data 系列数据,[20,10,30,40]
    • smooth 平滑
    • itemStyle 项目样式
      • color 颜色
    • areaStyle 区域样式
      • color 区域颜色
      • opacity 透明度
    • symbolSize 标记点大小
    • symbol 标记图形
      • 内置形状 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’
      • ‘image://url’ 图片
      • ‘path://’ svg
series:{ name:'学习人数', type:'line', data:[30,20,40,100], smooth:true, itemStyle:{ color:'#00acec' }, areaStyle:{ color:'#00acec', opacity:0.3 }, symbolSize:50, // symbol:'none', // symbol:'image://./images/bs.png', symbol:'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z' }

ecarts|echarts(三)常用图表(折线图、饼图、散点图、K线图极其常用配置项)
文章图片

饼图 pie
  • 饼图主要用于展现不同类别数值相对于总数的占比情况。
  • 图中扇形的弧长表示该类别的占比大小,所有扇形的弧长的总和为100%。
  • 当各类别数据占比较接近时,建议选用柱状图或南丁格尔玫瑰图
常用配置项
  • 视觉映射 visualMap
    • min 最小值
    • max 最大值
    • inRange 定义 在选中范围中 的视觉元素
      • colorLightness[0, 1] 亮度
visualMap:{ min:20, max:50, inRange:{ colorLightness:[0.2,0.8] } },

  • 饼图 pie
    • type 图表类型
    • data 数据 [{name,value},…]
    • roseType 玫瑰图类型
      • radius 半径
      • area 面积
    • radius 半径,[起始半径,结束半径]可生成环形
    • itemStyle 项目样式
      • color 颜色
series:{ type:'pie', data:[ {name:'html',value:30}, {name:'css',value:20}, {name:'js',value:40}, {name:'canvas',value:50}, ], roseType:'area', // roseType:'radius', // radius:['40%','70%'], itemStyle:{ color:'#00acec' } }

【ecarts|echarts(三)常用图表(折线图、饼图、散点图、K线图极其常用配置项)】ecarts|echarts(三)常用图表(折线图、饼图、散点图、K线图极其常用配置项)
文章图片

散点图 scatter
  • 散点图通常用来识别两个变量之间的相关性或用来观察他们的关系,从而发现某种趋势,对于查找异常值或理解数据分布也很有效。
  • 散点图可以将一个对象的两个变量映射到x、y 位置上。
    如果此对象还有一个变量,那就可以映射到散点的大小上,这就变成了气泡图。
常用配置项
  • symbolSize 散点尺寸。
  • 使用函数式编程可以根据数据大小呈现点大小
series:{ type:'scatter', data, // symbolSize:40, symbolSize:(data)=>{ console.log(data); // 依据y轴数据大小 return data[1]; }, },

ecarts|echarts(三)常用图表(折线图、饼图、散点图、K线图极其常用配置项)
文章图片

K 线 candlestick
  • K 线通常用于表示股票走势。
  • 数据格式
    • data [open, close, lowest, highest]-[开盘值, 收盘值, 最低值, 最高值]
      ecarts|echarts(三)常用图表(折线图、饼图、散点图、K线图极其常用配置项)
      文章图片

    推荐阅读