做项目时用到ECharts,特此整理分享一下,作为笔记,同时希望帮助更多码友。 ECharts,是百度的一个开源的数据可视化工具,一个纯 Javascript 的图表库, 可以流畅的运行在 PC 和移动设备上。而作为数据可视化工具,使用快捷、方便。
下面就是实际应用到的代码,使用原理就是:
1) 先准备要显示柱状图的DIV:
<div id="demoCountId" style="width: 97%;min-height: 350px;"></div>
2) 引入echarts.min.js:
<!-- ECharts单文件引入 -->
<script src="<%=path %>/js/echarts/echarts.min.js" ></script>
3) 在自己写的JS中绑定刚刚准备的DIV,初始化echarts,把要可视化的数据赋值到相应的X、Y轴:
X轴是xAxis所在data,Y轴是yAxis所在data:
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById(demoCountId));
// 指定图表的配置项和数据
option = {
title : {
text: '近四周统计数',
left:'left', //标题的水平位置
top: 'top', //标题的垂直位置
textStyle:{
color:'#555555',
fontStyle:'normal',
fontWeight:'normal',
fontSize:14
}
},
color: ['#3398DB'],
xAxis : [
{
type : 'category',
data : ['${weekStr[0]}','${weekStr[1]}','${weekStr[2]}','${weekStr[3]}'], //X轴要显示的数据,后台传入数组
axisLabel: {
show: true,
textStyle: {
color: '#555555', //颜色、字体
fontSize: '10'
},
interval: 0, //坐标轴刻度标签的相关设置。
rotate: "45"
},
axisLine:{
lineStyle:{
color:'#555555' //更改坐标轴颜色
}
},
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
show : false,
type : 'value',
}
],
series : [
{
name:'周统计数',
type:'bar',
barWidth: '30%',
data:['${countWeek[0]}','${countWeek[1]}','${countWeek[2]}','${countWeek[3]}'], //Y轴要显示的数据,后台传入数组
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#555555',
fontSize: '12'
}
}
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
大致显示效果:
通过以上简单配置,即可快速实现数据可视化。如有错误,请不吝斧正。
更多示例详见:https://www.echartsjs.com/examples/zh/index.html