merge branch master 20220506

src/componentChart/LineBarChart.vue

@@ -0,0 +1,135 @@
+<template>
+  <div ref="chart"  style="width:100%;height:385px;"  />
+</template>
+<script>
+import echarts from 'echarts'
+import { GetDataByName } from '@/api/common'
+import draggable from 'vuedraggable'
+import Cookies from 'js-cookie'
+import { parseTime } from '@/utils/index.js'
+import Pagination from '@/components/Pagination'
+require('echarts/theme/macarons')
+
+export default {
+  name: 'LineBarChart',
+  props: {
+    
+
+    chartData: {
+      type: Object,
+      required: true
+    },
+    //   chartOpt: {
+    //   type: Object,
+    //   required: false
+    // },
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  watch: {
+    chartData: {
+      deep: true,
+      handler: function (chartData) {
+        this.renderChart(chartData)
+      }
+    },
+    // schema: {
+    //   deep: true,
+    //   handler: function () {
+    //     this.renderChart(this.data)
+    //   }
+    // }
+  },
+  mounted() {
+    this.renderChart(this.chartData)
+    this.$on('resized', this.handleResize)
+    window.addEventListener('resize', this.handleResize)
+  },
+
+
+  // created() {
+  //   this.renderChart(this.chartData)
+  // },
+  beforeDestroy() {
+    if (this.chart) {
+      this.chart.dispose()
+    }
+    window.removeEventListener('resize', this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    },
+    renderChart(chartData) {
+      var legendArrRe  = chartData.legendArr1.concat(chartData.legendArr2)
+      const option =  {
+
+        
+        title: { text: 'Stacked Line' },
+        tooltip: { trigger: 'axis' },
+        legend: {   data:legendArrRe, right: 10, show: true, type: 'scroll' },
+        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
+        xAxis: [{ type: 'category',data:chartData.xAxisArr }],
+        yAxis: [
+          {type: 'value', name: 'kg'},
+           
+        ],
+         series: function (e) {
+            var serie = [];
+            for (var i = 0; i < chartData.xAxisArr.length; i++) {
+              console.log(i)
+               
+                var item = {
+                  name: chartData.legendArr1[i],
+                  data: chartData.dataArr1[i],
+                  type: 'line',
+                  emphasis: { label: { show: true, position: 'inside' } },
+                }
+             
+
+              serie.push(item);
+            }
+
+            for (var i = 0; i < chartData.xAxisArr.length; i++) {
+              console.log(i)
+               
+                var item = {
+                  name: chartData.legendArr2[i],
+                  data: chartData.dataArr2[i],
+                  type: 'bar',
+                  emphasis: { label: { show: true, position: 'inside' } },
+                }
+             
+
+              serie.push(item);
+            }
+
+
+            console.log(serie)
+
+            return serie;
+          }()
+      
+      }
+      setTimeout(() => {
+        if (!this.chart) {
+          this.chart = echarts.init(this.$refs.chart, 'macarons')
+        }
+        this.chart.clear()
+        this.chart.setOption(option)
+        // if (this.chartOpt) {
+        //   this.chart.setOption(this.chartOpt)
+        // }
+ 
+        this.chart.setOption(this.chartOpt)
+       
+      }, 0)
+    }
+  }
+}
+</script>

src/views/systemManagement/customboard2/Addboard2/index.vue

@@ -35,14 +35,14 @@
             </div>
 
 
-            <div  class="board-item" v-if="item.boardtype == 'table'"> 
+            <div  class="board-item"  > 
                 表格
  
-                <keep-alive>
-
-                  <!-- <ChartTable>  </ChartTable> -->
-                  <!-- <component :is="chartTable.myComponent" ref="chartTable" /> -->
-                </keep-alive>
+                 <BarChart v-if = "item.boardtype == 'bar'"   :chart-data="item.chartData" />
+                <LineChart v-if = "item.boardtype == 'line'"   :chart-data="item.chartData" />
+                <!-- <HorizontalBarChart v-if = "item.boardtype == 'horizontal_bar'"   :chart-data="item.chartData" /> -->
+                <PieChart v-if = "item.boardtype == 'pie'"   :chart-data="item.chartData" />
+                <!-- <LineBarChart v-if = "item.boardtype == 'line_bar'"   :chart-data="item.chartData" /> -->
             </div>
             <!-- <div  class="board-item" v-if="item.boardtype == 'line'"> 
                  <keep-alive>
@@ -102,11 +102,22 @@ import { GetDataByName } from '@/api/common'
 
 // import { ChartTable } from '@/components/ChartTable'
 
+
+import ChartTable from '@/componentChart/ChartTable.vue'
+import LineChart from '@/componentChart/LineChart.vue'
+import BarChart from '@/componentChart/BarChart.vue'
+import HorizontalBarChart from '@/componentChart/HorizontalBarChart.vue'
+import PieChart from '@/componentChart/PieChart.vue'
+import LineBarChart from '@/componentChart/LineBarChart.vue'
+
+
+
 import Cookies from 'js-cookie'
  
 export default {
   name: 'Addboard2',
-  components: {  draggable },
+ 
+  components: {  draggable , ChartTable ,LineChart,BarChart ,HorizontalBarChart, PieChart, LineBarChart},
   data() {
     return {
       isRoleEdit: [],
@@ -116,16 +127,42 @@ export default {
 
       boardList: [
         {
-          title:'图表1',boardId:1,boardtype:'table',
-          boardtext:[]
+          title:'图表1',boardId:1,boardtype:'bar',
+          chartData:{
+            chartType:'bar',
+            xAxisArr: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
+            legendArr: ['数据1', '数据2', '数据3'],
+            dataArr:[
+              [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+              [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+              [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+        
+            ]
+          }
         },
         {
-          title:'图表2',boardId:2,boardtype:'table',
-          boardtext:[]
+          title:'图表2',boardId:2,boardtype:'line',
+          chartData:{
+            chartType:'line',
+            xAxisArr: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
+            legendArr: ['数据1', '数据2', '数据3'],
+            dataArr:[
+              [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+              [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+              [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+            ]
+          }
         },
         {
-          title:'图表3',boardId:3,boardtype:'line',
-          },
+          title:'图表3',boardId:3,boardtype:'pie',
+          chartData:{
+            chartType:'pie',
+            xAxisArr: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
+            legendArr: ['数据1', '数据2', '数据3', '数据4', '线条1'],
+            dataArr:[1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+          
+          }
+        },
         {title:'图表3'},
         {title:'图表3'},
 

src/views/systemManagement/customboard2/ChartPanel2/index.vue

@@ -118,7 +118,7 @@
         <LineChart v-if = "chartData.chartType == 'line'"   :chart-data="chartData" />
         <HorizontalBarChart v-if = "chartData.chartType == 'horizontal_bar'"   :chart-data="chartData" />
         <PieChart v-if = "chartData.chartType == 'pie'"   :chart-data="chartData" />
-        
+        <LineBarChart v-if = "chartData.chartType == 'line_bar'"   :chart-data="chartData" />
 
           <!-- <div id="chartLine" style="width:100%;height:385px;" >
 
@@ -165,7 +165,7 @@ import LineChart from '@/componentChart/LineChart.vue'
 import BarChart from '@/componentChart/BarChart.vue'
 import HorizontalBarChart from '@/componentChart/HorizontalBarChart.vue'
 import PieChart from '@/componentChart/PieChart.vue'
-
+import LineBarChart from '@/componentChart/LineBarChart.vue'
 
 require('echarts/theme/macarons')
 import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, checkButtons } from '@/api/common'
@@ -174,7 +174,7 @@ import Pagination from '@/components/Pagination'
 import { MessageBox } from 'element-ui'
 export default {
   name: 'ChartPanel2',
-  components: { Pagination, draggable , ChartTable ,LineChart,BarChart ,HorizontalBarChart, PieChart},
+  components: { Pagination, draggable , ChartTable ,LineChart,BarChart ,HorizontalBarChart, PieChart, LineBarChart},
   data() {
     return {
       
@@ -800,303 +800,7 @@ export default {
       this.getList()
     },
 
-
-
-    roadChartLine(chartLine_data) {
-      console.log(1111111111)
-      if (this.chartLine != null) {
-        this.chartLine.dispose()
-      }
-      this.chartLine = echarts.init(document.getElementById('chartLine'))
-      var option_line = {
-        title: { text: 'Stacked Line' },
-        tooltip: { trigger: 'axis' },
-        legend: {   data:chartLine_data.legendArr, right: 10, show: true, type: 'scroll' },
-        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
-        xAxis: [{ type: 'category',data:chartLine_data.xAxisArr }],
-        yAxis: [
-          {type: 'value', name: 'kg'},
-           
-        ],
-         series: function (e) {
-            var serie = [];
-            for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
-              console.log(i)
-               
-                var item = {
-                  name: chartLine_data.legendArr[i],
-                  data: chartLine_data.dataArr[i],
-                  type: 'line',
-                  emphasis: { label: { show: true, position: 'inside' } },
-                }
-             
-
-              serie.push(item);
-            }
-
-
-            console.log(serie)
-
-            return serie;
-          }()
-        // series: [
-        //           {
-        //       name: 'Email',
-        //       type: 'line',
-        //       stack: 'Total',
-        //       data: [120, 132, 101, 134, 90, 230, 210]
-        //     },
-        //     {
-        //       name: 'Union Ads',
-        //       type: 'line',
-        //       stack: 'Total',
-        //       data: [220, 182, 191, 234, 290, 330, 310]
-        //     },
-        //     {
-        //       name: 'Video Ads',
-        //       type: 'line',
-        //       stack: 'Total',
-        //       data: [150, 232, 201, 154, 190, 330, 410]
-        //     },
-        //     {
-        //       name: 'Direct',
-        //       type: 'line',
-        //       stack: 'Total',
-        //       data: [320, 332, 301, 334, 390, 330, 320]
-        //     },
-        //     {
-        //       name: 'Search Engine',
-        //       type: 'line',
-        //       stack: 'Total',
-        //       data: [820, 932, 901, 934, 1290, 1330, 1320]
-        //     }
-        // ]
-      }
-      var option_bar = {
-        title: { text: 'Stacked Line' },
-        tooltip: { trigger: 'axis' },
-        legend: {   data:chartLine_data.legendArr, right: 10, show: true, type: 'scroll' },
-        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
-        xAxis: [{ type: 'category',data:chartLine_data.xAxisArr }],
-        yAxis: [
-          {type: 'value', name: 'kg'},
-           
-        ],
-         series: function (e) {
-            var serie = [];
-            for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
-              console.log(i)
-               
-                var item = {
-                  name: chartLine_data.legendArr[i],
-                  data: chartLine_data.dataArr[i],
-                  type: 'bar',
-                  emphasis: { label: { show: true, position: 'inside' } },
-                }
-             
-
-              serie.push(item);
-            }
-
-
-            console.log(serie)
-
-            return serie;
-          }()
-      
-      }
-
-
-       
-
-      var option_horizontal_bar = {
-        title: { text: 'Stacked Line' },
-        tooltip: { trigger: 'axis' },
-        legend: {   data:chartLine_data.legendArr, right: 10, show: true, type: 'scroll' },
-        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
-        xAxis: {type: 'value', name: 'kg'},
-        yAxis: [
-          { type: 'category',data:chartLine_data.xAxisArr }
-           
-        ],
-         series: function (e) {
-            var serie = [];
-            for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
-              console.log(i)
-               
-                var item = {
-                  name: chartLine_data.legendArr[i],
-                  data: chartLine_data.dataArr[i],
-                  type: 'bar',
-                  emphasis: { label: { show: true, position: 'inside' } },
-                }
-             
-
-              serie.push(item);
-            }
-
-
-            console.log(serie)
-
-            return serie;
-          }()
-      
-      }
-
-
-      var option_pie = {
-        title: { text: 'Stacked Line' },
-        tooltip: { trigger: 'axis' },
-        legend: {   data:chartLine_data.legendArr, right: 10, show: true,  },
-        grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
-        xAxis: [{ type: 'category',data:chartLine_data.xAxisArr }],
-        yAxis: [
-          {type: 'value', name: 'kg'},
-           
-        ],
-         series: function (e) {
-            var serie = [
-               {
-                  name: 'Access From',
-                  type: 'pie',
-                  radius: '50%',
-                  data: [
-                    // { value: 1048, name: 'Search Engine' },
-                    // { value: 735, name: 'Direct' },
-                    // { value: 580, name: 'Email' },
-                    // { value: 484, name: 'Union Ads' },
-                    // { value: 300, name: 'Video Ads' }
-                  ],
-                  emphasis: {
-                    itemStyle: {
-                      shadowBlur: 10,
-                      shadowOffsetX: 0,
-                      shadowColor: 'rgba(0, 0, 0, 0.5)'
-                    }
-                  }
-                }
-              ];
-            for (var i = 0; i < chartLine_data.xAxisArr.length; i++) {
-              console.log(i)
-               
-                var item = {
-                  name: chartLine_data.legendArr[i],
-                  value: chartLine_data.dataArr[i],
-                
-                }
-             
-
-              serie[0].data.push(item);
-            }
-
-
-            console.log(serie)
-
-            return serie;
-          }()
-      
-      }
-      
-
-      
-
-      var option_line_bar = {
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'cross',
-            crossStyle: {
-              color: '#999'
-            }
-          }
-        },
-        toolbox: {
-          feature: {
-            dataView: { show: true, readOnly: false },
-            magicType: { show: true, type: ['line', 'bar'] },
-            restore: { show: true },
-            saveAsImage: { show: true }
-          }
-        },
-        legend: {
-          data: ['Evaporation', 'Precipitation', 'Temperature']
-        },
-        xAxis: [
-          {
-            type: 'category',
-            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-            axisPointer: {
-              type: 'shadow'
-            }
-          }
-        ],
-        yAxis: [
-          {
-            type: 'value',
-            name: 'Precipitation',
-            min: 0,
-            max: 250,
-            interval: 50,
-            axisLabel: {
-              formatter: '{value} ml'
-            }
-          },
-          {
-            type: 'value',
-            name: 'Temperature',
-            min: 0,
-            max: 25,
-            interval: 5,
-            axisLabel: {
-              formatter: '{value} °C'
-            }
-          }
-        ],
-        series: [
-          {
-            name: 'Evaporation',
-            type: 'bar',
-            data: [
-              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
-            ]
-          },
-          {
-            name: 'Precipitation',
-            type: 'bar',
-            data: [
-              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
-            ]
-          },
-          {
-            name: 'Temperature',
-            type: 'line',
-            yAxisIndex: 1,
-            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
-          }
-        ]
-      };
-     
-
-
-      if(chartLine_data.chartType == 'line'){
-        this.chartLine.setOption(option_line)
-      } else if(chartLine_data.chartType == 'bar'){
-         this.chartLine.setOption(option_bar)
-      } else if(chartLine_data.chartType == 'horizontal_bar'){
-         this.chartLine.setOption(option_horizontal_bar)
-      } else if(chartLine_data.chartType == 'pie'){
-         this.chartLine.setOption(option_pie)
-      }  else if(chartLine_data.chartType == 'line_bar'){
-         this.chartLine.setOption(option_line_bar)
-      } 
-
-       
-      
-      window.onresize = function() {
-        this.chartLine.resize()
-      }
-    },
-
+ 
     //切换图表类型
     switch_chart_type(item){
       console.log(item)
@@ -1159,6 +863,25 @@ export default {
           legendArr: ['数据1', '数据2', '数据3', '数据4', '线条1'],
           dataArr:[1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
         
+        }
+      }   else if (item.type == 'line_bar'){
+        console.log("pie!=============")
+        this.chartData = {
+          chartType:'line_bar',
+          xAxisArr: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06', '2019-07', '2019-08', '2019-09', '2019-10', '2019-11', '2019-12'],
+          legendArr1: ['数据1', '数据2', '数据3', '数据4' ],
+          dataArr1:[
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+            [2, 10, 3, 2, 10, 4, 4, 9, 3, 9, 3, 8],
+          ],
+          legendArr2: ['数据5',  '线条1'],
+          dataArr2:[
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+            [1, 10, 7, 0, 1, 7, 7, 6, 4, 4, 1, 6],
+          ]
+        
         }
       }