1、用tomcat搭建web网站;
2、新建jsp页面,供应div容器并命名、设置大小。
3、在echarts官网上复制一个基本柱形图的option，上述三步代码如下：
<div id="myDiv" style="width: 500px;height:300px;"></div>
<script type="text/javascript">
// 初始化
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);
</script>
上述三步一样平常没什么问题
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步无法展开书写， 在此仅供应个人理解，由于水平有限，如有需求可进一步互换。
