新增组件及页面

dgtis-ui/src/views/dashboard/LineBarChart.vue

@@ -0,0 +1,127 @@
+<template>
+  <div :id="id" :class="className" :style="{ height:height,width:width }" />
+</template>
+<script>
+  import echarts from 'echarts'
+  import resize from './mixins/resize'
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: "chart"
+      },
+      id: {
+        type: String,
+        default: "chart"
+      },
+      width: {
+        type: String,
+        default: "100%"
+      },
+      height: {
+        type: String,
+        default: "400px"
+      },
+      data: {
+        type: Object,
+        default: {}
+      },
+    },
+    data() {
+      return {
+        chart: null
+      };
+    },
+    mounted() {
+      this.initChart();
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return;
+      }
+      this.chart.dispose();
+      this.chart = null;
+    },
+    methods: {
+      initChart() {
+        let that = this;
+        this.chart = echarts.init(document.getElementById(this.id));
+        let option = {
+          tooltip: {
+            trigger: 'axis',
+          },
+          grid:{
+            left:'20%',
+          },
+          // legend: {
+          //   textStyle:{
+          //     color:'#FFF',
+          //   },
+          //   data: ['蒸发量', '平均温度'],
+          // },
+          xAxis: [
+            {
+              type: 'category',
+              data: that.data.xAxisData,
+              axisPointer: {
+                type: 'shadow'
+              },
+              axisLabel:{
+                color:'#333',
+              },
+              axisLine:{
+                lineStyle:{
+                  color:'#EDEDED',
+                },
+              },
+            }
+          ],
+          yAxis: [
+            {
+              type: 'value',
+              name: '',
+              min: 0,
+              max: 250,
+              interval: 50,
+              // nameTextStyle:{
+              //   color:'#333',
+              // },
+              axisLabel: {
+                // formatter: '{value} ml',
+                // color:'#FFF'
+              },
+              axisLine:{
+                show:false,
+              },
+              axisTick:{
+                show:false,
+              },
+            },
+          ],
+          series: [
+            {
+              name: that.data.expectedData.name,
+              type: 'bar',
+              itemStyle:{
+                color:'#1DCAF5'
+              },
+              data: that.data.expectedData.data
+            },
+            {
+              name: that.data.actualData.name,
+              type: 'line',
+              itemStyle:{
+                color:'#5AAFF9',
+                borderColor:'#CFAF19'
+              },
+              data: that.data.actualData.data
+            }
+          ]
+        };
+        this.chart.setOption(option);
+      }
+    }
+  };
+</script>

dgtis-ui/src/views/dashboard/PieChartHalf.vue

@@ -0,0 +1,151 @@
+<template>
+  <div :id="id" :class="className" :style="{ height:height,width:width }" />
+</template>
+<script>
+  import echarts from 'echarts'
+  import resize from './mixins/resize'
+  import "echarts-wordcloud/dist/echarts-wordcloud";
+  import "echarts-wordcloud/dist/echarts-wordcloud.min";
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: "chart"
+      },
+      id: {
+        type: String,
+        default: "chart"
+      },
+      width: {
+        type: String,
+        default: "100%"
+      },
+      height: {
+        type: String,
+        default: "400px"
+      },
+      data: {
+        type: Array,
+        default: []
+      },
+    },
+    data() {
+      return {
+        chart: null
+      };
+    },
+    mounted() {
+      this.initChart();
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return;
+      }
+      this.chart.dispose();
+      this.chart = null;
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(document.getElementById(this.id));
+        let option =  {
+          // backgroundColor: '#fff',
+          //第一个图表
+          series: [{
+            type: 'pie',
+            hoverAnimation: false, //鼠标经过的特效
+            radius: ['82%', '90%'],
+            center: ['50%', '55%'],
+            startAngle: 160,
+            labelLine: {
+              normal: {
+                show: false
+              }
+            },
+            label: {
+              normal: {
+                position: 'center'
+              }
+            },
+            data: [{
+              value: 100,
+              itemStyle: {
+                normal: {
+                  color: '#F39801'
+                }
+              },
+            }, {
+              value: 155,
+              itemStyle:  {
+                normal: {
+                  label: {
+                    show: false
+                  },
+                  labelLine: {
+                    show: false
+                  },
+                  color: "rgba(0,0,0,0)",
+                  borderWidth: 0
+                },
+                emphasis: {
+                  color: "rgba(0,0,0,0)",
+                  borderWidth: 0
+                }
+              },
+            },
+
+            ]
+          },
+            //上层环形配置
+            {
+              type: 'pie',
+              hoverAnimation: false, //鼠标经过的特效
+              radius: ['82%', '90%'],
+              center: ['50%', '55%'],
+              startAngle: 160,
+              labelLine: {
+                normal: {
+                  show: false
+                }
+              },
+              label: {
+                normal: {
+                  position: 'center'
+                }
+              },
+              data: [{
+                value: 55,
+                itemStyle: {
+                  normal: {
+                    color: '#013C8A'
+                  }
+                },
+              }, {
+                value: 155,
+                itemStyle:  {
+                  normal: {
+                    label: {
+                      show: false
+                    },
+                    labelLine: {
+                      show: false
+                    },
+                    color: "rgba(0,0,0,0)",
+                    borderWidth: 0
+                  },
+                  emphasis: {
+                    color: "rgba(0,0,0,0)",
+                    borderWidth: 0
+                  }
+                },
+              },
+              ]
+            },
+          ]
+        };
+        this.chart.setOption(option);
+      }
+    }
+  };
+</script>

