Echarts是一个开源的、非常好用的可视化库,内置了包括折线图、柱状图、饼图等基本图表和map、geo、bmap等多种地理可视化图表,并提供了丰富的图表交互功能。
Echarts官网上有着非常丰富的例子,为快速上手提供了极大的帮助。如果你不想细究它们的逻辑和内在原理的话,只需将数据修改为自己的数据即可完成数据可视化。
如果细究Echarts绘图原理的话,那么我们首先就从Echarts绘图的基本步骤开始吧!本文以折线图为例讲解。
首先,Echarts绘图时需要一个存放图表的HTML容器。在实际中往往用一个div元素作为图表容器。
<div id="container" style="height: 100%"></div>
其次,图表初始化。Echarts绘图时调用echarts.init() API实现图表初始化。
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
第三步,设置图表配置项,传入数据。具体请看下面代码:
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],//在这里修改数据
type: 'line'
}]
};
最后,绘制图表。调用setOption() API实现图表绘制。
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
以上就是Echarts绘制图表的基本步骤。对有些配置项不清楚,请看后续的文章,谢谢!
例子完整代码如下:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script><!--实际使用时请把这里的ak值换为自己申请的ak-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],//在这里修改数据
type: 'line'
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>