vis389/src/views/bigScreen/drivingCabin/left1.vue

<template>
  <div>
    <rocketTit style="margin-bottom: 9px">经营动态</rocketTit>
    <container1>
      <el-row style="height: 100%">
        <el-col :span="12" style="height: 100%">
          <el-row style="height: 100%">
            <el-col :span="12" style="text-align:center,;padding: 26px 0 0 40px;">
              <div>
                今日收入
              </div>
              <div style="margin: 10px 0">
                <span class="num">2890</span>万
              </div>
              <div>
                同比增长
              </div>
            </el-col>
            <el-col :span="12" style="height: 100%">
              <div ref="chart1" style="width: 100%;height:100%;"></div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12" style="height: 100%">
            <el-row style="height: 100%">
              <el-col :span="12" style="text-align:center,;padding: 26px 0 0 40px;">
                <div>
                  今日合同
                </div>
                <div style="margin: 10px 0">
                  <span class="num2">54</span>份
                </div>
                <div>
                  同比增长
                </div>
              </el-col>
              <el-col :span="12" style="height: 100%">
                <div ref="chart2" style="width: 100%;height:100%;"></div>
              </el-col>
            </el-row>
        </el-col>
      </el-row>
    </container1>
  </div>

</template>

<script>
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import container1 from "../components/container1/index.vue";


import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
export default {
  mixins: [resize],
  name: 'left1',
  components: {
    scalseBox,
    bigScreenHead,
    rocketTit,
    container1,
  },
  data () {
    return {
      chart1: null,
      chart2: null,
      option1: {
        grid: {
          top: "20%",
          left: "10%",
          right: "10%",
          bottom: "20%"
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          show: false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
          //   axisTick: {
          //     show: false//不显示坐标轴刻度线
          //   },
          //   axisLine: {
          //     show: false,//不显示坐标轴线
          //   },
          //   axisLabel: {
          //     show: false,//不显示坐标轴上的文字
          //   },
          //   splitLine: {
          //     show: false//不显示网格线
          //   },
        },
        yAxis: {
          type: 'value',
          scale: true,
          show: false,
          //   splitLine: {
          //     show: false//不显示网格线
          //   },
        },
        series: [
          {
            data: [30, 60, 80, 70, 80, 90, 110],
            type: 'line',
            symbol: 'none',
            smooth: false,
            lineStyle: {
              color: '#f6d97e'
            },
            areaStyle: {//区域填充渐变颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#f6d97e' // 0% 处的颜色
                }, {
                  offset: .95, color: 'rgba(234,174,10, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }


          }
        ]
      },
      option2: {
        grid: {
          top: "20%",
          left: "10%",
          right: "10%",
          bottom: "20%"
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          show: false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
          //   axisTick: {
          //     show: false//不显示坐标轴刻度线
          //   },
          //   axisLine: {
          //     show: false,//不显示坐标轴线
          //   },
          //   axisLabel: {
          //     show: false,//不显示坐标轴上的文字
          //   },
          //   splitLine: {
          //     show: false//不显示网格线
          //   },
        },
        yAxis: {
          type: 'value',
          scale: true,
          show: false,
          //   splitLine: {
          //     show: false//不显示网格线
          //   },
        },
        series: [
          {
            data: [30, 60, 80, 70, 80, 90, 110],
            type: 'line',
            symbol: 'none',
            smooth: false,
            lineStyle: {
              color: 'rgba(16, 152, 255, 1)'
            },
            areaStyle: {//区域填充渐变颜色
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(16, 152, 255, 1)' // 0% 处的颜色
                }, {
                  offset: .95, color: 'rgba(16, 152, 255, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            }


          }
        ]
      },
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy () {
    if (!this.chart1 || !this.chart2) {
      return
    }
    this.chart1.dispose()
    this.chart2.dispose()
    this.chart1 = null
    this.chart2 = null
  },
  methods: {
    initChart () {
      this.chart1 = echarts.init(this.$refs.chart1, 'macarons');
      this.chart2 = echarts.init(this.$refs.chart2, 'macarons');
      this.chart1.setOption(this.option1);
      this.chart2.setOption(this.option2);
    }
  }
}
</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>