|
|
@@ -0,0 +1,134 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>实验完成率</title>
|
|
|
+ <link href="#(path)/static/js/element-ui.css" rel="stylesheet"/>
|
|
|
+ <style>
|
|
|
+ body {background-color: #f1f1f4;}
|
|
|
+ .bar{height:600px;margin-top: 50px;}
|
|
|
+ [v-cloak] {display: none;}
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<div id="app" v-cloak>
|
|
|
+ <el-form :inline="true" label-width="auto">
|
|
|
+ <el-form-item label="状态" prop="state">
|
|
|
+ <el-select placeholder="请选择实验部门" clearable>
|
|
|
+ <el-option label="矿山机械" :value="0"></el-option>
|
|
|
+ <el-option label="矿山机械" :value="0"></el-option>
|
|
|
+ <el-option label="矿山机械" :value="0"></el-option>
|
|
|
+ <el-option label="矿山机械" :value="0"></el-option>
|
|
|
+ <el-option label="矿山机械" :value="0"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="时间范围">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="created"
|
|
|
+ style="width: 240px"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" icon="el-icon-search">搜索</el-button>
|
|
|
+ <el-button icon="el-icon-refresh">重置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div id="bar" class="bar"></div>
|
|
|
+</div>
|
|
|
+</body>
|
|
|
+<script src="#(path)/static/js/jquery.min.js"></script>
|
|
|
+<script src="#(path)/static/js/layer/layer.js"></script>
|
|
|
+<script src="#(path)/static/js/vue.min.js"></script>
|
|
|
+<script src="#(path)/static/js/common.js"></script>
|
|
|
+<script src="#(path)/static/js/echarts.min.js"></script>
|
|
|
+<script src="#(path)/static/js/element-ui.js"></script>
|
|
|
+<script>
|
|
|
+ let vm = new Vue({
|
|
|
+ el: "#app",
|
|
|
+ data: {
|
|
|
+ created:[]
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.initEcharts();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initEcharts() {
|
|
|
+ let myChart = echarts.init(document.getElementById('bar'));
|
|
|
+ let option = {
|
|
|
+ title: [{
|
|
|
+ text: '实验完成率',
|
|
|
+ left: 'center',
|
|
|
+ top: 0,
|
|
|
+ textStyle: {
|
|
|
+ fontSize: '15',
|
|
|
+ }
|
|
|
+
|
|
|
+ }],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'item',
|
|
|
+ formatter: "{a} <br/>{b}: {c} ({d}%)",
|
|
|
+ position: function (p) { //其中p为当前鼠标的位置
|
|
|
+ return [p[0] + 10, p[1] - 10];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ top: '76%',
|
|
|
+ itemWidth: 10,
|
|
|
+ itemHeight: 10,
|
|
|
+ data: ['层级1', '层级2', '层级3', '层级4', '层级5', '层级6'],
|
|
|
+ textStyle: {
|
|
|
+ fontSize: '12',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ name: '兴趣分布',
|
|
|
+ type: 'pie',
|
|
|
+ center: ['50%', '42%'],
|
|
|
+ radius: ['40%', '60%'],
|
|
|
+ label: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ data: [{
|
|
|
+ value: 5,
|
|
|
+ name: '层级1'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: '层级2'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 6,
|
|
|
+ name: '层级3'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 2,
|
|
|
+ name: '层级4'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: '层级5'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 1,
|
|
|
+ name: '层级6'
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+ window.addEventListener("resize", function () {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+</script>
|
|
|
+</html>
|
xiaoshushu