准备工作:
1、用tomcat搭建web网站;
2、新建jsp页面,提供div容器并命名、设置大小。
3、在echarts官网上复制一个基本柱形图的option,上述三步代码如下:
// 初始化
var myChart = echarts.init(document.getElementById(myDiv'));
// 下面是一些选项,json格式的字符串
var option = {
title: {
text: 'XXX公司销售图表'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
myChart.setOption(option);
上述三步一般没什么问题
4、如果要从数据库中取值并显示出来,一般使用ajax方式请求数据,它的格式如下
$.ajax({
type: 'post',
url:'请求地址',
dataType: "json",
success: function (result) {
}
});
怎么才能和图表联系到一起呢,其实就是动态修改option,从表中取出的数据经过封装后,赋值option中的某项,比如你出来的值为mydata
想显示到图表中,哪就用data:mydata 代码修改,此代码放在success中就可以,但要写成:
series: [{
data: mydata
}]
可能有更简洁的写法。
5、书写类接收请求并返回结果,我用的是action类 ,用到这两个对象中的一个JSONObject或JSONArray,第一个用来封装对象,第二个用来封装array
即:在java类中封装,在页面中解封。关于数据库连接读到数据就不再罗嗦。
在疫情期间,大家在手机上看到的疫情图表、统计结果大部分是这个做的。
总结:
难点1:echars插件图表先项多,参数多,刚使用时会头大,其实是有规律的。
难点2:封装与解封这部分,我折腾很长时间才大体搞明白,但原理不复杂,多实践就可以。
优点:数据图形化显示,非常直观、漂亮。
第4、5步无法展开书写, 在此仅提供个人理解,因为水平有限,如有需求可进一步交流。