研究思路
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