Blame view

src/components/ECharts/lineEcharts.vue 2.49 KB
c1b532ad   梁保满   权限配置,路由基础设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
  <template>
      <div>
        <div :id="id" :style="{width: width, height: height}"></div>
      </div>
  </template>
  
  <script>
  import * as echarts from "echarts"
  export default {
    name: "lineEcharts",
    props: {
      id: {
        type: String,
        default: "myChart"
      },
      width: {
        type: String,
        default: "100%"
      },
      height: {
        type: String,
        default: "100%"
      }
    },
    data () {
      return {
        chart: null
      }
    },
    mounted () {
      this.initChart()
    },
    methods: {
      initChart () {
        this.chart = echarts.init(document.getElementById(this.id))
  
        this.chart.setOption({
          title: {
            text: "折线图堆叠"
          },
          tooltip: {
            trigger: "axis"
          },
          legend: {
            data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              name: "邮件营销",
              type: "line",
              stack: "总量",
              data: [8200, 6320, 5010, 4340, 3400, 2300, 1100]
            },
            {
              name: "联盟广告",
              type: "line",
              stack: "总量",
              data: [2200, 3820, 1910, 2340, 4900, 3300, 1100]
            },
            {
              name: "视频广告",
              type: "line",
              stack: "总量",
              data: [2500, 4302, 5010, 2540, 6900, 5300, 6410]
            },
            {
              name: "直接访问",
              type: "line",
              stack: "总量",
              data: [5320, 7332, 9301, 6334, 5390, 4330, 1320]
            },
            {
              name: "搜索引擎",
              type: "line",
              stack: "总量",
              data: [8820, 1932, 5901, 7304, 2900, 3300, 8200]
            }
          ]
        })
d4283687   梁保满   首页布局完成,页面顶部返回组件
99
100
101
102
103
104
105
106
107
108
109
110
111
112
  
        this.selfAdaption()
      },
      // echart自适应
      selfAdaption() {
        let that = this;
        setTimeout(() => {
          window.onresize = function () {
            if (that.$refs.echarts) {
              that.$refs.echarts.chart.resize();
            }
          };
        }, 10);
      },
c1b532ad   梁保满   权限配置,路由基础设置
113
114
115
116
117
118
119
    }
  }
  </script>
  
  <style scoped>
  
  </style>