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
99
100
101
102
103
104
105
106
107
| <template>
| <div id="echarts" style="width:300px;height:222px" ref="main"></div>
| </template>
|
| <script>
| export default {
| name: 'GasECharts',
| methods: {
| drawChart: function () {
| const myChart = this.$echarts.init(this.$refs.main)
| const option = {
| title: {
| text: '折线图堆叠'
| },
| // color: '#fff',
| tooltip: {
| trigger: 'axis'
| },
| legend: {
| data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
| },
| grid: {
| left: '3%',
| right: '4%',
| bottom: '3%',
| containLabel: true
| },
| toolbox: {
| feature: {
| saveAsImage: {}
| }
| },
| xAxis: {
| type: 'category',
| boundaryGap: false,
| data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
| axisLabel: {
| textStyle: {
| color: '#7edae8' // 坐标的字体颜色
| }
| },
| axisLine: {
| show: false, // 隐藏坐标轴
| lineStyle: {
| color: '#00eeff' // 坐标轴的颜色
| }
| }
| },
| yAxis: [{
| type: 'value',
| axisLabel: {
| textStyle: {
| color: '#7edae8' // 坐标的字体颜色
| }
| },
| axisLine: {
| show: false, // 隐藏坐标轴
| lineStyle: {
| color: '#00eeff' // 坐标轴的颜色
| }
| }
| }],
| series: [
| {
| name: '邮件营销',
| type: 'line',
| stack: '总量',
| data: [120, 132, 101, 134, 90, 230, 210]
| },
| {
| name: '联盟广告',
| type: 'line',
| stack: '总量',
| data: [220, 182, 191, 234, 290, 330, 310]
| },
| {
| name: '视频广告',
| type: 'line',
| stack: '总量',
| data: [150, 232, 201, 154, 190, 330, 410]
| },
| {
| name: '直接访问',
| type: 'line',
| stack: '总量',
| data: [320, 332, 301, 334, 390, 330, 320]
| },
| {
| name: '搜索引擎',
| type: 'line',
| stack: '总量',
| data: [820, 932, 901, 934, 1290, 1330, 1320]
| }
| ]
| }
| myChart.setOption(option)
| }
| },
| mounted () {
| this.drawChart()
| }
| }
| </script>
|
| <style scoped lang="less">
|
| </style>
|
|
