因为公司技术需要所以在学习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="width: 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',
width: 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',
width: 1,
type: 'solid',
},
},
splitLine: {
show: true,
lineStyle: {
color: '#7F96CC',
width: 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就可以。
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。