wt-biz-bigdata/src/views/home/components/chart1.vue

<template>
  <div>
    <charts
      style="margin-top: -30px"
      id="bizchart1"
      height="230px"
      width="460px"
      :option="option"
    />
  </div>
</template>

<script lang="js">
import charts from '../../../components/echarts/index.vue'

export default {
  components: { charts },
  data() {
    return {
      option:{
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [],
          axisLine: {
            lineStyle: {
              color: "#a4a2a2",
            }
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#a4a2a2",
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color:'rgba(128,126,126,0.25)'
            },
          },
        },
        series: [
          {
            data: [],
            symbol: "none",
            type: 'line',
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0.1,
                      color: '#c55D34'
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(255,185,91, 0.5)'
                    },
                    {
                      offset: 0.7,
                      color: 'rgba(255,185,91, 0.3)'
                    },
                    {
                      offset: 0.9,
                      color: 'rgba(255,185,91, 0.2)'
                    }
                  ],
                  globalCoord: false
                }
              }
            }
          },
        ]}

    }
  },
  created() {
    this.getAddUserCountByMonth()
  },
  methods: {
    getAddUserCountByMonth() {
      this.$api.biz.getAddUserCountByMonth().then(res => {
        if (res.code === 200) {
          this.option.xAxis.data = []
          this.option.series[0].data = []
          res.data.map(item=>{
            this.option.xAxis.data.push(item.month)
            this.option.series[0].data.push(item.count)
          })
          this.option.xAxis.data.reverse()
          this.option.series[0].data.reverse()
        }
      })
    }
  }
}
</script>