dgtis-ui/src/views/dashboard/WordCloudChart.vue

@@ -0,0 +1,107 @@
+<template>
+  <div :id="id" :class="className" :style="{ height:height,width:width }" />
+</template>
+<script>
+  import echarts from 'echarts'
+  import resize from './mixins/resize'
+  import "echarts-wordcloud/dist/echarts-wordcloud";
+  import "echarts-wordcloud/dist/echarts-wordcloud.min";
+
+  export default {
+    mixins: [resize],
+    props: {
+      className: {
+        type: String,
+        default: "chart"
+      },
+      id: {
+        type: String,
+        default: "chart"
+      },
+      width: {
+        type: String,
+        default: "100%"
+      },
+      height: {
+        type: String,
+        default: "400px"
+      },
+      data: {
+        type: Array,
+        default: []
+      },
+      title: {
+        type: String,
+        default: ""
+      }
+    },
+    data() {
+      return {
+        chart: null
+      };
+    },
+    mounted() {
+      this.initChart();
+    },
+    beforeDestroy() {
+      if (!this.chart) {
+        return;
+      }
+      this.chart.dispose();
+      this.chart = null;
+    },
+    methods: {
+      initChart() {
+        this.chart = echarts.init(document.getElementById(this.id));
+        const option = {
+          title: {
+            text: this.title,
+            x: "center"
+          },
+          // backgroundColor: "#fff",
+          // tooltip: {
+          //   pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
+          // },
+          series: [
+            {
+              type: "wordCloud",
+              //用来调整词之间的距离
+              gridSize: 6,
+              //用来调整字的大小范围
+              // Text size range which the value in data will be mapped to.
+              // Default to have minimum 12px and maximum 60px size.
+              sizeRange: [12, 18],
+              // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
+              //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
+              // rotationRange: [-45, 0, 45, 90],
+              // rotationRange: [ 0,90],
+              rotationRange: [0, 90],
+              //随机生成字体颜色
+              // maskImage: maskImage,
+              textStyle: {
+                normal: {
+                  color: function() {
+                    var colors = ['#00BBFE', '#3F96EA', '#0B5AAD', "#4198ED",'#F29901'];
+                    return colors[parseInt(Math.random() * 10)];
+                  }
+                }
+              },
+              //位置相关设置
+              // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
+              // Default to be put in the center and has 75% x 80% size.
+              left: "center",
+              top: "center",
+              right: null,
+              bottom: null,
+              width: "200%",
+              height: "200%",
+              //数据
+              data: this.data
+            }
+          ]
+        };
+        this.chart.setOption(option);
+      }
+    }
+  };
+</script>