echart
echarts入门教程（含小案例）
ECharts 入门教程
简介：
ECharts，缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具。
特点：
1、开源软件，并且我们提供了非常炫酷的图形界面，特色是地图，另外还提供了柱状图、折线图、饼图、气泡图及四象限图等；
2，使用简单，在官网中为我们封装了js，只要会引用就会得到完美的展示效果；
3，种类多，echarts实现简单，各类图形都有；相应的模板，还有丰富的API及文档说明，非常详细；
4，兼容性好，基于HTML5，有着良好的动画渲染效果。
柱状图效果：
首先，创建一个div盒子来盛放我们即将绘制的柱状图。
<div id="first" style="width:400px;height:400px"></div>
然后，我们导入Echarts类库，做好准备。（如果没有echart类库，请到官网上下载）
<!-- 引入 echarts.js -->
<!-- 这里是加载刚下好的echarts.min.js，注意路径 -->
<script src="js/echarts.min.js"></script>
最后，开始绘图。（重点是option里的设置，设置坐标轴、设置数据。）
// 基于准备好的dom，初始化echarts实例
function a1() {
var echar=echarts.init(document.getElementById("first"));
// 指定图表的配置项和数据
var option={
//设置标题
title:{text:"柱状图"，subtext:'柱状图哟柱状图'
},
//设置提示
tooltip:{show:true},
//设置图例
legend:{data:["销量"]},//
//设置坐标轴
xAxis:{
data:["一月","二月","三月","四月"]
},
yAxis:{type:'value'},
//设置数据
series:{
name:"销量",
type:"bar",
data:[200,400,600,300]
}
};
// 使用刚指定的配置项和数据显示图表。
echar.setOption(option);
}
柱状图完整的代码：
<html>
<head>
<title>Title</title>
<script src="js/echarts.min.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
function a1() {
var echar=echarts.init(document.getElementById("first"));
// 指定图表的配置项和数据
var option={
title:{text:"柱状图"},
tooltip:{show:true},
legend:{data:["销量"]},//
xAxis:{
data:["一月","二月","三月","四月"]
},
yAxis:{type:'value'},
series:{
name:"销量",
type:"bar",
data:[200,400,600,300]
}
};
// 使用刚指定的配置项和数据显示图表。
echar.setOption(option);
}
</script>
</head>
<body>
<div id="first" style="width: 500px;height: 500px"></div>
<button onclick="a1()">柱状图</button>
</body>
</html>
饼状效果图：
饼状图完整代码：
<html>
<head>
<title>Title</title>
<script src="js/echarts.min.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
function a2(){
var echar=echarts.init(document.getElementById("first"));
// 指定图表的配置项和数据
var option={
title:{text:"饼状图"},
tooltip:{
trigger:"item",
formatter:"{b}产值<br>{c}"
},
series:{
type:"pie",
data:[
{name:"郑州",value:900},
{name:"杭州",value:800},
{name:"南京",value:500}
]
}
};
// 使用刚指定的配置项和数据显示图表。
echar.setOption(option);
}
</script>
</head>
<body>
<div id="first" style="width: 500px;height: 500px"></div>
<button onclick="a2()">饼状图</button>
</body>
</html>
总结：认真敲，多敲多练习，多思考。（只是总结给自己的，不喜欢勿喷，谢谢！）