|
|
@@ -1,5 +1,31 @@
|
|
|
<template>
|
|
|
+ <view>
|
|
|
+
|
|
|
<web-view :src="url" class="map"></web-view>
|
|
|
+ <view class="charts-box">
|
|
|
+ <qiun-data-charts
|
|
|
+ @getIndex='getdata'
|
|
|
+ type="ring"
|
|
|
+ :opts='ringoptions'
|
|
|
+ :chartData="Ring"
|
|
|
+ background= "#24262D"
|
|
|
+ />
|
|
|
+ <qiun-data-charts
|
|
|
+ @getIndex='getdata'
|
|
|
+ type="ring"
|
|
|
+ :opts='ringoptions1'
|
|
|
+ :chartData="Ring1"
|
|
|
+ background= "#24262D"
|
|
|
+ />
|
|
|
+ <qiun-data-charts
|
|
|
+ @getIndex='getdata'
|
|
|
+ type="column"
|
|
|
+ :chartData="chartData"
|
|
|
+ background="none"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<!-- <web-view v-if="flag" :src="url"></web-view> -->
|
|
|
<!-- <iframe v-else :src="url" width="340" height="360" allowfullscreen allow="autoplay; fullscreen; microphone;"></iframe> -->
|
|
|
</template>
|
|
|
@@ -10,7 +36,161 @@
|
|
|
return {
|
|
|
// url:"https://datav.aliyuncs.com/share/235518097ffd673bc1eb05011b9a02b6",
|
|
|
url: 'http://192.168.1.116:8011',
|
|
|
- flag: true
|
|
|
+ flag: true,
|
|
|
+ chartData:{
|
|
|
+ categories:['2016','2017','2018','2019','2020','2021'],
|
|
|
+ series:[{
|
|
|
+ name:'目标值',
|
|
|
+ data:[35, 36, 31, 33, 13, 34]
|
|
|
+ },{
|
|
|
+ name:'完成量',
|
|
|
+ data:[18, 27, 21, 24, 6, 28]
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ ringoptions:{
|
|
|
+ "type": "ring",
|
|
|
+ "canvasId": "",
|
|
|
+ "canvas2d": false,
|
|
|
+ "background": "#24262D",
|
|
|
+ "borderColor":'#24262D',
|
|
|
+ "animation": true,
|
|
|
+ "timing": "easeOut",
|
|
|
+ "duration": 1000,
|
|
|
+ "color": [
|
|
|
+ '#75d1f4', '#3a3b40'
|
|
|
+ ],
|
|
|
+ "rotate": false,
|
|
|
+ "errorReload": true,
|
|
|
+ "fontSize": 13,
|
|
|
+ "fontColor": "#666666",
|
|
|
+ "enableScroll": false,
|
|
|
+ "touchMoveLimit": 60,
|
|
|
+ "enableMarkLine": false,
|
|
|
+ "dataLabel": true,
|
|
|
+ "dataPointShape": false,
|
|
|
+ "dataPointShapeType": "solid",
|
|
|
+ "tapLegend": true,
|
|
|
+ "legend": {
|
|
|
+ "show": true,
|
|
|
+ "position": "top",
|
|
|
+ "padding": 5,
|
|
|
+ "margin": 5,
|
|
|
+ "backgroundColor": "rgba(0,0,0,0)",
|
|
|
+ "borderColor": "rgba(0,0,0,0)",
|
|
|
+ "borderWidth": 0,
|
|
|
+ "fontSize": 13,
|
|
|
+ "fontColor": "#fff",
|
|
|
+ "lineHeight": 25,
|
|
|
+ "hiddenColor": "#CECECE",
|
|
|
+ "itemGap": 10
|
|
|
+ },
|
|
|
+ "title": {
|
|
|
+ "name": "总量合计",
|
|
|
+ "fontSize": 15,
|
|
|
+ "color": "#fff",
|
|
|
+ },
|
|
|
+ "subtitle": {
|
|
|
+ "name": "70%",
|
|
|
+ "fontSize": 25,
|
|
|
+ "color": "#fff",
|
|
|
+ },
|
|
|
+ "extra": {
|
|
|
+ "ring": {
|
|
|
+ "ringWidth": 20,
|
|
|
+ "centerColor": "#24262D",
|
|
|
+ "activeOpacity": 0.5,
|
|
|
+ "activeRadius": 10,
|
|
|
+ "offsetAngle": 0,
|
|
|
+ "customRadius": 0,
|
|
|
+ "labelWidth": 15,
|
|
|
+ "border": true,
|
|
|
+ "borderWidth": 3,
|
|
|
+ "borderColor": "#24262D",
|
|
|
+ "linearType": "none"
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ ringoptions1:{
|
|
|
+ "type": "ring",
|
|
|
+ "canvasId": "",
|
|
|
+ "canvas2d": false,
|
|
|
+ "background": "#24262D",
|
|
|
+ "borderColor":'#24262D',
|
|
|
+ "animation": true,
|
|
|
+ "timing": "easeOut",
|
|
|
+ "duration": 1000,
|
|
|
+ "color": [
|
|
|
+ '#247ef4', '#3a3b40'
|
|
|
+ ],
|
|
|
+ "rotate": false,
|
|
|
+ "errorReload": true,
|
|
|
+ "fontSize": 13,
|
|
|
+ "fontColor": "#666666",
|
|
|
+ "enableScroll": false,
|
|
|
+ "touchMoveLimit": 60,
|
|
|
+ "enableMarkLine": false,
|
|
|
+ "dataLabel": true,
|
|
|
+ "dataPointShape": false,
|
|
|
+ "dataPointShapeType": "solid",
|
|
|
+ "tapLegend": true,
|
|
|
+ "legend": {
|
|
|
+ "show": true,
|
|
|
+ "position": "top",
|
|
|
+ "padding": 5,
|
|
|
+ "margin": 5,
|
|
|
+ "backgroundColor": "rgba(0,0,0,0)",
|
|
|
+ "borderColor": "rgba(0,0,0,0)",
|
|
|
+ "borderWidth": 0,
|
|
|
+ "fontSize": 13,
|
|
|
+ "fontColor": "#fff",
|
|
|
+ "lineHeight": 25,
|
|
|
+ "hiddenColor": "#CECECE",
|
|
|
+ "itemGap": 10
|
|
|
+ },
|
|
|
+ "title": {
|
|
|
+ "name": "总量合计",
|
|
|
+ "fontSize": 15,
|
|
|
+ "color": "#fff",
|
|
|
+ },
|
|
|
+ "subtitle": {
|
|
|
+ "name": "70%",
|
|
|
+ "fontSize": 25,
|
|
|
+ "color": "#fff",
|
|
|
+ },
|
|
|
+ "extra": {
|
|
|
+ "ring": {
|
|
|
+ "ringWidth": 20,
|
|
|
+ "centerColor": "#24262D",
|
|
|
+ "activeOpacity": 0.5,
|
|
|
+ "activeRadius": 10,
|
|
|
+ "offsetAngle": 0,
|
|
|
+ "customRadius": 0,
|
|
|
+ "labelWidth": 15,
|
|
|
+ "border": true,
|
|
|
+ "borderWidth": 3,
|
|
|
+ "borderColor": "#24262D",
|
|
|
+ "linearType": "none"
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ "Ring":{
|
|
|
+ "series":[{
|
|
|
+ "name":"已完成量",
|
|
|
+ "data":50
|
|
|
+ },{
|
|
|
+ "name":"未完成量",
|
|
|
+ "data":30
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ "Ring1":{
|
|
|
+ "series":[{
|
|
|
+ "name":"已开票",
|
|
|
+ "data":50
|
|
|
+ },{
|
|
|
+ "name":"未开票",
|
|
|
+ "data":30
|
|
|
+ }]
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
onLoad: function(option) {
|
|
|
@@ -29,7 +209,12 @@
|
|
|
|
|
|
|
|
|
<style>
|
|
|
- .map {
|
|
|
- /* height: 400px; */
|
|
|
+ /* .map {
|
|
|
+ position:relative;
|
|
|
+ height: 400px;
|
|
|
+ } */
|
|
|
+ .charts-box{
|
|
|
+ position:relative;
|
|
|
+ top:70vh;
|
|
|
}
|
|
|
</style>
|
