因为公司技术需要所以在学习echarts，实际上官方网站上的API还有文档已经写得很详细了，不过在实际开发中还是很灵活的，所以每个组件和功能都需要慢慢接受，需求什么样子再去找什么样的功能就好了。
首先下面的例子进行分析和代码实现。官方网站http://echarts.baidu.com/examples/
目前导入标签仅此一个就可以实现以上功能了，我导入的是仓库的js，大家可以自行下载demo中的js导入
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<body>
<div id="cwjs_chart" style=" 50%;height: 200%"></div>
</body>
<script type="text/javascript">
/* 数据的value，实际开发中可以传过来一个集合进行接收 data=${myData} */
var data=[11111111,22222222,33333333,44444444,55555555,66666666];
/* 初始化容器 通过echarts.init方法，并且把它变成一个实例，在后续代码中可能用到*/
var cwjs_chart = echarts.init(document.getElementById('cwjs_chart'));
/* 页面加载时候的等待信息 类似 loading···，格式是固定的 可以自己进行调试看看什么效果，这里使用的是官方的*/
cwjs_chart.showLoading({
text : '数据获取中',
color : '#c23531',
textColor : '#000',
maskColor : 'rgba(255, 255, 255, 0.6)',
zlevel : 0
});
/* 配置一下option格式 然后通过上面的echarts实例调用setOption直接配置 后面有讲解*/
var cw_option = {
/* 提示组件 类似于鼠标移动上去出现个提示*/
tooltip : {
/* 触发类型 */
trigger : 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
/* shadow 是阴影柱状 就是上图中的鼠标位置，如果是line形式 阴影变成一条竖线了*/
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
},
/* 网格上绘制折线图，柱状图，散点图（气泡图） 这里我们用的是柱状图*/
grid : {
top : '10px',
left : '1px',
right : '1px',
bottom : '20px',
},
/* X轴的相关配置
type中
可选：
'value' 数值轴，适用于连续数据。
'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
'log' 对数轴。适用于对数数据。
*/
xAxis : {
type : 'category',
axisLine: {
show: true,
/* 坐标轴轴线相关设置 不用我讲你也能看得懂下面的配置*/
lineStyle: {
color: '#7F96CC',
1,
type: 'solid',
},
},
/* 分割线是否显示*/
splitLine : {
show : false,
},
axisLabel : {
color : '#333',
fontStyle : 'normal',
fontWeight : 'normal',
fontFamily : '微软雅黑',
fontSize :11,
},
/* 给出的数据data也就是myData长度数量和意思，一定要对象上下面的配置否则提示可能会出现问题 */
data : [ "耗材收入", "收费耗材支出","收费耗材出库","非收费耗材出库","试剂出库","医疗服务收入"]
},
/* Y轴配置
意思与X轴大致相同
*/
yAxis : {
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#7F96CC',
1,
type: 'solid',
},
},
splitLine: {
show: true,
lineStyle: {
color: '#7F96CC',
1,
type: 'dotted',
},
},
axisLabel : {
show: false
}
},
/* 柱条的最大宽度，不设时自适应。支持设置成相对于类目宽度的百分比。*/
barWidth : 40,
/* 系列列表。每个系列通过 type 决定自己的图表类型
bar就是柱状图*/
series : [ {
type : 'bar',
/* 图形样式。*/
itemStyle : {
/* 每个柱子的颜色配置对应上柱子的数量*/
normal : {
color : function(params) {
var colorList = [ '#1ab394', '#f56161',
'#08a3f0', '#fdbd4f',
'#1ab394', '#f56161' ];
return colorList[params.dataIndex]
},
}
},
label : {
normal : {
show : true,
position : 'top',
/* 循环data数据也就是myData 格式需要自己定义，这里是四舍五入 除1W + '万'*/
formatter : function(params) {
var n = params.value;
if (n > 0) {
n = Math.round(n / 10000);
return n + "万";
} else {
return "暂无数据";
}
}
},
},
/* 最上面的data 也就是后台传入的myData 回调函数formatter会自动调用它*/
data : data
} ]
};
/* 吧写好的配置用实例调用方法设置进去*/
cwjs_chart.setOption(cw_option);
/* 取消显示加载 否在会出现一致加载壮阔，下面有图例,对应得有显示加载showLoading 会一致卡在加载不动*/
cwjs_chart.hideLoading();
</script>
如图：
一值在loading。
上面就是简单的配置echarts 柱状图形了 因为都是模板 所以改变只需要改变data 或者显示的style就可以。