thoth-frontend-test/src/views/quality/components/statusChart.vue

<template>
  <section>
    <div class="control">
      <div class="pile-line" :class="[pileOrLine==='pile'?'active':'']" @click="changePileOrLine('pile')">堆叠面积图</div>
      <div class="pile-line" :class="[pileOrLine==='line'?'active':'']" @click="changePileOrLine('line')">折线图</div>
    </div>
    <div class="chart-contain">
      <normal-echart v-if="echartsOption" :chart-id="id" :option="echartsOption" />
    </div>
  </section>
</template>
<script>
import normalEchart from '@/components/chart/normalEchart'
export default {
  components: { normalEchart },
  props: {
    id: {
      type: String,
      default: 'status-chart',
      required: false
    },
    chartData: {
      type: Object,
      default: () => null,
      required: false
    }
  },
  data() {
    return {
      echartsOption: null,
      pileOrLine: 'pile' // 图的类型，pile：堆叠面积图，line：折线图
    }
  },
  watch: {
    chartData: {
      handler(newV) {
        this.changePileOrLine(this.pileOrLine)
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.changePileOrLine(this.pileOrLine)
  },
  methods: {
    changePileOrLine(type) { // 图类型切换
      this.pileOrLine = type
      if (type === 'pile') {
        this.setPile()
      } else {
        this.setLine()
      }
    },
    setPile() {
      this.echartsOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
          left: '0%'
        },
        grid: { left: '0%', right: '0%', bottom: '0%', top: '10%', containLabel: true },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [{ type: 'value' }],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            smooth: 0.5,
            stack: '总量',
            areaStyle: {},
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            smooth: 0.5,
            stack: '总量',
            areaStyle: {},
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            smooth: 0.5,
            stack: '总量',
            areaStyle: {},
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            smooth: 0.5,
            stack: '总量',
            areaStyle: {},
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            smooth: 0.5,
            stack: '总量',
            label: { normal: { show: true, position: 'top' }},
            areaStyle: {},
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    },
    setLine() {
      this.echartsOption = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
          left: '0%'
        },
        grid: { left: '0%', right: '0%', bottom: '0%', top: '10%', containLabel: true },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        yAxis: [{ type: 'value' }],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            label: { normal: { show: true, position: 'top' }},
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.control {
  display: flex;
  justify-content: flex-end;
  width: 84%;
  margin: 20px auto;
  .pile-line{
    font-size: 14px;
    width: 100px;
    display: inline-block;
    padding: 6px 10px;
    margin-left: 20px;
    color: #50A6FF;
    border: 1px solid #50A6FF;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
  }
  .active {
    color: #ffffff;
    background: #50A6FF;
  }
}
.chart-contain {
  position: relative;
  height: 400px;
  width: 84%;
  margin: auto;
  margin-top: 20px;
}
</style>