Echarts入门
2017-03-13 本文已影响0人
旧丶时候
1. 前言
在项目中大家可能需要做报表，要是自己写原生的话很麻烦，然而，网上提供了一个库，可以满足大部分的做报表需求，就是这个Echarts，我在这里呢，也就做几个简单的demo，哈哈！
timg.jpg
2. 简介
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
3. 代码实现
给大家实现一个简单的柱状图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#main{
width: 900px;
height: 600px;
}
</style>
<!-- 引入echarts.js -->
<script type="text/javascript" src="echarts.min.js"></script>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.querySelector("#main"));
// 指定图表的配置项和数据
var option = {
// 标题
title : {text : "Echarts"},
// 工具箱
toolbox : {
show :true,
feature : {
saveAsImage : {
show :true
}
}
},
// 图例
legend : {
data : ["销量"]
},
// x轴
xAxis : {
data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis : {},
// 数据
series : [{name : "销量",type : "bar",data : [5,20,36,10,10,20]}]
}
//
// 使用刚制定的配置项和数据显示列表
myChart.setOption(option);
</script>
</body>
</html>
Paste_Image.png
那么折线图就更容易了，基本上不用改变咱们上面写的代码，只要做稍稍的修改，在数据中加入这么一段代码。
// 数据
series : [
{name : "销量",type : "bar",data : [5,20,36,10,10,20]},
{name : "产量",type : "line",data : [7,30,50,11,40,80]}
]
不懂的话就看图！！！
Paste_Image.png
然后显示出来的样式
Paste_Image.png
好了，我也就简单的介绍到这里吧，如果没看太懂，觉得我说的还不够，就看Echarts官网的配置项手册里面介绍的比我详细。
4. 结束语
好了，如果你觉得我写的文章对你有所帮助，就点赞分享吧！！！
