研究思路
1.引用：Echarts是百度開源的可視化產品，以國外zrender開源的javascript的可視化插件包爲基礎，加工整理成新的圖形js包，新的js包對應不同的數據圖形。
2.目的：一份新的數據放置後臺（需特定的數據結構），前端需要將數據進行可視化的展示。
3.方法：html腳本，結合開源的可視化js的圖形包進行調用，再結合數據讀取的插件包，將數據的讀取製作成通用性的數據讀取腳本。
環境準備
Tomcat+jsp+js,產生腳本如下:
其中，jquery-1.8.2.min.js和project.min.js是固定的程序包，可進行相應的下載。數據內容情況如下：（以類json的格式進行）
構建腳本內容
其中View.html腳本內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可視化</title>
<!-- 引入 echarts.js -->
<script src="project.min.js"></script>
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
// f();
// function f() {
// var myChart = echarts.init(document.getElementById('main'));
// // 指定圖表的配置項和數據
// debugger;
// $.getJSON("try.txt", function (data){
// console.log(data);
// myChart.setOption(data);
// });
// }
$(function () {
var myChart = echarts.init(document.getElementById('main'));
$.ajax({
type: "POST",
dataType: "json",
url: "data.txt",
success: function (result) {
var project;
var kk;
var c=[];
var b=[];
for(var i in result){
project=result[i].name;
c[i]=project;
b[i]=result[i].sex;
}
var option = {
title: {
text: '各科室周內手術情況統計'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data:c
},
yAxis: {},
series: [{
name: '人數',
type: 'bar',
data: b
}]
};
myChart.setOption(option);
}
});
});
</script>
</body>
</html>
產生結果
其它可構建的Echarts擴展
參考鏈接：https://www.echartsjs.com/zh/builder.html
