堡座demo

package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@jiaminghi/data-view": "^2.4.4",
     "axios": "^1.6.2",
-    "echarts": "^5.5.0",
+    "echarts": "^5.5.1",
     "less": "^3.9.0",
     "less-loader": "^5.0.0",
     "vue": "^2.6.10",

src/App.vue

@@ -5,7 +5,12 @@
 </template>
 
 <script>
-import datav from './components/datav/index.vue'
+
+//永盛版本
+//import datav from './components/datav/index.vue'
+
+//堡座demo版本
+import datav from './components/baozuo-demo/index.vue'
 
 export default {
   name: 'app',

src/api.js

@@ -4,8 +4,14 @@ const api = {
   // 定义API接口地址
   // baseURL: process.env.NODE_ENV === 'production' ? '/api/' : 'http://localhost:3000/',
   // GET请求示例
-  baseURL: 'http://39.99.224.120:9196',
+  baseURL: 'http://39.101.165.228:9001',
-  baseURL2: 'http://123.207.37.67:9001',
+  baseURL2: 'http://39.101.165.228:9001',
+
+  //永盛
+  _baseURL: 'http://123.207.37.67:9001',
+  _baseURL2: 'http://123.207.37.67:9001',
+
+
   get (url) {
     return new Promise((resolve, reject) => {
       axios({

src/components/baozuo-demo/BottomCharts.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="bottom-charts">
+    <div class="bc-chart-item">
+      <div class="bcci-header">机芯派工单执行进度</div>
+      <dv-scroll-board :config="config1" style="height:90%;margin-left: 2%;width:96%" />
+    </div>
+    <dv-decoration-2 class="decoration-1" :reverse="true" style="width:5px;" />
+
+    <div class="bc-chart-item">
+      <div class="bcci-header">盖板派工单执行进度</div>
+      <dv-scroll-board :config="config2" style="height:90%;margin-left: 2%;width:96%" />
+
+    </div>
+  </div>
+</template>
+
+<script>
+import LabelTag from './LabelTag'
+
+export default {
+  name: 'BottomCharts',
+  components: {
+    LabelTag
+  },
+  data() {
+    function generateRandomData(N, title) {
+      const data = [];
+      let date = new Date(); // 从今天的日期开始
+      for (let i = 1; i <= N; i++) {
+        // 格式化日期为'YYYY-MM-DD'
+        const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+        const formattedDate2 = `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}`;
+
+        // 订单量随机在20到200之间，步长为10
+        const orderQuantity = Math.floor(Math.random() * 19 + 2) * 10;
+
+        // 完成数量随机但不超过订单量
+        const completedQuantity = Math.floor(Math.random() * (orderQuantity / 10)) * 10;
+
+        // 计算完成百分比
+        const completionRate = ((completedQuantity / orderQuantity) * 100).toFixed(2) + '%';
+
+        // 创建新的数据项
+        const newDataItem = [
+          `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
+          title,  // 固定值
+          formattedDate,  // 日期
+          orderQuantity,  // 订单量
+          completionRate,  // 完成率
+          completedQuantity  // 完成数量
+        ];
+
+        data.push(newDataItem);
+
+        // 更新日期至下一天
+        date.setDate(date.getDate() + 1);
+      }
+      return data;
+    }
+
+
+    return {
+      config1: {
+        header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '剩下数量'],
+        data: generateRandomData(60, 'U1机芯'),
+        index: true,
+        columnWidth: [50],
+        align: ['center']
+      },
+
+      config2: {
+        header: ['工单号', '产品名称', '派工日期', '派工数量', '工序进度', '剩下数量'],
+        data: generateRandomData(30, 'U1盖板'),
+        index: true,
+        columnWidth: [50],
+        align: ['center']
+      },
+
+
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.bottom-charts {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  position: relative;
+
+  .bc-chart-item {
+    width: 50%;
+    height: 100%;
+    padding-top: 20px;
+    box-sizing: border-box;
+  }
+
+  .bcci-header {
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+    font-size: 20px;
+  }
+
+  .dv-active-ring-chart {
+    height: calc(~"100% - 80px");
+  }
+
+  .label-tag {
+    height: 30px;
+  }
+
+  .active-ring-name {
+    font-size: 18px !important;
+  }
+
+  .decoration-1,
+  .decoration-2,
+  .decoration-3 {
+    display: absolute;
+    left: 0%;
+  }
+}
+</style>

src/components/baozuo-demo/CenterCmp.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="center-cmp">
+    <div class="cc-header" v-if="false"> 
+      <dv-decoration-1 style="width:200px;height:50px;" />
+    </div>
+
+    <div class="cc-details">
+      <div>本月总产量</div>
+      <div class="card">1</div>
+      <div class="card">1</div>
+      <div class="card">3</div>
+      <div class="card">7</div>
+    </div>
+
+    <div class="cc-main-container">
+      <div class="ccmc-left">
+        <div class="station-info">
+          本月派工数<span>1120</span>
+        </div>
+        <div class="station-info">
+          本月未完成派工数<span>600</span>
+        </div>
+        <div class="station-info">
+          本月派工完成率<span>60%</span>
+        </div>
+        <div class="station-info">
+          保养台数<span>32/40</span>
+        </div>
+      </div>
+
+      <dv-active-ring-chart class="ccmc-middle" :config="config" />
+
+      <div class="ccmc-right">
+        <div class="station-info">
+          <span>60</span>今天产量
+        </div>
+        <div class="station-info">
+          <span>20%</span>直通率
+        </div>
+        <div class="station-info">
+          <span>4</span>今日不良数
+        </div>
+        <div class="station-info">
+          <span>5</span>返工数
+        </div>
+      </div>
+
+      <LabelTag :config="labelConfig" />
+    </div>
+  </div>
+</template>
+
+<script>
+import LabelTag from './LabelTag'
+
+export default {
+  name: 'CenterCmp',
+  components: {
+    LabelTag
+  },
+  data () {
+    return {
+      config: {
+        data: [
+          {
+            name: '机芯缺陷占比',
+            value: 42
+          },
+          {
+            name: '盖板缺陷占比',
+            value: 58
+          }
+        ],
+        color: ['#00baff', '#3de7c9', '#ffc530', '#469f4b'],
+        lineWidth: 30,
+        radius: '55%',
+        activeRadius: '60%'
+      },
+
+      labelConfig: {
+        data: ['机芯缺陷占比', '盖板缺陷占比' ]
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.center-cmp {
+  width: 100%;
+  height: 100%;
+  margin: 0px;
+  padding: 0px;
+  display: flex;
+  flex-direction: column;
+
+  .cc-header {
+    height: 70px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 30px;
+  }
+
+  .cc-details {
+    height: 120px;
+    display: flex;
+    justify-content: center;
+    font-size: 32px;
+    align-items: center;
+
+    .card {
+      background-color: rgba(4,49,128,.6);
+      color: #08e5ff;
+      height: 70px;
+      width: 70px;
+      font-size: 45px;
+      font-weight: bold;
+      line-height: 70px;
+      text-align: center;
+      margin: 10px;
+    }
+  }
+
+  .cc-main-container {
+    position: relative;
+    flex: 1;
+    display: flex;
+
+    .ccmc-middle {
+      width: 50%;
+      height: 90%;
+
+      .active-ring-name {
+        font-size: 20px !important;
+      }
+    }
+
+    .ccmc-left, .ccmc-right {
+      width: 25%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      font-size: 24px;
+
+      span {
+        font-size: 40px;
+        font-weight: bold;
+      }
+
+      .station-info {
+        height: 80px;
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    .ccmc-left {
+      align-items: flex-end;
+
+      span {
+        margin-left: 20px;
+      }
+    }
+
+    .ccmc-right {
+      align-items: flex-start;
+
+      span {
+        margin-right: 20px;
+      }
+    }
+  }
+
+  .label-tag {
+    position: absolute;
+    width: 500px;
+    height: 30px;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/components/baozuo-demo/LabelTag.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="label-tag">
+    <template v-if="mergedConfig">
+      <div class="label-item" v-for="(label, i) in mergedConfig.data" :key="label">
+        {{ label }} <div :style="`background-color: ${mergedConfig.colors[i % mergedConfig.colors.length]};`" />
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'LabelTag',
+  props: {
+    config: {
+      type: Object,
+      default: () => ([])
+    }
+  },
+  data () {
+    return {
+      defaultConfig: {
+        /**
+         * @description Label data
+         * @type {Array<String>}
+         * @default data = []
+         * @example data = ['label1', 'label2']
+         */
+        data: [], 
+        colors: ['#00baff', '#3de7c9', '#ffc530', '#469f4b']
+      },
+
+      mergedConfig: null
+    }
+  },
+  watch: {
+    config () {
+      const { mergeConfig } = this
+
+      mergeConfig()
+    }
+  },
+  methods: {
+    mergeConfig () {
+      let { config, defaultConfig } = this
+
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+    }
+  },
+  mounted () {
+    const { mergeConfig } = this
+
+    mergeConfig()
+  }
+}
+</script>
+
+<style lang="less">
+.label-tag {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .label-item {
+    margin: 5px;
+    font-size: 15px;
+    display: flex;
+    align-items: center;
+
+    div {
+      width: 12px;
+      height: 12px;
+      margin-left: 5px;
+    }
+  }
+}
+</style>

src/components/baozuo-demo/LeftChart1.vue

@@ -0,0 +1,109 @@
+<template>
+  <div id="rose-chart">  
+    <div :id="pieId" class="pie-chart-container"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'RoseChart',
+  props: {
+    pieId: {
+      type: String,
+    },
+    chartData: {
+      type: Object,
+    }
+  },
+  data() {
+    return {
+      option: {} 
+    }
+  },
+  methods: {
+    createData() {
+
+      var myChart = echarts.init(document.getElementById(this.pieId));
+      console.log(myChart)
+      this.option = {
+        title: {
+          text: '近一周产量趋势'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['机芯1线', '机芯2线', '盖板线', '整机线']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        }, 
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['12-06', '12-07', '12-08', '12-09', '12-10', '12-11', '12-12']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            name: '机芯1线',
+            type: 'line',
+            stack: 'Total',
+            data: [120, 132, 101, 134, 90, 230, 210]
+          },
+          {
+            name: '机芯2线',
+            type: 'line',
+            stack: 'Total',
+            data: [150, 142, 111, 114, 120, 120, 110]
+          },
+          {
+            name: '盖板线',
+            type: 'line',
+            stack: 'Total',
+            data: [130, 232, 201, 154, 190, 330, 410]
+          },
+          {
+            name: '整机线',
+            type: 'line',
+            stack: 'Total',
+            data: [133, 162, 191, 134, 130, 230, 310]
+          }
+        ]
+      };
+      myChart.setOption(this.option);
+    },
+    // randomExtend (minNum, maxNum) {
+    //   if (arguments.length === 1) {
+    //     return parseInt(Math.random() * minNum + 1, 10)
+    //   } else {
+    //     return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
+    //   }
+    // }
+  },
+  mounted() {
+    const { createData } = this
+
+    createData()
+
+    // setInterval(createData, 100000)
+  }
+}
+</script>
+
+<style lang="less">
+#rose-chart {  
+  box-sizing: border-box;
+  color: white; 
+
+  .pie-chart-container {
+    height: 100%
+  }
+}
+</style>

src/components/baozuo-demo/LeftChart2.vue

@@ -0,0 +1,142 @@
+<template>
+  <div id="rose-chart2">
+    <div :id="pieId" class="pie-chart-container"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'RoseChart',
+  props: {
+    pieId: {
+      type: String,
+    },
+    chartData: {
+      type: Object,
+    }
+  },
+  data() {
+    return {
+      option: {}
+    }
+  },
+  methods: {
+    createData() {
+
+      var myChart = echarts.init(document.getElementById(this.pieId));
+      console.log(myChart)
+      this.option = {
+        title: {
+          text: '月生产情况',
+          subtext: '完成率'
+        },
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          data: ['机芯1线', '机芯2线', '盖板线']
+        },
+        toolbox: {
+          show: true,
+          feature: {
+            dataView: { show: true, readOnly: false },
+            magicType: { show: true, type: ['line', 'bar'] },
+            restore: { show: true },
+            saveAsImage: { show: true }
+          }
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: 'category',
+            // prettier-ignore
+            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: '机芯1线',
+            type: 'bar',
+            data: [
+              80, 85, 98, 95, 87, 75, 65, 68, 69, 40, 82, 83
+            ],
+            markPoint: {
+              data: [
+                { type: 'max', name: 'Max' },
+                { type: 'min', name: 'Min' }
+              ]
+            },
+            markLine: {
+              data: [{ type: 'average', name: 'Avg' }]
+            }
+          },
+          {
+            name: '机芯2线',
+            type: 'bar',
+            data: [
+              70, 75, 88, 85, 97, 85, 75, 78, 59, 80, 82, 63
+            ],
+            markPoint: {
+              data: [
+                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
+                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
+              ]
+            },
+            markLine: {
+              data: [{ type: 'average', name: 'Avg' }]
+            }
+          },
+          {
+            name: '盖板线',
+            type: 'bar',
+            data: [
+              80, 85, 78, 75, 67, 45, 55, 68, 49, 50, 72, 93
+            ],
+            markPoint: {
+              data: [
+                { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
+                { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
+              ]
+            },
+            markLine: {
+              data: [{ type: 'average', name: 'Avg' }]
+            }
+          }
+        ]
+      };
+      myChart.setOption(this.option);
+    },
+    // randomExtend (minNum, maxNum) {
+    //   if (arguments.length === 1) {
+    //     return parseInt(Math.random() * minNum + 1, 10)
+    //   } else {
+    //     return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
+    //   }
+    // }
+  },
+  mounted() {
+    const { createData } = this
+
+    createData()
+
+    // setInterval(createData, 100000)
+  }
+}
+</script>
+
+<style lang="less">
+#rose-chart2 {
+  box-sizing: border-box;
+  color: white; 
+
+  .pie-chart-container {
+    height: 100%
+  }
+}
+</style>

src/components/baozuo-demo/RightChart1.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="right-chart-1">
+    <div class="rc1-header">备料计划</div>
+      <dv-scroll-board :config="config" style="height:90%;margin-left: 2%;width:96%" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RightChart1',
+  data () {
+    function generateRandomData(N, title) {
+      const data = [];
+      let date = new Date(); // 从今天的日期开始
+      for (let i = 1; i <= N; i++) {
+        // 格式化日期为'YYYY-MM-DD'
+        const formattedDate = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+        const formattedDate2 = `${date.getFullYear()}${String(date.getMonth() + 1).padStart(2, '0')}${String(date.getDate()).padStart(2, '0')}`;
+
+        // 订单量随机在20到200之间，步长为10
+        const orderQuantity = Math.floor(Math.random() * 19 + 2) * 10;
+
+        // 完成数量随机但不超过订单量
+        const completedQuantity = Math.floor(Math.random() * (orderQuantity / 10)) * 10;
+ 
+
+        // 创建新的数据项
+        const newDataItem = [
+          `PS-${formattedDate2}${String(i).padStart(3, '0')}`,  // 编号
+          title,  // 固定值 
+          orderQuantity,  // 订单量 
+          completedQuantity  // 完成数量
+        ];
+
+        data.push(newDataItem);
+
+        // 更新日期至下一天
+        date.setDate(date.getDate() + 1);
+      }
+      return data;
+    }
+    return {
+      config: {
+        header: ['工单号', '物料名称', '备料数', '欠数料'],
+        data: generateRandomData(60, 'U1电源线压板'),
+        index: true,
+        columnWidth: [50],
+        align: ['center']
+      },
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.right-chart-1 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .rc1-header {
+    font-size: 24px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+    margin-top: 2%;
+    text-align: center;
+  }
+
+  .rc1-chart-container {
+    flex: 1;
+    display: flex;
+  }
+
+  .left {
+    width: 30%;
+    font-size: 16px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .number {
+      font-size: 34px;
+      color: #096dd9;
+      font-weight: bold;
+      margin-bottom: 30px;
+    }
+  }
+
+  .right {
+    flex: 1;
+    padding-bottom: 20px;
+    padding-right: 20px;
+    box-sizing: border-box;
+  }
+}
+</style>

src/components/baozuo-demo/index.vue

@@ -0,0 +1,161 @@
+<template>
+  <div id="data-view">
+    <dv-full-screen-container>
+
+
+      <top-header Name="堡座生产看板" style="height:5%;" />
+
+
+      <dv-border-box-1 class="main-container" style="height: 50%;">
+
+
+        <div class="rmc-top-container">
+
+          <dv-border-box-3 class="rmctc-left-container"  style="height:100%" > 
+            <Left-Chart-1 :pieId="'leftchar1'" style="height:50%" />
+            <Left-Chart-2 :pieId="'leftchar2'"  style="height:40%;margin-top: 10%;"  /> 
+          </dv-border-box-3>
+          <dv-border-box-3 class="rmctc-middle-container">
+
+            <Center-Cmp />
+
+          </dv-border-box-3>
+
+          <div class="rmctc-right-container">
+            <dv-border-box-3 class="rmctc-chart-1">
+
+              <Right-Chart-1 />
+
+            </dv-border-box-3> 
+          </div>
+        </div>
+
+      </dv-border-box-1>
+
+      
+      <dv-border-box-4 class="rmc-bottom-container"  style="height: 45%;">
+
+          <Bottom-Charts />
+
+        </dv-border-box-4>
+
+            </dv-full-screen-container>
+          </div>
+</template>
+
+<script>
+import topHeader from './topHeader'
+import LeftChart1 from './LeftChart1'
+import LeftChart2 from './LeftChart2' 
+
+import CenterCmp from './CenterCmp'
+
+import RightChart1 from './RightChart1' 
+
+import BottomCharts from './BottomCharts'
+
+export default {
+  name: 'DataView',
+  components: {
+    topHeader,
+    LeftChart1,
+    LeftChart2, 
+    CenterCmp,
+    RightChart1, 
+    BottomCharts
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style lang="less">
+#data-view {
+  width: 100%;
+  height: 100%;
+  background-color: #030409;
+  color: #fff;
+
+  #dv-full-screen-container {
+    background-image: url('./img/bg.png');
+    background-size: 100% 100%;
+    box-shadow: 0 0 3px blue;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .main-header {
+    height: 80px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+
+    .mh-left {
+      font-size: 20px;
+      color: rgb(1, 134, 187);
+
+      a:visited {
+        color: rgb(1, 134, 187);
+      }
+    }
+
+    .mh-middle {
+      font-size: 30px;
+    }
+
+    .mh-left,
+    .mh-right {
+      width: 450px;
+    }
+  }
+
+  .main-container {
+    
+
+    .border-box-content {
+      padding: 20px;
+      box-sizing: border-box;
+      display: flex;
+    }
+  }
+ 
+
+  .right-main-container {
+    width: 75%;
+    padding-left: 5px;
+    box-sizing: border-box;
+  }
+
+  .rmc-top-container {
+    height: 100%;
+    width:100%;
+    display: flex;
+  }
+
+  .rmctc-left-container {
+    width: 25%; 
+    padding: 10px;
+    box-sizing: border-box;
+
+    .border-box-content {
+      flex-direction: column;
+    }
+  }
+  .rmctc-middle-container {
+    width: 50%;
+  }
+  .rmctc-right-container {
+    width: 25%;
+  }
+
+  .rmc-bottom-container {
+    height: 35%;
+
+  }
+
+  .rmctc-chart-1  {
+    height: 100%;
+  }
+}
+</style>

src/components/baozuo-demo/topHeader.vue

@@ -0,0 +1,47 @@
+<template>
+  <div id="top-header">
+    <dv-decoration-8 class="header-left-decoration" />
+  <dv-decoration-5 class="header-center-decoration" /> 
+    <dv-decoration-8 class="header-right-decoration" :reverse="false" />
+    <div class="center-title" :style="'font-size:'+$fontSize(0.3)+'px'">{{Name}}</div>
+ 
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TopHeader',
+  props: ['Name', 'Times']
+}
+</script>
+
+<style lang="less">
+#top-header {
+  position: relative;
+  width: 100%;
+  // height: 1rem;
+  display: flex;
+  justify-content: space-between;
+  flex-shrink: 0;
+
+  .header-center-decoration {
+    width: 40%;
+    height: 0.6rem;
+  }
+
+  .header-left-decoration, .header-right-decoration {
+    width: 25%;
+    height: 0.6rem;
+  }
+
+  .center-title {
+    position: absolute;
+    // font-size: 30px;
+    font-weight: bold;
+    left: 50%;
+    top: 0.15rem;
+    transform: translateX(-50%);
+  }
+  
+}
+</style>

src/components/datav/roseChart.vue

@@ -1,13 +1,12 @@
 <template>
   <div id="rose-chart">
-    <div class="rose-chart-title">---{{chartData?chartData.title:''}}---</div>
+    <div class="rose-chart-title">---{{chartData?chartData.title:''}}---</div> 
-    <!-- <dv-charts :option="option" /> -->
     <div :id="pieId" class="pie-chart-container"></div>
   </div>
 </template>
 
 <script>
- import * as echarts from 'echarts';
+ import * as echarts from 'echarts'; 
 export default {
   name: 'RoseChart', 
   props:{
@@ -25,8 +24,7 @@ export default {
   },
   methods: {
     createData () {
-      const { randomExtend } = this
+ 
-
       var myChart = echarts.init(document.getElementById(this.pieId));
         this.option = {
           
@@ -67,21 +65,14 @@ export default {
           ]
         };
         myChart.setOption(this.option);
-    },
+    } 
-    // randomExtend (minNum, maxNum) {
-    //   if (arguments.length === 1) {
-    //     return parseInt(Math.random() * minNum + 1, 10)
-    //   } else {
-    //     return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
-    //   }
-    // }
   },
   mounted () {
+    console.log(this.pieId)
     const { createData } = this
 
     createData()
-
+ 
-    // setInterval(createData, 100000)
   }
 }
 </script>