|
|
@@ -6,8 +6,37 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="content_hysy">
|
|
|
- <div id="dial_watch_hysy">
|
|
|
-
|
|
|
+ <div class="space">
|
|
|
+ <div class="lt_box box">
|
|
|
+ <div class="text">
|
|
|
+ <p>计划出让海域</p>
|
|
|
+ <span>66.23</span>公顷
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="lb_box box">
|
|
|
+ <div class="text">
|
|
|
+ <p>计划出让海域</p>
|
|
|
+ <span>66.23</span>公顷
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div id="dial_watch_hysy">
|
|
|
+ <div class="text">
|
|
|
+ <p>计划出让海域</p>
|
|
|
+ <span>66.23</span>公顷
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rt_box box">
|
|
|
+ <div class="text">
|
|
|
+ <p>计划出让海域</p>
|
|
|
+ <span>66.23</span>公顷
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="rb_box box">
|
|
|
+ <div class="text">
|
|
|
+ <p>计划出让海域</p>
|
|
|
+ <span>66.23</span>公顷
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div id="hysyEchart">
|
|
|
|
|
|
@@ -54,8 +83,8 @@ export default {
|
|
|
var myChart = window.echarts.init(dom);
|
|
|
// Mock数据
|
|
|
const mockData = {
|
|
|
- xdata: ['渔业用海', '工业用海', '交通运输用海', '旅游娱乐用海', '海底工程用海', '排污倾倒用海', '造地工程用海', '特殊用海', '其它用海'],
|
|
|
-
|
|
|
+ xdata: ['渔业用海', '工业用海', '交通运输用海', '旅游娱乐用海', '海底工程用海', '排污倾倒用海', '造地工程用海', '特殊用海', '其它用海'],
|
|
|
+
|
|
|
result: [
|
|
|
{ name: '计划收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 10) * 1000).toFixed(0)) },
|
|
|
{ name: '完成收储', data: [...new Array(33)].map((item, i) => +(Math.random(0, 0.5) * 1000).toFixed(0)) },
|
|
|
@@ -190,11 +219,203 @@ export default {
|
|
|
myChart.setOption(option);
|
|
|
|
|
|
},
|
|
|
+ init_dial_watch_hysy() {
|
|
|
+
|
|
|
+ var dom = document.getElementById("dial_watch_hysy");
|
|
|
+ var myChart = window.echarts.init(dom);
|
|
|
+ var demoData = {
|
|
|
+ name: '城镇化率',
|
|
|
+ value: 60,
|
|
|
+ };
|
|
|
+ let option = {
|
|
|
+ backgroundColor: 'rgba(0,0,0,0)',
|
|
|
+ title: {
|
|
|
+ text: '{num|' + demoData.value + '%}',
|
|
|
+ x: '50%',
|
|
|
+ y: '70%',
|
|
|
+ textAlign: 'center',
|
|
|
+ textStyle: {
|
|
|
+ rich: {
|
|
|
+ num: {
|
|
|
+ fontWeight: '900',
|
|
|
+ color: 'rgba(249, 180, 71, 1)',
|
|
|
+ fontFamily: '微软雅黑',
|
|
|
+ fontSize: 18,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ grid: { top: '0%', left: '0%' },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ type: 'gauge',
|
|
|
+ radius: '90%', // 1行3个
|
|
|
+ center: ['50%', '70%'],
|
|
|
+ splitNumber: 10,
|
|
|
+ // min: 0,
|
|
|
+ max: 100,
|
|
|
+ startAngle: 220,
|
|
|
+ endAngle: -44,
|
|
|
+ z: 99,
|
|
|
+ // 线
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
+ color: [[1, 'rgba(255,255,255,0)']],
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ formatter: '{value}',
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 50,
|
|
|
+ name: 'SCORE',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ //刻度标签。
|
|
|
+ axisTick: {
|
|
|
+ show: true,
|
|
|
+ splitNumber: 6, //刻度的段落数
|
|
|
+ lineStyle: {
|
|
|
+ color: '#ccc',
|
|
|
+ width: 1, //刻度的宽度
|
|
|
+ shadowColor: 'RGBA(60, 139, 232, 0)',
|
|
|
+ shadowBlur: 2,
|
|
|
+ },
|
|
|
+ length: 3, //刻度的长度
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ //文字和刻度的偏移量
|
|
|
+ show: true,
|
|
|
+ length: 1, //长度
|
|
|
+ lineStyle: {
|
|
|
+ color: '#ccc',
|
|
|
+ width: 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ // //刻度线文字
|
|
|
+ axisLabel: {
|
|
|
+ show: false,
|
|
|
+ color: '#ccc',
|
|
|
+ fontSize: 1,
|
|
|
+ distance: -30,
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: demoData.value,
|
|
|
+ name: 'SCORE',
|
|
|
+ itemStyle: {
|
|
|
+ color: 'rgba(73, 148, 236, 1)',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pointer: {
|
|
|
+ show: true,
|
|
|
+ length: '40%',
|
|
|
+ radius: '50%',
|
|
|
+ width: 5, //指针粗细
|
|
|
+ offsetCenter: [0, -10]
|
|
|
+ },
|
|
|
+ detail: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ // 仪表盘标题。
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: demoData.name,
|
|
|
+ type: 'pie',
|
|
|
+ radius: ['65%', '50%'],
|
|
|
+ center: ['50%', '70%'],
|
|
|
+ startAngle: 220,
|
|
|
+ endAngle: -44,
|
|
|
+ color: [
|
|
|
+ {
|
|
|
+ type: 'linear',
|
|
|
+ x: 1,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 0,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(62, 147, 244, 0.3)', // 0% 处的颜色
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(62, 147, 244, 1)', // 100% 处的颜色
|
|
|
+ },
|
|
|
+
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ 'transparent',
|
|
|
+ ],
|
|
|
+ hoverAnimation: true,
|
|
|
+ legendHoverLink: false,
|
|
|
+ z: 10,
|
|
|
+ labelLine: {
|
|
|
+ normal: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 60,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 20,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'pie',
|
|
|
+ hoverAnimation: false,
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ center: ['50%', '70%'],
|
|
|
+ radius: ['0%', '60%'],
|
|
|
+ startAngle: 230,
|
|
|
+ data: [
|
|
|
+ {
|
|
|
+ value: 100,
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: {
|
|
|
+ type: 'radial',
|
|
|
+ x: 0.5,
|
|
|
+ y: 0.5,
|
|
|
+ r: 0.5,
|
|
|
+ colorStops: [
|
|
|
+ { offset: 0, color: 'rgba(0,0,0,0)' },
|
|
|
+ { offset: 1, color: 'rgba(0,0,0,0)' },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ opacity: 0.2,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: 100,
|
|
|
+ color: 'transparent',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ myChart.setOption(option);
|
|
|
+
|
|
|
+ }
|
|
|
},
|
|
|
mounted() {
|
|
|
const that = this;
|
|
|
this.$nextTick((res) => {
|
|
|
that.init_hysyEchart();
|
|
|
+ that.init_dial_watch_hysy();
|
|
|
})
|
|
|
},
|
|
|
beforeUpdate() { }, //生命周期 - 更新之前
|
|
|
@@ -255,15 +476,95 @@ export default {
|
|
|
top: 40rem;
|
|
|
|
|
|
#dial_watch_hysy {
|
|
|
- border: 1px red solid;
|
|
|
- width: 29rem;
|
|
|
- height: 7rem;
|
|
|
+ // border: 1px red solid;
|
|
|
+ width: 26rem;
|
|
|
+ height: 8.5rem;
|
|
|
+ position: relative;
|
|
|
+ left: 3rem;
|
|
|
+ bottom: 2rem;
|
|
|
}
|
|
|
|
|
|
#hysyEchart {
|
|
|
- border: 1px red solid;
|
|
|
+ // border: 1px red solid;
|
|
|
width: 34rem;
|
|
|
height: 9rem;
|
|
|
}
|
|
|
+
|
|
|
+ .box {
|
|
|
+ width: 10rem;
|
|
|
+ height: 5rem;
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .lt_box {
|
|
|
+
|
|
|
+ position: fixed;
|
|
|
+ background: no-repeat;
|
|
|
+ background-size: 101% 70%;
|
|
|
+ background-image: url("/static/images/overview/ltback.png");
|
|
|
+ left: 57rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .lb_box {
|
|
|
+
|
|
|
+ position: fixed;
|
|
|
+ background: no-repeat;
|
|
|
+ background-size: 101% 70%;
|
|
|
+ background-image: url("/static/images/overview/lbback.png");
|
|
|
+ left: 57rem;
|
|
|
+ top: 44rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rt_box {
|
|
|
+ position: fixed;
|
|
|
+ background: no-repeat;
|
|
|
+ background-size: 101% 70%;
|
|
|
+ background-image: url("/static/images/overview/rtback.png");
|
|
|
+ left: 76rem;
|
|
|
+ top: 40rem;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ margin-left: 4rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rb_box {
|
|
|
+ position: fixed;
|
|
|
+ background: no-repeat;
|
|
|
+ background-size: 101% 70%;
|
|
|
+ background-image: url("/static/images/overview/rbback.png");
|
|
|
+ left: 76rem;
|
|
|
+ top: 44rem;
|
|
|
+ z-index: 100;
|
|
|
+
|
|
|
+ .text {
|
|
|
+ margin-left: 4rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.text {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100px;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-left: 15px;
|
|
|
+
|
|
|
+ p {
|
|
|
+ font-kerning: normal;
|
|
|
+ font-family: "Arial Negreta", "Arial Normal", "Arial";
|
|
|
+ font-weight: 700;
|
|
|
+ font-style: normal;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-family: "Arial Negreta", "Arial Normal", "Arial";
|
|
|
+ font-weight: 700;
|
|
|
+ font-style: normal;
|
|
|
+ color: #68f4fb;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
zpf
