ECharts实现数据可视化入门教程
目录
一：ECharts是什么
ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
通俗的理解：
- 是一个JS插件
- 性能好可流畅运行PC与移动设备
- 兼容主流浏览器
- 提供很多常用图表【折线图、柱状图、散点图、饼图、K线图】，且可定制（支持自定义）
二：Echarts入门教程
步骤1：下载echarts.js文件
官网教程：五分钟入门
1.下载echarts.js
下载链接：https://www.jsdelivr.com/package/npm/echarts?path=dist
完全版：echarts.js，体积最大，包含所有的图表和组件
常用版：echarts.common.js，体积适中，包含常见的图表和组件
精简版：echarts.simple.js，体积较小，仅包含最常用的图表和组件
也可以使用在线引入地址,进入网址选择要引用的版本即可：http://www.bootcdn.cn/echarts/
步骤2：引入echarts.js文件
<!-- 引入echarts.js文件 -->
<script src="echarts.min.js"></script> <div style="width: 600px;height: 400px;"></div>步骤4：初始化echarts实例对象
// 初始化echarts实例对象
// 参数，dom 决定图表最终呈现的位置
var mCharts = echarts.init(document.querySelector('div'));步骤5：准备配置项
var option = {
xAxis:{
type: 'category',
data:['小明','小红','小王']
},
yAxis:{
type:'value'
},
series:[
{
name:'语文',
type:'bar',
data:[70,92,87]
}
]
};步骤6：将配置项设置给echarts实例对象
mCharts.setOption(option);三： 主要相关配置（常用的）
官网配置项参考文档：地址
需要了解的主要配置：series xAxis yAxis grid tooltip title legend color
xAxis:直角坐标系中的x轴，如果type属性的值为category,那么需要配置data数据，代表在x轴呈现
yAxis:直角坐标系中的y轴，如果type属性配置为value，那么无需配置data，此时y轴会自动去series下找数据进行图表的绘制
data来设置每个系列的数据– 系列列表。每个系列通过 type 决定自己的图表类型
– 通俗的理解：图标数据，指定什么类型的图标，可以多个图表重叠。
– boundaryGap: 坐标轴两边留白策略 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
yAxis：直角坐标系 grid 中的 y 轴grid：直角坐标系内绘图网格。title：标题组件tooltip：提示框组件legend：图例组件color：调色盘颜色列表stack：数据堆叠，同个类目轴上系列配置相同的stack值后 后一个系列的值会在前一个系列的值上相加。
关于更多的配置项参考官方文档，十分具体。
四：ECharts常用图表
4.1.柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width:600px;height:400px">
</div>
<script>
var mcharts = echarts.init(document.querySelector('div'));
var yDataArr = [99,80,73,95];
var option = {
tooltip:{
// trigger:'item'
trigger:'axis',
triggerOn:'click',
// formatter:'{b}的成绩是{c}'
formatter: function(arg){
console.log(arg);
return arg[0].name+'的分数是'+arg[0].data;
}
},
toolbox:{
feature:{
saveAsImage:{}, //导出图片
dataView:{},//数据视图
restore:{},//重置
dataZoom:{},//区域缩放
magicType: {
type: ['line', 'bar']
}
}
},
xAxis:{
type:'category',
data:['小明','小红','小王']
},
legend:{
data:['语文','数学']
},
yAxis:{
type:'value'
},
series:[
{
name:'语文',
type:'bar',
data:[88,92,63,82],
markPoint:{
data:[
{
type:'max',name:'最大值'
},
{
type:'min',name:'最小值'
}
]
},
markLine:{
data:[
{
type:'average',name:'平均值'
}
]
},
label:{
show:true,
rotate:60,
position:'top'
}
},
{
name:'数学',
type:'bar',
data:yDataArr
}
]
}
mcharts.setOption(option);
</script>
</body>
</html> 
标记：
- 最大值、最小值markPoint
- 平均值markLine
显示
- 数值显示label
柱宽度barwidth
横向柱状图
所谓横向柱状图，只需要让x轴的角色和y轴的角色互换一下即可。即xAxis的type设置为value，yAxis的type设置为category，并且设置data即可
通用配置
标题:title
提示框：tooltip
触发类型：trigger
可选值有item、axis
触发时机:triggerOn
可选值有mouseOver、click
格式化显示：formatter (官方文档有记载)
回调函数
tooltip:{
// trigger:'item'
trigger:'axis',
triggerOn:'click',
// formatter:'{b}的成绩是{c}'
formatter: function(arg){
console.log(arg);
return arg[0].name+'的分数是'+arg[0].data;
}
}
工具按钮：toolbox
toolbox是ECharts提供的工具栏，内置有导出图片、数据视图、重置、数据区域缩放，动态类型切换五个工具
图例：legend
legend是图例，用于筛选类别，需要和series配合使用
- legend中的data是一个数组
- legend中的data的值需要和series数组中某组数据的name值一致
legend:{
data:['语文','数学']
},4.2折线图
原理同上（只需把series中的type: 'bar'改成type: 'line',）
scale配置
- scale应该配置给y轴
yAxis:{
type:'value',
scale:true
}折线图更多的使用来呈现数据随时间的变化趋势
只写了一个案例，仅供大家参考！更多详细案例请参考echarts官方参考文档：Apache ECharts
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)