新增饼图组件

packages/bigscreen/designer/components/RenderElement.vue

@@ -118,6 +118,14 @@
         :theme="theme"
         :data="data[data.dataType]"
         :ops="pieChart"/>
+      <ai-echart
+        v-else-if="data.type === 'pieChart1'"
+        style="height: 100%; width: 100%;"
+        :ref="'chart' + index"
+        :key="`chart${index}`"
+        :theme="theme"
+        :data="data[data.dataType]"
+        :ops="pieChart1"/>
       <ai-map :markers="data[data.dataType]" v-else-if="data.type=='map'" :mask="data.mask === '1'" :areaId="data.areaId || user.info.areaId" map-style="amap://styles/e51987628aee5206d4c9ca8c6e98b4f7"/>
       <ai-monitor :src="data.src" v-else-if="data.type === 'monitor'" :type="data.monitorType"></ai-monitor>
       <video style="width: 100%; height: 100%; object-fit: fill;" loop :src="data.src" autoplay v-else-if="data.type === 'video'"></video>
@@ -129,6 +137,7 @@
   import { mapState } from 'vuex'
   import AiSwiper from './AiSwiper.vue'
   import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
+  import pieChart1 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart1'
   import lineChart1 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart1'
   import lineChart2 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart2'
   import lineChart5 from 'dvcp-dv-ui/components/AiEchart/template/line/lineChart5'
@@ -147,7 +156,8 @@
         lineChart1,
         lineChart2,
         lineChart5,
-        pieChart
+        pieChart,
+        pieChart1
       }
     },
 

packages/bigscreen/designer/config.js

@@ -11,6 +11,7 @@ import barChart5 from 'dvcp-dv-ui/components/AiEchart/template/bar/barChart5'
 import barChart7 from 'dvcp-dv-ui/components/AiEchart/template/bar/barChart7'
 import barChart9 from 'dvcp-dv-ui/components/AiEchart/template/bar/barChart9'
 import pieChart from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart2'
+import pieChart1 from 'dvcp-dv-ui/components/AiEchart/template/pie/pieChart1'
 
 const components = [
   {
@@ -408,6 +409,35 @@ const components = [
             config: pieChart,
             sourceDataId: '',
             dynamicData: []
+          },
+          {
+            code: 'widget-linechart',
+            type: 'pieChart',
+            label: '饼图',
+            title: '饼图',
+            icon: 'icontext_box',
+            value: '',
+            border: 'border1',
+            width: 500,
+            height: 300,
+            zIndex: 1,
+            top: 0,
+            left: 0,
+            thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/pie.png',
+            dataX: '',
+            dataY: [],
+            api: '',
+            apiData: [],
+            dataType: 'staticData',
+            staticData: [
+              { name: '阿斯达', v1: 23, v2: 33 },
+              { name: '水电费', v1: 12, v2: 34 },
+              { name: '凡哥', v1: 67, v2: 25 },
+              { name: '党费', v1: 98, v2: 85 }
+            ],
+            config: pieChart1,
+            sourceDataId: '',
+            dynamicData: []
           }
         ]
       }

project/dvui/AppDVDemo.vue

@@ -5,7 +5,7 @@
       <template #content>
         <div class="showPanel">
           <ai-dv-wrapper :views="views" v-model="active">
-            <AiDvDisplay></AiDvDisplay>
+            <ai-echart :ops="ops" :data="views" theme="1"></ai-echart>
           </ai-dv-wrapper>
         </div>
       </template>
@@ -16,7 +16,7 @@
 <script>
 
 import AiDvWrapper from "./layout/AiDvWrapper/AiDvWrapper";
-import ops from './components/AiEchart/template/pie/pieChart2'
+import ops from './components/AiEchart/template/pie/pieChart1'
 import AiDvPanel from "./layout/AiDvPanel/AiDvPanel";
 import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
 import AiDvSummary from "./layout/AiDvSummary/AiDvSummary";
@@ -31,13 +31,11 @@ export default {
       ops,
       active: '',
       views: [
-        {label: '标准大屏', id: '0'},
-        {label: '当前大屏', id: '1'},
-        {label: '平安乡村', id: '2'},
-        {label: '人口数据', id: '3'},
-        {label: '人口数据', id: '4'},
-        {label: '人口数据', id: '5'},
-        {label: '宅基地', id: '6'},
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
       ],
       list: [
         {name: '阿斯达', v1: 23, v2: 33},

project/dvui/components/AiEchart/template/pie/pieChart1.js

@@ -0,0 +1,29 @@
+export default {
+  legend: {
+    right: 0,
+    top: '30%',
+    orient: 'vertical',
+    textStyle: {color: "#fff", fontSize: 14}
+  },
+  grid: {
+    top: '0%',
+    left: '0%',
+    right: '0px',
+    bottom: '0%'
+  },
+  xAxis: {show: false},
+  yAxis: {show: false},
+  tooltip: {
+    backgroundColor: "rgba(14, 51, 111, 0.9)",
+    borderColor: "#1A6ABC",
+    textStyle: {color: "#fff"}
+  },
+  series: {
+    type: "pie",
+    minShowLabelAngle: 10,
+    radius: '50%',
+    label: {
+      show: false
+    }
+  }
+}