|
@@ -1,402 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="Chart">
|
|
|
- <div class="fonts">
|
|
|
- 100%
|
|
|
- </div>
|
|
|
- <div class="bottomFonts">
|
|
|
- 道路通达率
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
- <div class="text">
|
|
|
- <div class="left">
|
|
|
- <div class="leftTop">11.2km</div>
|
|
|
- <div class="leftMid">田路总长度</div>
|
|
|
- <div class="leftTop">0.8km</div>
|
|
|
- <div class="leftMid">机耕路长度</div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <div class="rightTop">1.8km</div>
|
|
|
- <div class="rightMid">主路长度</div>
|
|
|
- <div class="rightTop">0.4km</div>
|
|
|
- <div class="rightMid">生产路长度</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </div>
|
|
|
-
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- option: {},
|
|
|
- value: 50,
|
|
|
- angle: 30
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
-
|
|
|
- },
|
|
|
- mounted() {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- /* getCirlPoint(x0, y0, r, angle) {
|
|
|
- let x1 = x0 + r * Math.cos(angle * Math.PI / 180)
|
|
|
- let y1 = y0 + r * Math.sin(angle * Math.PI / 180)
|
|
|
- return {
|
|
|
- x: x1,
|
|
|
- y: y1
|
|
|
- }
|
|
|
- },
|
|
|
- typeCharts() {
|
|
|
- this.option = this.getOption();
|
|
|
- // var chartDom = document.getElementById('echarts');
|
|
|
- // var myChart = echarts.init(chartDom);
|
|
|
- // myChart.setOption(option, true);
|
|
|
- },
|
|
|
- getOption(data) {
|
|
|
- let angle = 30;
|
|
|
- let option = {
|
|
|
- title: {
|
|
|
- text: '{a|' + '企业' + '}',
|
|
|
- x: 'center',
|
|
|
- y: 'center',
|
|
|
- textStyle: {
|
|
|
- rich: {
|
|
|
- a: {
|
|
|
- fontSize: 20,
|
|
|
- color: '#29EEF3'
|
|
|
- },
|
|
|
-
|
|
|
- c: {
|
|
|
- fontSize: 16,
|
|
|
- color: '#ffffff',
|
|
|
- // padding: [5,0]
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- series: [{
|
|
|
- name: "ring5",
|
|
|
- type: 'custom',
|
|
|
- coordinateSystem: "none",
|
|
|
- renderItem: function(params, api) {
|
|
|
- return {
|
|
|
- type: 'arc',
|
|
|
- shape: {
|
|
|
- cx: api.getWidth() / 2,
|
|
|
- cy: api.getHeight() / 2,
|
|
|
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
|
|
|
- startAngle: (0 + angle) * Math.PI / 180,
|
|
|
- endAngle: (90 + angle) * Math.PI / 180
|
|
|
- },
|
|
|
- style: {
|
|
|
- stroke: "#0CD3DB",
|
|
|
- fill: "transparent",
|
|
|
- lineWidth: 1.5
|
|
|
- },
|
|
|
- silent: true
|
|
|
- };
|
|
|
- },
|
|
|
- data: [0]
|
|
|
- },
|
|
|
- {
|
|
|
- name: "ring5",
|
|
|
- type: 'custom',
|
|
|
- coordinateSystem: "none",
|
|
|
- renderItem: function(params, api) {
|
|
|
- return {
|
|
|
- type: 'arc',
|
|
|
- shape: {
|
|
|
- cx: api.getWidth() / 2,
|
|
|
- cy: api.getHeight() / 2,
|
|
|
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.65,
|
|
|
- startAngle: (180 + angle) * Math.PI / 180,
|
|
|
- endAngle: (270 + angle) * Math.PI / 180
|
|
|
- },
|
|
|
- style: {
|
|
|
- stroke: "#0CD3DB",
|
|
|
- fill: "transparent",
|
|
|
- lineWidth: 1.5
|
|
|
- },
|
|
|
- silent: true
|
|
|
- };
|
|
|
- },
|
|
|
- data: [0]
|
|
|
- },
|
|
|
- {
|
|
|
- name: "ring5",
|
|
|
- type: 'custom',
|
|
|
- coordinateSystem: "none",
|
|
|
- renderItem: function(params, api) {
|
|
|
- return {
|
|
|
- type: 'arc',
|
|
|
- shape: {
|
|
|
- cx: api.getWidth() / 2,
|
|
|
- cy: api.getHeight() / 2,
|
|
|
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
|
|
|
- startAngle: (270 + -angle) * Math.PI / 180,
|
|
|
- endAngle: (40 + -angle) * Math.PI / 180
|
|
|
- },
|
|
|
- style: {
|
|
|
- stroke: "#0CD3DB",
|
|
|
- fill: "transparent",
|
|
|
- lineWidth: 1.5
|
|
|
- },
|
|
|
- silent: true
|
|
|
- };
|
|
|
- },
|
|
|
- data: [0]
|
|
|
- },
|
|
|
- {
|
|
|
- name: "ring5",
|
|
|
- type: 'custom',
|
|
|
- coordinateSystem: "none",
|
|
|
- renderItem: function(params, api) {
|
|
|
- return {
|
|
|
- type: 'arc',
|
|
|
- shape: {
|
|
|
- cx: api.getWidth() / 2,
|
|
|
- cy: api.getHeight() / 2,
|
|
|
- r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75,
|
|
|
- startAngle: (90 + -angle) * Math.PI / 180,
|
|
|
- endAngle: (220 + -angle) * Math.PI / 180
|
|
|
- },
|
|
|
- style: {
|
|
|
- stroke: "#0CD3DB",
|
|
|
- fill: "transparent",
|
|
|
- lineWidth: 1.5
|
|
|
- },
|
|
|
- silent: true
|
|
|
- };
|
|
|
- },
|
|
|
- data: [0]
|
|
|
- },
|
|
|
- {
|
|
|
- name: "ring5",
|
|
|
- type: 'custom',
|
|
|
- coordinateSystem: "none",
|
|
|
- renderItem: function(params, api) {
|
|
|
- let x0 = api.getWidth() / 2;
|
|
|
- let y0 = api.getHeight() / 2;
|
|
|
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
|
|
|
- let point = {
|
|
|
- x:30,
|
|
|
- y:40
|
|
|
- }
|
|
|
- return {
|
|
|
- type: 'circle',
|
|
|
- shape: {
|
|
|
- cx: point.x,
|
|
|
- cy: point.y,
|
|
|
- r: 4
|
|
|
- },
|
|
|
- style: {
|
|
|
- stroke: "#0CD3DB", //粉
|
|
|
- fill: "#0CD3DB"
|
|
|
- },
|
|
|
- silent: true
|
|
|
- };
|
|
|
- },
|
|
|
- data: [0]
|
|
|
- },
|
|
|
- {
|
|
|
- name: "ring5", //绿点
|
|
|
- type: 'custom',
|
|
|
- coordinateSystem: "none",
|
|
|
- renderItem: function(params, api) {
|
|
|
- let x0 = api.getWidth() / 2;
|
|
|
- let y0 = api.getHeight() / 2;
|
|
|
- let r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.75;
|
|
|
- let point = {
|
|
|
- x:30,
|
|
|
- y:40
|
|
|
- }
|
|
|
- return {
|
|
|
- type: 'circle',
|
|
|
- shape: {
|
|
|
- cx: point.x,
|
|
|
- cy: point.y,
|
|
|
- r: 4
|
|
|
- },
|
|
|
- style: {
|
|
|
- stroke: "#0CD3DB", //绿
|
|
|
- fill: "#0CD3DB"
|
|
|
- },
|
|
|
- silent: true
|
|
|
- };
|
|
|
- },
|
|
|
- data: [0]
|
|
|
- },
|
|
|
- {
|
|
|
- name: '覆盖率',
|
|
|
- type: 'pie',
|
|
|
- radius: ['58%', '45%'],
|
|
|
- silent: true,
|
|
|
- clockwise: true,
|
|
|
- startAngle: 90,
|
|
|
- z: 0,
|
|
|
- zlevel: 0,
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- position: "center",
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
- data: [{
|
|
|
- value: 79,
|
|
|
- name: "",
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: { // 完成的圆环的颜色
|
|
|
- colorStops: [{
|
|
|
- offset: 0,
|
|
|
- color: '#4FADFD' // 0% 处的颜色
|
|
|
- }, {
|
|
|
- offset: 1,
|
|
|
- color: '#28E8FA' // 100% 处的颜色
|
|
|
- }]
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- value: 100 - this.value,
|
|
|
- name: "",
|
|
|
- label: {
|
|
|
- normal: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: "#173164"
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- name: "",
|
|
|
- type: "gauge",
|
|
|
- radius: "58%",
|
|
|
- center: ['50%', '50%'],
|
|
|
- startAngle: 0,
|
|
|
- endAngle: 359.9,
|
|
|
- splitNumber: 8,
|
|
|
- hoverAnimation: true,
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- length: 60,
|
|
|
- lineStyle: {
|
|
|
- width: 5,
|
|
|
- color: "#061740"
|
|
|
- }
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- pointer: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- opacity: 0
|
|
|
- }
|
|
|
- },
|
|
|
- detail: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- data: [{
|
|
|
- value: 0,
|
|
|
- name: ""
|
|
|
- }]
|
|
|
- },
|
|
|
-
|
|
|
- ]
|
|
|
-
|
|
|
- };
|
|
|
- return option;
|
|
|
- } */
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style scoped>
|
|
|
- .Chart {
|
|
|
-
|
|
|
- height: 130rem;
|
|
|
- width: 130rem;
|
|
|
- background:url("@/assets/images/tongda.png") no-repeat;
|
|
|
- background-size: 100% 100%;
|
|
|
- display: inline-block;
|
|
|
- margin-top: 40rem;
|
|
|
- margin-right: 200rem;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
- .fonts{
|
|
|
- font-size: 24rem;
|
|
|
- text-align: center;
|
|
|
- color: rgb(200, 250, 255);
|
|
|
-
|
|
|
- }
|
|
|
- .bottomFonts{
|
|
|
- margin-top: 90rem;
|
|
|
- font-size: 18rem;
|
|
|
- color: rgb(200, 250, 255);
|
|
|
- }
|
|
|
-
|
|
|
- .text {
|
|
|
- margin-top: 10rem;
|
|
|
- height: 170rem;
|
|
|
- width: 200rem;
|
|
|
- margin-left: 130rem;
|
|
|
- display: inline-block;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .left {
|
|
|
-
|
|
|
- width: 50%;
|
|
|
- float: left;
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .leftTop {
|
|
|
- margin-top: 30rem;
|
|
|
- color: rgb(200, 250, 255);
|
|
|
- font-size: 24rem;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .leftMid {
|
|
|
- color: rgb(200, 250, 255);
|
|
|
- font-size: 16rem;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
-
|
|
|
- width: 50%;
|
|
|
- float: right;
|
|
|
- }
|
|
|
- .rightTop {
|
|
|
- margin-top: 30rem;
|
|
|
- color: rgb(200, 250, 255);
|
|
|
- font-size: 24rem;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
-
|
|
|
- .rightMid {
|
|
|
- color: rgb(200, 250, 255);
|
|
|
- font-size: 16rem;
|
|
|
- }
|
|
|
-
|
|
|
-</style>
|