249 lines
7.4 KiB
HTML
249 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=0">
|
|
<title></title>
|
|
<script src="./lib/jquery/dist/jquery.js"></script>
|
|
<script src="./lib/vuejs/vue.js"></script>
|
|
<!--<script src="lib/echarts/echarts.min.js"></script>-->
|
|
<!--<script src="./lib/echarts5temp/composition-api1.0.0-rc.js"></script>
|
|
<script src="./lib/echarts5temp/echarts5.0.2.js"></script>-->
|
|
<!--<script src="../lib/echarts5temp/vue-echarts6.0.0-beta.js"></script>-->
|
|
<script src="../lib/echarts490rc/echarts490rc.min.js"></script>
|
|
<script src="./lib/vuejs/axios.min.js"></script>
|
|
<script src="./lib/elementui/index2.15.9v.js"></script>
|
|
<script src="./lib/linq.js/Content/Scripts/linq.min.js"></script>
|
|
<link href="./lib/elementui/index2.15.9v.css" rel="stylesheet" />
|
|
<!--<script src="map/shanghai.js"></script>-->
|
|
|
|
</head>
|
|
<body style="background-color: #0D2753;">
|
|
|
|
<div id="app" style="background-color: #0D2753;">
|
|
<el-container v-loading="loading" v-loading.fullscreen.lock="false" :element-loading-text="showLoadingTip"
|
|
element-loading-spinner="el-icon-loading" element-loading-background="#0D2753">
|
|
|
|
<el-header style="margin-top: 30px;">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<div class="grid-content">
|
|
健康指导值数量统计(个)
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-header>
|
|
<el-main>
|
|
<div id="main" style="width: 100%;height:500px;">
|
|
</div>
|
|
</el-main>
|
|
</el-container>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
<script>
|
|
|
|
///////////////////////////////////////////////////
|
|
//该部分是Vue应用封装
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
showLoadingTip: '正在进行海量实时数据计算,请等待...',
|
|
}
|
|
},
|
|
mounted() {
|
|
this.loading = false;
|
|
Vue.prototype.$loading = this.loading
|
|
|
|
//设置默认全局的地图数据
|
|
this.readData();
|
|
|
|
|
|
},
|
|
methods: {
|
|
|
|
//读取页面的下拉菜单的动态数据
|
|
readData() {
|
|
var _this = this;
|
|
|
|
axios.get('./home/tongjijiankangzhidaozhi').then((res) => {
|
|
|
|
window.dataX = res.data.data.dataX;
|
|
window.dataY = res.data.data.dataY;
|
|
console.log('resx', res.data.data.dataX)
|
|
console.log('resy', res.data.data.dataY)
|
|
option.xAxis[0].data = res.data.data.dataX;
|
|
option.series[0].data = res.data.data.dataY;
|
|
|
|
myChart.setOption(option);
|
|
|
|
});
|
|
},
|
|
|
|
}
|
|
})
|
|
|
|
//初始化界面地图层
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|
|
|
|
|
let zoomShow = false;
|
|
//if (dataY.length > 14) {
|
|
// zoomShow = true;
|
|
//} else {
|
|
// zoomShow = false;
|
|
//}
|
|
var option = {
|
|
backgroundColor: "#0D2753",
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
type: "shadow",
|
|
},
|
|
},
|
|
grid: {
|
|
top: "10%",
|
|
right: "5%",
|
|
left: "5%",
|
|
bottom: "10%",
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
data: window.dataX,
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(66, 192, 255, .3)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
margin: 10,
|
|
color: "#05D5FF",
|
|
textStyle: {
|
|
fontSize: 11,
|
|
},
|
|
rotate: "45",
|
|
},
|
|
axisTick: {
|
|
//刻度
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
axisLabel: {
|
|
padding: [3, 0, 0, 0],
|
|
formatter: "{value}",
|
|
color: "rgba(95, 187, 235, 1)",
|
|
textStyle: {
|
|
fontSize: 11,
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: true,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "rgba(66, 192, 255, .3)",
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0)",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
dataZoom: [
|
|
//滚动条
|
|
{
|
|
show: zoomShow,
|
|
type: "slider",
|
|
realtime: true,
|
|
startValue: 0,
|
|
endValue: 14,
|
|
xAxisIndex: [0],
|
|
bottom: "10",
|
|
left: "30",
|
|
height: 10,
|
|
borderColor: "rgba(0,0,0,0)",
|
|
textStyle: {
|
|
color: "#05D5FF",
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
data: window.dataY,
|
|
barWidth: "10",
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(5, 213, 255, 1)", // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0.98,
|
|
color: "rgba(5, 213, 255, 0)", // 100% 处的颜色
|
|
},
|
|
],
|
|
false
|
|
),
|
|
shadowColor: "rgba(5, 213, 255, 1)",
|
|
shadowBlur: 4,
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
lineHeight: 10,
|
|
formatter: "{c}",
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 10,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
|
|
|
|
|
|
/*myChart.clear();*/
|
|
//设定值应用到界面显示地图
|
|
/*myChart.setOption(option);*/
|
|
</script>
|
|
|
|
<!--//设置抽屉组件的高度-->
|
|
<style>
|
|
html{
|
|
height:100%;
|
|
display:table;
|
|
}
|
|
body{
|
|
display: table-cell;
|
|
height: 100%
|
|
}
|
|
.grid-content {
|
|
text-align: center;
|
|
font-size: 24px;
|
|
color: white;
|
|
}
|
|
|
|
</style> |