adweb3-web/src/views/adweb/data/chart/areaChart.vue

<template>
  <div :style="{ padding: '0' }">
    <div ref="area" style="width: 100%; height: 350px"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name:"areaChart",
  props:{
    dataSource:{
      default:{
        x:[],
        pv:[],
        uv:[],
        enquiry: []
      }
    },
  },
  data() {
    return {
      myChart: null,
    }
  },
  mounted(){
    this.drawChart()

  },

  watch:{
    dataSource:{
      handler:function (n,o){
        this.drawChart()
      },
      deep:true
    },

  },

  methods:{
    drawChart() {
      let that =  this
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
      that.myChart = echarts.init(that.$refs.area);
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },

        grid: {
          left: '20px',
          right: '40px',
          bottom: '0',
          top:'40px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false
            },
            data: this.dataSource.x
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'UV',
            type: 'line',
            stack: 'UV',
            symbol: 'circle',  //设定为实心点
            symbolSize: 6,   //设定实心点的大小
            color:"#544BEB",     //设定实线点的颜色
            areaStyle: {
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#544BEB' // 0% 处的颜色
                }, {
                  offset: 1, color: '#fff' // 100% 处的颜色
                }],

              }
            },
            emphasis: {
              focus: 'series'
            },
            smooth:true,
            lineStyle:{
              color:'#544BEB',
              width:2
            },
            data: this.dataSource.uv
          },
          {
            name: 'PV',
            type: 'line',
            symbol: 'circle',  //设定为实心点
            symbolSize: 6,   //设定实心点的大小
            color:"#F0B358",     //设定实线点的颜色
            stack: 'PV',
            areaStyle: {
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#F0B358' // 0% 处的颜色
                }, {
                  offset: 1, color: '#fff' // 100% 处的颜色
                }],
              }
            },
            emphasis: {
              focus: 'series'
            },
            smooth:true,
            lineStyle:{
              color:'#F0B358',
              width:2
            },
            data: this.dataSource.pv
          },
          {
            name: '询盘数',
            type: 'line',
            symbol: 'circle',  //设定为实心点
            symbolSize: 6,   //设定实心点的大小
            color:"#58CCA8",     //设定实线点的颜色
            stack: 'enquiry',
            areaStyle: {
              color:{
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#58CCA8' // 0% 处的颜色
                }, {
                  offset: 1, color: '#fff' // 100% 处的颜色
                }],
              }
            },
            emphasis: {
              focus: 'series'
            },
            smooth:true,
            lineStyle:{
              color:'#58CCA8',
              width:2
            },
            data: this.dataSource.enquiry
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      that.myChart.setOption(option);
      window.addEventListener("resize", () => {
        that.myChart.resize();
      });
    },
  },

  beforeDestroy() {
    window.removeEventListener("resize", () => {
      this.myChart.resize();
    });
  },

};
</script>

<style scoped>

</style>