準備工作：

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步無法展開書寫， 在此僅提供個人理解，因為水平有限，如有需求可進一步交流。