iot-front-ui/src/components/dashboard/portrait/supermarket/supermarketTrendChart.vue

<script>
import apiDashboard from "@/api/dashboard/apiDashboard";

export default {
  data() {
    let colors = {
      consumptionAmount: ['#399EE6'],
      consumptionOrder: ['#3CC2AC', '#7EE6D4']
    }
    return {
      xData: [],
      xBgColor: [],
      moneyData: [],
      orderData: [],
      option: {
        legend: {
          data: [
            '商超消费金额',
            '商超消费订单',
          ]
        },
        grid: {
          left: '0%', //默认10%
          right: '0%', //默认10%
          bottom: '15%', //默认60
          top: '15%',
          containLabel: true
          //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          data: [],
          splitArea: {
            show: true,
            areaStyle: {
              color: ['white']
            }
          }
        },
        yAxis: [
          {
            name: '金额(元)',
            type: 'value',
            nameTextStyle: {
              padding: [10, 0, 10, -12]
            },
          },
          {
            name: '订单(单)',
            type: 'value',
            nameTextStyle: {
              padding: [10, 0, 10, 10]
            },
          },
        ],
        dataZoom: [
          {
            type: 'slider',
            start: 0,
            end: 100,
            height: 12,
          },
          {
            type: 'inside',
            start: 0,
            end: 100,
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: '#fff',
            align: 'left',
            fontSize: 14
          },
          axisLine: {//x坐标轴轴线
            show: true,
            lineStyle: {//x坐标轴轴线样式
              color: '#000',//'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
            }
          },
          backgroundColor: 'rgba(0,0,0,0.8)',
        },
        series: [
          {
            name: '商超消费金额',
            data: [],
            type: 'bar',
            yAxisIndex:0,
            barWidth: 20,
            backgroundStyle: {
              color: 'rgb(253, 232, 229, 0.5)'
            },
            itemStyle: {
              color: colors.consumptionAmount[0]
            }
          },
          {
            name: '商超消费订单',
            data: [],
            type: 'line',
            yAxisIndex:1,
            smooth: true,
            showSymbol:false,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: colors.consumptionOrder[1], // 0% 处的颜色
              },{
                offset: 0.8,
                color: 'rgb(255,255,255,0.1)'
              }], false),
            },
            lineStyle: {
              color: colors.consumptionOrder[0],
              width: 1,
            },
            itemStyle: {
              color: colors.consumptionOrder[0],
            },
            emphasis: {
              scale:1.5
            },
          },
        ]
      },
    }
  },
  props: {
    height: Number,
    data: Array,
  },
  mounted() {
    this.$nextTick(()=>{
      this.initData()
      this.initChart()
    })
  },
  methods: {
    initData() {
      if (!this.data) {
        return;
      }
      for (let i = 0; i < this.data.length; i++) {
        let obj = this.data[i];
        this.xData.push(obj.label);
        this.moneyData.push(obj.money);
        this.orderData.push(obj.order);
        if (obj.money>=200) {
          this.xBgColor.push('rgb(253, 232, 229, 0.5)')
        } else {
          this.xBgColor.push('transparent')
        }
      }
    },
    initChart() {
      let chart = this.$echarts.init(this.$refs.myChart)
      this.chart = chart;
      chart.setOption(this.option);
      this.getData()
    },
    getData() {
      return apiDashboard.getSuperMarketTrendData(this.queryData).then(res=>{
        let data = this.$util.dataUtil.covertDataToEcharts(res, ['consumptionAmount','consumptionOrder'])
        this.$util.dataUtil.refreshEchartsData(this.chart, this.option, data)
      })
    }
  }
}
</script>

<template>
  <div style="width: 100%" :style="{height: height+'px'}" ref="myChart"></div>
</template>

<style lang="less" scoped>

</style>