iot-front-ui/src/components/dashboard/portrait/person/personTrendChart.vue

<script>
export default {
  data() {
    return {

    }
  },
  props: {
    height: Number,
  },
  mounted() {
    let app = this;
    this.$nextTick(()=>{
      setTimeout(()=>{
        app.initChart()
      },50)
    })
  },
  methods: {
    initChart() {
      let chart = this.$echarts.init(this.$refs.myChart)
      let defaultOption = {
        legend: {
          data: [
            '自有员工',
            '外协员工',
            '访客人员',
          ]
        },
        grid: {
          left: '0%', //默认10%
          right: '0%', //默认10%
          bottom: '15%', //默认60
          top: '15%',
          containLabel: true
          //grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: [
          {
            name: '人数(人)',
            type: 'value',
            nameTextStyle: {
              padding: [10, 0, 10, -12]
            },
          },
        ],
        dataZoom: [
          {
            start: 0,
            end: 100,
            height: 16,
          }
        ],
        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: [302, 395, 227, 375, 349, 396, 304, 226, 207, 383, 287, 243],
            type: 'line',
            stack: 'x',
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#A6C9FF' // 0% 处的颜色
              }, {
                offset: 0.8,
                color: '#ffffff' // 100% 处的颜色
              }], false),
            },
            lineStyle: {
              color: "#5A9BFE",
              width: 1,
            },
            emphasis: {
              scale:1.5
            }
          },
          {
            name: '外协员工',
            data: [108, 104, 117, 152, 157, 121, 138, 146, 106, 143, 132, 177],
            type: 'line',
            stack: 'x',
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#B0E5CB' // 0% 处的颜色
              }, {
                offset: 0.8,
                color: '#ffffff' // 100% 处的颜色
              }], false),
            },
            lineStyle: {
              color: "#62CC97",
              width: 1,
            },
            emphasis: {
              scale:1.5
            },
          },
          {
            name: '访客人员',
            data: [40, 15, 59, 18, 33, 31, 31, 26, 34, 26, 28, 40],
            type: 'line',
            stack: 'x',
            smooth: true,
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#FFD7AC' // 0% 处的颜色
              }, {
                offset: 0.8,
                color: '#ffffff' // 100% 处的颜色
              }], false),
            },
            lineStyle: {
              color: "#FDB456",
              width: 1,
            },
            emphasis: {
              scale:1.5
            },
          }
        ]
      };
      //Object.assign(defaultOption, this.option)
      chart.setOption(defaultOption)
    }
  }
}
</script>

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

<style lang="less" scoped>

</style>