wine-manager/src/views/super/dashboard/chart/ChartLines.vue

<template>
  <div :id="'chart-lines' + id" style="width: 100%; height: 100%" />
</template>

<script>
let myChart = null
import echarts from 'echarts'
export default {
  name: 'ChartLines',
  props: {
    id: {
      type: Number,
      default: 0
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    list: {
      handler() {
        myChart.clear()
        this.init()
      },
      deep: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      myChart = echarts.init(document.getElementById('chart-lines' + this.id))
      const time = []
      const data = []
      if (this.list.length > 0) {
        this.list.forEach(item => {
          time.push(item.time)
          data.push(item.total / 100)
        })
      }
      const options = {
        tooltip: {
          trigger: 'axis'
        },
        color: ['#6BBEAE', '#1890FF'],
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: time,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#aaa'
            }
          },
          axisLabel: {
            color: '#aaa'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '单位:元',
            boundaryGap: [0, '100%'],
            axisLine: { // y轴
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: [
          {
            name: `总收入`,
            type: 'line',
            // stack: 'Total',
            data: data,
            barWidth: 20,
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 元'
              }
            }
          }
        ]
      }
      myChart.setOption(options)
    }
  }
}
</script>

<style scoped>

</style>