入门篇
- ECharts 数据可视化实验室
- 折线图主要用来展示数据相随着时间推移的变化。非常适合用于展示一个连续的二维数据。
- 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'
}
文章图片
饼图 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线图极其常用配置项）】
文章图片
散点图 scatter
- 散点图通常用来识别两个变量之间的相关性或用来观察他们的关系，从而发现某种趋势，对于查找异常值或理解数据分布也很有效。
- 散点图可以将一个对象的两个变量映射到x、y 位置上。
如果此对象还有一个变量，那就可以映射到散点的大小上，这就变成了气泡图。
- symbolSize 散点尺寸。
- 使用函数式编程可以根据数据大小呈现点大小
series:{
type:'scatter',
data,
// symbolSize:40,
symbolSize:(data)=>{
console.log(data);
// 依据y轴数据大小
return data[1];
},
},
文章图片
K 线 candlestick
- K 线通常用于表示股票走势。
- 数据格式
- data [open, close, lowest, highest]-[开盘值, 收盘值, 最低值, 最高值]
文章图片
- data [open, close, lowest, highest]-[开盘值, 收盘值, 最低值, 最高值]
推荐阅读
- 笔记|require.context()的用法详解
- vue|vue实时获取时间
- 前端|vue使用echarts-liquidfill水球图不生效
- Java专题|【在线实习】推推项目课程介绍—小说更新就通知
- 前端|idea如何运行Java Web项目（Servlet、JSP）
- 面试|2018年java进阶需要关注的公众号
- 面试|2019java面试（六）
- 面试|2018Java面试
- 前端|如何用一行 CSS 实现 10 种现代布局