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'
}

echarts(三)常用图表(折线图、饼图、散点图、K线图极其常用配置项)_第1张图片

饼图 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'
    }
}

echarts(三)常用图表(折线图、饼图、散点图、K线图极其常用配置项)_第2张图片

散点图 scatter

  • 散点图通常用来识别两个变量之间的相关性或用来观察他们的关系,从而发现某种趋势,对于查找异常值或理解数据分布也很有效。
  • 散点图可以将一个对象的两个变量映射到x、y 位置上。
    如果此对象还有一个变量,那就可以映射到散点的大小上,这就变成了气泡图。

常用配置项

  • symbolSize 散点尺寸。
  • 使用函数式编程可以根据数据大小呈现点大小
 series:{
            type:'scatter',
            data,
            // symbolSize:40,
            symbolSize:(data)=>{
                console.log(data);
                // 依据y轴数据大小
                return data[1];
            },
        },

echarts(三)常用图表(折线图、饼图、散点图、K线图极其常用配置项)_第3张图片

K 线 candlestick

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

你可能感兴趣的:(ecarts,前端,数据可视化,ecarts)