1364 lines
46 KiB
HTML
1364 lines
46 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<!--
|
|
查询统计
|
|
Created by lyw on 2020/3/10 15:45
|
|
-->
|
|
<style>
|
|
|
|
</style>
|
|
<div id="app" v-cloak style="width: 100%;height: 100%">
|
|
<div style="width: 100%;height: 43.5%;">
|
|
<div id="year_chart" style="height: 100%;box-sizing: border-box;padding: 20px"></div>
|
|
</div>
|
|
<div style="width: 100%;height: 5px;background-color: rgb(240,240,240)"></div>
|
|
<div style="width: 100%;padding: 0 5px;background-color: rgb(240,240,240)">
|
|
<el-date-picker
|
|
@change="changYear"
|
|
style="width: 100%;"
|
|
v-model="year"
|
|
type="year"
|
|
value-format="yyyy"
|
|
placeholder="选择年">
|
|
</el-date-picker>
|
|
</div>
|
|
<div style="width: 100%;height: 5px;background-color: rgb(240,240,240)"></div>
|
|
<div style="width: 100%;height: 52.5%;">
|
|
<el-row style="height: 100%">
|
|
<!-- <el-col :span="8" style="box-sizing: border-box;padding: 20px;height: 100%">
|
|
<!– <div id="lxzb_chart" style="height: 100%;border-right: 2px rgb(240,240,240) solid"></div>–>
|
|
<div id="bj_chart" style="height: 100%;border-right: 2px rgb(240,240,240) solid"></div>
|
|
</el-col>-->
|
|
<!-- <el-col :span="12" style="box-sizing: border-box;padding: 20px;height: 100%">
|
|
<div id="ps_chart" style="height: 100%;border-right: 2px rgb(240,240,240) solid"></div>
|
|
</el-col>-->
|
|
<el-col :span="24" style="box-sizing: border-box;padding: 20px;height: 100%">
|
|
<div id="ms_chart" style="height: 100%;"></div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
|
|
<!--<script>
|
|
|
|
(function (root, factory) {
|
|
if (typeof define === 'function' && define.amd) {
|
|
// AMD. Register as an anonymous module.
|
|
define(['exports', 'echarts'], factory);
|
|
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
|
// CommonJS
|
|
factory(exports, require('echarts'));
|
|
} else {
|
|
// Browser globals
|
|
factory({}, root.echarts);
|
|
}
|
|
}(this, function (exports, echarts) {
|
|
var log = function (msg) {
|
|
if (typeof console !== 'undefined') {
|
|
console && console.error && console.error(msg);
|
|
}
|
|
};
|
|
if (!echarts) {
|
|
log('ECharts is not Loaded');
|
|
return;
|
|
}
|
|
echarts.registerTheme('walden', {
|
|
"color": [
|
|
"#3fb1e3",
|
|
"#6be6c1",
|
|
"#626c91",
|
|
"#a0a7e6",
|
|
"#c4ebad",
|
|
"#96dee8"
|
|
],
|
|
"backgroundColor": "rgba(252,252,252,0)",
|
|
"textStyle": {},
|
|
"title": {
|
|
"textStyle": {
|
|
"color": "#666666"
|
|
},
|
|
"subtextStyle": {
|
|
"color": "#999999"
|
|
}
|
|
},
|
|
"line": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": "2"
|
|
}
|
|
},
|
|
"lineStyle": {
|
|
"normal": {
|
|
"width": "3"
|
|
}
|
|
},
|
|
"symbolSize": "8",
|
|
"symbol": "emptyCircle",
|
|
"smooth": false
|
|
},
|
|
"radar": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": "2"
|
|
}
|
|
},
|
|
"lineStyle": {
|
|
"normal": {
|
|
"width": "3"
|
|
}
|
|
},
|
|
"symbolSize": "8",
|
|
"symbol": "emptyCircle",
|
|
"smooth": false
|
|
},
|
|
"bar": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"barBorderWidth": 0,
|
|
"barBorderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"barBorderWidth": 0,
|
|
"barBorderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"pie": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"scatter": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"boxplot": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"parallel": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"sankey": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"funnel": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"gauge": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"candlestick": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#e6a0d2",
|
|
"color0": "transparent",
|
|
"borderColor": "#e6a0d2",
|
|
"borderColor0": "#3fb1e3",
|
|
"borderWidth": "2"
|
|
}
|
|
}
|
|
},
|
|
"graph": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
},
|
|
"lineStyle": {
|
|
"normal": {
|
|
"width": "1",
|
|
"color": "#cccccc"
|
|
}
|
|
},
|
|
"symbolSize": "8",
|
|
"symbol": "emptyCircle",
|
|
"smooth": false,
|
|
"color": [
|
|
"#3fb1e3",
|
|
"#6be6c1",
|
|
"#626c91",
|
|
"#a0a7e6",
|
|
"#c4ebad",
|
|
"#96dee8"
|
|
],
|
|
"label": {
|
|
"normal": {
|
|
"textStyle": {
|
|
"color": "#ffffff"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"map": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"areaColor": "#eeeeee",
|
|
"borderColor": "#aaaaaa",
|
|
"borderWidth": 0.5
|
|
},
|
|
"emphasis": {
|
|
"areaColor": "rgba(63,177,227,0.25)",
|
|
"borderColor": "#3fb1e3",
|
|
"borderWidth": 1
|
|
}
|
|
},
|
|
"label": {
|
|
"normal": {
|
|
"textStyle": {
|
|
"color": "#ffffff"
|
|
}
|
|
},
|
|
"emphasis": {
|
|
"textStyle": {
|
|
"color": "rgb(63,177,227)"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"geo": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"areaColor": "#eeeeee",
|
|
"borderColor": "#aaaaaa",
|
|
"borderWidth": 0.5
|
|
},
|
|
"emphasis": {
|
|
"areaColor": "rgba(63,177,227,0.25)",
|
|
"borderColor": "#3fb1e3",
|
|
"borderWidth": 1
|
|
}
|
|
},
|
|
"label": {
|
|
"normal": {
|
|
"textStyle": {
|
|
"color": "#ffffff"
|
|
}
|
|
},
|
|
"emphasis": {
|
|
"textStyle": {
|
|
"color": "rgb(63,177,227)"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"categoryAxis": {
|
|
"axisLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": "#cccccc"
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": false,
|
|
"lineStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"axisLabel": {
|
|
"show": true,
|
|
"textStyle": {
|
|
"color": "#999999"
|
|
}
|
|
},
|
|
"splitLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": [
|
|
"#eeeeee"
|
|
]
|
|
}
|
|
},
|
|
"splitArea": {
|
|
"show": false,
|
|
"areaStyle": {
|
|
"color": [
|
|
"rgba(250,250,250,0.05)",
|
|
"rgba(200,200,200,0.02)"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"valueAxis": {
|
|
"axisLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": "#cccccc"
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": false,
|
|
"lineStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"axisLabel": {
|
|
"show": true,
|
|
"textStyle": {
|
|
"color": "#999999"
|
|
}
|
|
},
|
|
"splitLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": [
|
|
"#eeeeee"
|
|
]
|
|
}
|
|
},
|
|
"splitArea": {
|
|
"show": false,
|
|
"areaStyle": {
|
|
"color": [
|
|
"rgba(250,250,250,0.05)",
|
|
"rgba(200,200,200,0.02)"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"logAxis": {
|
|
"axisLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": "#cccccc"
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": false,
|
|
"lineStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"axisLabel": {
|
|
"show": true,
|
|
"textStyle": {
|
|
"color": "#999999"
|
|
}
|
|
},
|
|
"splitLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": [
|
|
"#eeeeee"
|
|
]
|
|
}
|
|
},
|
|
"splitArea": {
|
|
"show": false,
|
|
"areaStyle": {
|
|
"color": [
|
|
"rgba(250,250,250,0.05)",
|
|
"rgba(200,200,200,0.02)"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"timeAxis": {
|
|
"axisLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": "#cccccc"
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": false,
|
|
"lineStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"axisLabel": {
|
|
"show": true,
|
|
"textStyle": {
|
|
"color": "#999999"
|
|
}
|
|
},
|
|
"splitLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": [
|
|
"#eeeeee"
|
|
]
|
|
}
|
|
},
|
|
"splitArea": {
|
|
"show": false,
|
|
"areaStyle": {
|
|
"color": [
|
|
"rgba(250,250,250,0.05)",
|
|
"rgba(200,200,200,0.02)"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"toolbox": {
|
|
"iconStyle": {
|
|
"normal": {
|
|
"borderColor": "#999999"
|
|
},
|
|
"emphasis": {
|
|
"borderColor": "#666666"
|
|
}
|
|
}
|
|
},
|
|
"legend": {
|
|
"textStyle": {
|
|
"color": "#999999"
|
|
}
|
|
},
|
|
"tooltip": {
|
|
"axisPointer": {
|
|
"lineStyle": {
|
|
"color": "#cccccc",
|
|
"width": 1
|
|
},
|
|
"crossStyle": {
|
|
"color": "#cccccc",
|
|
"width": 1
|
|
}
|
|
}
|
|
},
|
|
"timeline": {
|
|
"lineStyle": {
|
|
"color": "#626c91",
|
|
"width": 1
|
|
},
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#626c91",
|
|
"borderWidth": 1
|
|
},
|
|
"emphasis": {
|
|
"color": "#626c91"
|
|
}
|
|
},
|
|
"controlStyle": {
|
|
"normal": {
|
|
"color": "#626c91",
|
|
"borderColor": "#626c91",
|
|
"borderWidth": 0.5
|
|
},
|
|
"emphasis": {
|
|
"color": "#626c91",
|
|
"borderColor": "#626c91",
|
|
"borderWidth": 0.5
|
|
}
|
|
},
|
|
"checkpointStyle": {
|
|
"color": "#3fb1e3",
|
|
"borderColor": "rgba(63,177,227,0.15)"
|
|
},
|
|
"label": {
|
|
"normal": {
|
|
"textStyle": {
|
|
"color": "#626c91"
|
|
}
|
|
},
|
|
"emphasis": {
|
|
"textStyle": {
|
|
"color": "#626c91"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"visualMap": {
|
|
"color": [
|
|
"#2a99c9",
|
|
"#afe8ff"
|
|
]
|
|
},
|
|
"dataZoom": {
|
|
"backgroundColor": "rgba(255,255,255,0)",
|
|
"dataBackgroundColor": "rgba(222,222,222,1)",
|
|
"fillerColor": "rgba(114,230,212,0.25)",
|
|
"handleColor": "#cccccc",
|
|
"handleSize": "100%",
|
|
"textStyle": {
|
|
"color": "#999999"
|
|
}
|
|
},
|
|
"markPoint": {
|
|
"label": {
|
|
"normal": {
|
|
"textStyle": {
|
|
"color": "#ffffff"
|
|
}
|
|
},
|
|
"emphasis": {
|
|
"textStyle": {
|
|
"color": "#ffffff"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}));
|
|
|
|
</script>
|
|
<script>
|
|
(function (root, factory) {
|
|
if (typeof define === 'function' && define.amd) {
|
|
// AMD. Register as an anonymous module.
|
|
define(['exports', 'echarts'], factory);
|
|
} else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
|
|
// CommonJS
|
|
factory(exports, require('echarts'));
|
|
} else {
|
|
// Browser globals
|
|
factory({}, root.echarts);
|
|
}
|
|
}(this, function (exports, echarts) {
|
|
var log = function (msg) {
|
|
if (typeof console !== 'undefined') {
|
|
console && console.error && console.error(msg);
|
|
}
|
|
};
|
|
if (!echarts) {
|
|
log('ECharts is not Loaded');
|
|
return;
|
|
}
|
|
echarts.registerTheme('shine', {
|
|
"color": [
|
|
"#c12e34",
|
|
"#e6b600",
|
|
"#0098d9",
|
|
"#2b821d",
|
|
"#005eaa",
|
|
"#339ca8",
|
|
"#cda819",
|
|
"#32a487"
|
|
],
|
|
"backgroundColor": "rgba(0,0,0,0)",
|
|
"textStyle": {},
|
|
"title": {
|
|
"textStyle": {
|
|
"color": "#333333"
|
|
},
|
|
"subtextStyle": {
|
|
"color": "#aaaaaa"
|
|
}
|
|
},
|
|
"line": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 1
|
|
}
|
|
},
|
|
"lineStyle": {
|
|
"normal": {
|
|
"width": 2
|
|
}
|
|
},
|
|
"symbolSize": 4,
|
|
"symbol": "emptyCircle",
|
|
"smooth": false
|
|
},
|
|
"radar": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 1
|
|
}
|
|
},
|
|
"lineStyle": {
|
|
"normal": {
|
|
"width": 2
|
|
}
|
|
},
|
|
"symbolSize": 4,
|
|
"symbol": "emptyCircle",
|
|
"smooth": false
|
|
},
|
|
"bar": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"barBorderWidth": 0,
|
|
"barBorderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"barBorderWidth": 0,
|
|
"barBorderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"pie": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"scatter": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"boxplot": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"parallel": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"sankey": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"funnel": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"gauge": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
},
|
|
"emphasis": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
}
|
|
},
|
|
"candlestick": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#c12e34",
|
|
"color0": "#2b821d",
|
|
"borderColor": "#c12e34",
|
|
"borderColor0": "#2b821d",
|
|
"borderWidth": 1
|
|
}
|
|
}
|
|
},
|
|
"graph": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"borderWidth": 0,
|
|
"borderColor": "#ccc"
|
|
}
|
|
},
|
|
"lineStyle": {
|
|
"normal": {
|
|
"width": 1,
|
|
"color": "#aaaaaa"
|
|
}
|
|
},
|
|
"symbolSize": 4,
|
|
"symbol": "emptyCircle",
|
|
"smooth": false,
|
|
"color": [
|
|
"#c12e34",
|
|
"#e6b600",
|
|
"#0098d9",
|
|
"#2b821d",
|
|
"#005eaa",
|
|
"#339ca8",
|
|
"#cda819",
|
|
"#32a487"
|
|
],
|
|
"label": {
|
|
"normal": {
|
|
"textStyle": {
|
|
"color": "#eeeeee"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"map": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"areaColor": "#dddddd",
|
|
"borderColor": "#eeeeee",
|
|
"borderWidth": 0.5
|
|
},
|
|
"emphasis": {
|
|
"areaColor": "rgba(230,182,0,1)",
|
|
"borderColor": "#dddddd",
|
|
"borderWidth": 1
|
|
}
|
|
},
|
|
"label": {
|
|
"normal": {
|
|
"textStyle": {
|
|
"color": "#c12e34"
|
|
}
|
|
},
|
|
"emphasis": {
|
|
"textStyle": {
|
|
"color": "rgb(193,46,52)"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"geo": {
|
|
"itemStyle": {
|
|
"normal": {
|
|
"areaColor": "#dddddd",
|
|
"borderColor": "#eeeeee",
|
|
"borderWidth": 0.5
|
|
},
|
|
"emphasis": {
|
|
"areaColor": "rgba(230,182,0,1)",
|
|
"borderColor": "#dddddd",
|
|
"borderWidth": 1
|
|
}
|
|
},
|
|
"label": {
|
|
"normal": {
|
|
"textStyle": {
|
|
"color": "#c12e34"
|
|
}
|
|
},
|
|
"emphasis": {
|
|
"textStyle": {
|
|
"color": "rgb(193,46,52)"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"categoryAxis": {
|
|
"axisLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"axisLabel": {
|
|
"show": true,
|
|
"textStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"splitLine": {
|
|
"show": false,
|
|
"lineStyle": {
|
|
"color": [
|
|
"#ccc"
|
|
]
|
|
}
|
|
},
|
|
"splitArea": {
|
|
"show": false,
|
|
"areaStyle": {
|
|
"color": [
|
|
"rgba(250,250,250,0.3)",
|
|
"rgba(200,200,200,0.3)"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"valueAxis": {
|
|
"axisLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"axisLabel": {
|
|
"show": true,
|
|
"textStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"splitLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": [
|
|
"#ccc"
|
|
]
|
|
}
|
|
},
|
|
"splitArea": {
|
|
"show": false,
|
|
"areaStyle": {
|
|
"color": [
|
|
"rgba(250,250,250,0.3)",
|
|
"rgba(200,200,200,0.3)"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"logAxis": {
|
|
"axisLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"axisLabel": {
|
|
"show": true,
|
|
"textStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"splitLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": [
|
|
"#ccc"
|
|
]
|
|
}
|
|
},
|
|
"splitArea": {
|
|
"show": false,
|
|
"areaStyle": {
|
|
"color": [
|
|
"rgba(250,250,250,0.3)",
|
|
"rgba(200,200,200,0.3)"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"timeAxis": {
|
|
"axisLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"axisTick": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"axisLabel": {
|
|
"show": true,
|
|
"textStyle": {
|
|
"color": "#333"
|
|
}
|
|
},
|
|
"splitLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": [
|
|
"#ccc"
|
|
]
|
|
}
|
|
},
|
|
"splitArea": {
|
|
"show": false,
|
|
"areaStyle": {
|
|
"color": [
|
|
"rgba(250,250,250,0.3)",
|
|
"rgba(200,200,200,0.3)"
|
|
]
|
|
}
|
|
}
|
|
},
|
|
"toolbox": {
|
|
"iconStyle": {
|
|
"normal": {
|
|
"borderColor": "#06467c"
|
|
},
|
|
"emphasis": {
|
|
"borderColor": "#4187c2"
|
|
}
|
|
}
|
|
},
|
|
"legend": {
|
|
"textStyle": {
|
|
"color": "#333333"
|
|
}
|
|
},
|
|
"tooltip": {
|
|
"axisPointer": {
|
|
"lineStyle": {
|
|
"color": "#cccccc",
|
|
"width": 1
|
|
},
|
|
"crossStyle": {
|
|
"color": "#cccccc",
|
|
"width": 1
|
|
}
|
|
}
|
|
},
|
|
"timeline": {
|
|
"lineStyle": {
|
|
"color": "#005eaa",
|
|
"width": 1
|
|
},
|
|
"itemStyle": {
|
|
"normal": {
|
|
"color": "#005eaa",
|
|
"borderWidth": 1
|
|
},
|
|
"emphasis": {
|
|
"color": "#005eaa"
|
|
}
|
|
},
|
|
"controlStyle": {
|
|
"normal": {
|
|
"color": "#005eaa",
|
|
"borderColor": "#005eaa",
|
|
"borderWidth": 0.5
|
|
},
|
|
"emphasis": {
|
|
"color": "#005eaa",
|
|
"borderColor": "#005eaa",
|
|
"borderWidth": 0.5
|
|
}
|
|
},
|
|
"checkpointStyle": {
|
|
"color": "#005eaa",
|
|
"borderColor": "rgba(49,107,194,0.5)"
|
|
},
|
|
"label": {
|
|
"normal": {
|
|
"textStyle": {
|
|
"color": "#005eaa"
|
|
}
|
|
},
|
|
"emphasis": {
|
|
"textStyle": {
|
|
"color": "#005eaa"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"visualMap": {
|
|
"color": [
|
|
"#1790cf",
|
|
"#a2d4e6"
|
|
]
|
|
},
|
|
"dataZoom": {
|
|
"backgroundColor": "rgba(47,69,84,0)",
|
|
"dataBackgroundColor": "rgba(47,69,84,0.3)",
|
|
"fillerColor": "rgba(167,183,204,0.4)",
|
|
"handleColor": "#a7b7cc",
|
|
"handleSize": "100%",
|
|
"textStyle": {
|
|
"color": "#333333"
|
|
}
|
|
},
|
|
"markPoint": {
|
|
"label": {
|
|
"normal": {
|
|
"textStyle": {
|
|
"color": "#eeeeee"
|
|
}
|
|
},
|
|
"emphasis": {
|
|
"textStyle": {
|
|
"color": "#eeeeee"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}));
|
|
</script>-->
|
|
<script>
|
|
const vue = new Vue({
|
|
el: '#app',
|
|
data: function () {
|
|
var self = this
|
|
return {
|
|
year: new Date().getFullYear().toString(),
|
|
}
|
|
},
|
|
methods: {
|
|
changYear: function () {
|
|
var self = this
|
|
self.getData3()
|
|
self.getData4()
|
|
self.getData5()
|
|
},
|
|
getData1: function () {
|
|
var self = this
|
|
$.get("/platform/zgfw/jzgznbmdj/sjkb/getData1", function (data) {
|
|
if (data.code == 0) {
|
|
var dom = document.getElementById("year_chart");
|
|
var myChart = echarts.init(dom, 'shine');
|
|
var app = {};
|
|
option = null;
|
|
option = {
|
|
title: {
|
|
text: '年度报名趋势',
|
|
subtext: '',
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
legend: {
|
|
data: data.data.names
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
grid: {
|
|
left: '4%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
name: '年份',
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: data.data.years
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: '人数',
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: data.data.arr
|
|
};
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
myChart.on('click', function (params) {
|
|
self.year = params.name
|
|
// self.getData2()
|
|
self.getData3()
|
|
self.getData4()
|
|
self.getData5()
|
|
});
|
|
}
|
|
}
|
|
})
|
|
},
|
|
// getData2: function () {
|
|
// var self = this
|
|
// $.get("/platform/zgfw/jzgznbmdj/sjkb/getData2", {'year': self.year}, function (data) {
|
|
// if (data.code == 0) {
|
|
// var dom = document.getElementById("lxzb_chart");
|
|
// var myChart = echarts.init(dom, 'shine');
|
|
// option = {
|
|
// title: {
|
|
// text: self.year + '年报名类型占比',
|
|
// subtext: '',
|
|
// left: 'center'
|
|
// },
|
|
// tooltip: {
|
|
// trigger: 'item',
|
|
// formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
// },
|
|
//
|
|
// series: [
|
|
// {
|
|
// name: '人数占比',
|
|
// type: 'pie',
|
|
// radius: '55%',
|
|
// center: ['50%', '55%'],
|
|
// data: data.data.data,
|
|
// emphasis: {
|
|
// itemStyle: {
|
|
// shadowBlur: 10,
|
|
// shadowOffsetX: 0,
|
|
// shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
// }
|
|
// }
|
|
// }
|
|
// ]
|
|
// };
|
|
// if (option && typeof option === "object") {
|
|
// myChart.setOption(option, true);
|
|
// }
|
|
// }
|
|
// })
|
|
// },
|
|
getData3: function () {
|
|
var self = this
|
|
$.get("/platform/zgfw/jzgznbmdj/sjkb/getData3", {'year': self.year}, function (data) {
|
|
if (data.code == 0) {
|
|
var dom = document.getElementById("bj_chart");
|
|
var myChart = echarts.init(dom, 'shine');
|
|
option = {
|
|
title: {
|
|
text: self.year + '年幼儿园申请班级占比',
|
|
subtext: '',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
|
|
series: [
|
|
{
|
|
name: '人数占比',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '55%'],
|
|
data: data.data,
|
|
label: {
|
|
align: 'left',
|
|
normal: {
|
|
formatter: function (v) {
|
|
return v.name.length > 5 ? v.name.substr(0, 5) + "..." : v.name;
|
|
},
|
|
textStyle: {
|
|
// fontSize : 8
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getData4: function () {
|
|
var self = this
|
|
$.get("/platform/zgfw/jzgznbmdj/sjkb/getData4", {'year': self.year}, function (data) {
|
|
if (data.code == 0) {
|
|
var dom = document.getElementById("ps_chart");
|
|
var myChart = echarts.init(dom, 'shine');
|
|
option = {
|
|
title: {
|
|
text: self.year + '年幼升小申请学校占比',
|
|
subtext: '',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
series: [
|
|
{
|
|
name: '人数占比',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '55%'],
|
|
data: data.data,
|
|
formatter: function (name) {
|
|
return name.length > 5 ? name.substr(0, 5) + "..." : name;
|
|
},
|
|
label: {
|
|
align: 'left',
|
|
normal: {
|
|
formatter: function (v) {
|
|
return v.name.length > 5 ? v.name.substr(0, 5) + "..." : v.name;
|
|
},
|
|
textStyle: {
|
|
// fontSize : 8
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
getData5: function () {
|
|
var self = this
|
|
$.get("/platform/zgfw/jzgznbmdj/sjkb/getData5", {'year': self.year}, function (data) {
|
|
if (data.code == 0) {
|
|
var dom = document.getElementById("ms_chart");
|
|
var myChart = echarts.init(dom, 'shine');
|
|
option = {
|
|
title: {
|
|
text: self.year + '年小升初申请学校占比',
|
|
subtext: '',
|
|
left: 'center'
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
|
|
series: [
|
|
{
|
|
name: '人数占比',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '55%'],
|
|
label: {
|
|
align: 'left',
|
|
normal: {
|
|
formatter: function (v) {
|
|
return v.name.length > 5 ? v.name.substr(0, 5) + "..." : v.name;
|
|
},
|
|
textStyle: {
|
|
// fontSize : 8
|
|
}
|
|
}
|
|
},
|
|
data: data.data,
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
},
|
|
created: function () {
|
|
this.getData1();
|
|
// this.getData2();
|
|
this.getData3();
|
|
this.getData4();
|
|
this.getData5();
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#--> |