init2

src/views/bigScreen/drivingCabin/right2.vue

@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <container2 title="经营总体走势">
+      <div style="height:100%;width:100%;" ref="chart"></div>
+    </container2>
+  </div>
+
+</template>
+
+<script>
+import scalseBox from '../components/scaleBox.vue'
+import bigScreenHead from "../components/bigScreenHead/index.vue";
+import rocketTit from "../components/rocketTit/index.vue";
+import container2 from "../components/container2/index.vue";
+
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+  mixins: [resize],
+  name: 'right2',
+  components: {
+    scalseBox,
+    bigScreenHead,
+    rocketTit,
+    container2,
+  },
+  data () {
+    return {
+      chart: null,
+      option: {
+        backgroundColor: '',
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          right: '10',
+          data: ['XX零件收入占比', 'XY零件收入占比'],
+          textStyle: {
+            color: '#fff'
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10'],
+          splitLine: {
+            show: false//不显示网格线
+          },
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: false//不显示网格线
+          },
+          splitArea: {
+            show: false//不显示网格区域
+          },
+          axisLabel: {
+            formatter: "{value}%"
+          },
+          min: 0,
+          max: 100
+        },
+        series: [
+          {
+            name: 'XX零件收入占比',
+            type: 'line',
+            data: [55, 30, 45, 35, 55, 60, 60],
+            smooth: false,
+            lineStyle: {
+              color: 'rgba(78, 187, 147, 1)'
+            },
+            areaStyle: {//区域填充渐变颜色
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: 'rgba(78, 187, 147, 0.5)' // 0% 处的颜色
+                }, {
+                  offset: .75, color: 'rgba(78, 187, 147, 0)' // 100% 处的颜色
+                }],
+                global: false // 缺省为 false
+              }
+            }
+          },
+          {
+            name: 'XY零件收入占比',
+            type: 'line',
+            data: [45, 70, 50, 65, 45, 35, 40],
+            smooth: false,
+            lineStyle: {
+              color: 'rgba(16,148,249, 1)'
+            },
+            areaStyle: {//区域填充渐变颜色
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: 'rgba(16,148,249, 0.5)' // 0% 处的颜色
+                }, {
+                  offset: .75, color: 'rgba(16,148,249, 0)' // 100% 处的颜色
+                }],
+                global: false // 缺省为 false
+              }
+            }
+          },
+
+        ]
+      },
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy () {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart () {
+      this.chart = echarts.init(this.$refs.chart, 'macarons');
+      this.chart.setOption(this.option);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.num {
+  font-size: 30px;
+  font-family: Roboto-Black, Roboto;
+  font-weight: 900;
+  color: #f6d97e;
+  line-height: 35px;
+  //   margin-right: 3px;
+}
+.num2 {
+  font-size: 30px;
+  font-family: Roboto-Black, Roboto;
+  font-weight: 900;
+  color: rgba(16, 152, 255, 1);
+  line-height: 35px;
+}
+</style>