1

src/views/bigScreen/scientific/tab2/left2.vue

@@ -0,0 +1,107 @@
+<template>
+  <div>
+    <container1 title="工厂计划">
+      <el-date-picker slot="datePicker" v-model="dateRange" type="month" size="mini" placeholder="选择月">
+      </el-date-picker>
+      <div style="height:100%;width:100%;" ref="chart"></div>
+    </container1>
+  </div>
+
+</template>
+
+<script>
+import container1 from "./components/container1/index.vue";
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../../dashboard/mixins/resize'
+import colorList from '@/utils/colorPalette'
+export default {
+  mixins: [resize],
+  name: 'left2',
+  components: {
+    container1,
+  },
+  data () {
+    return {
+      dateRange: [],
+      chart: null,
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy () { },
+  methods: {
+    initChart () {
+      this.chart = echarts.init(this.$refs.chart)
+      this.setOptions()
+    },
+    setOptions () {
+      this.chart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{b} : {c}%'
+        },
+        legend: {
+          show: false,
+          data: ['绝热', '装药', '总装'],
+          textStyle: {
+            color: '#fff'
+          },
+        },
+        color: colorList,
+        series: [
+          {
+            name: 'Funnel',
+            type: 'funnel',
+            left: '20%',
+            top: 30,
+            bottom: 30,
+            width: '60%',
+            min: 20,
+            max: 60,
+            minSize: '40%',
+            maxSize: '70%',
+            sort: 'descending',
+            gap: 0,
+            label: {
+              show: true,
+              position: 'inside',
+              color: '#fff',
+              formatter: '{b} : {c}%'
+            },
+            labelLine: {
+              length: 10,
+              lineStyle: {
+                width: 1,
+                type: 'solid'
+              }
+            },
+            itemStyle: {
+              borderColor: '#fff',
+              borderWidth: 1
+            },
+            emphasis: {
+              label: {
+                fontSize: 20,
+              }
+            },
+            data: [
+              { value: 80, name: '绝热' },
+              { value: 40, name: '装药' },
+              { value: 20, name: '总装' },
+
+            ]
+          }
+        ]
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+</style>