echarts的简单使用案例-柱形图

ECharts官方网站：http://echarts.baidu.com/

1.首先下载echarts工具包，可以在官网下载，图中为下载后的echarts工具包的目录结构。



2.测试echarts，新建文件夹test，将echarts-1.4.1\doc\example\www\下的js拷贝到test下，并新建test.html文件。

3.编辑test.html文件。首先导入echarts文件，因为我们只是测试柱状图所以只需要引入esl.js和echarts.js文件即可。

<script src="js/esl.js"></script>
<script src="js/echarts.js"></script>
4.创建柱状图。首先创建柱状图的容器。

<div id="main" style="height: 300px;"></div>
注意里面的id，下面会用到，另外要设定高度，否则柱状图不会显示。

5.创建完成容器后，在容器中添加柱状图。

// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths:{
echarts:'js/echarts',
'echarts/chart/bar' : 'js/echarts-map',
'echarts/chart/line': 'js/echarts-map',
'echarts/chart/map' : 'js/echarts-map'
}
});

// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map'
],
function(ec) {
//--- 折柱 ---
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({
tooltip : {
trigger: 'axis'
},
legend: {
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: true},
magicType : {show: true, type: ['bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26']
}
],
yAxis : [
{
type : 'value',
splitArea : {show : true}
}
],
series : [
{
name:'信息1',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3,32.6, 20.0,]
},
{
name:'信息2',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3,48.7, 18.8,]
}
]
});
}
);


6.代码编写完成，我们双击test.html文件，柱状图成功。