全国航班数据分析大屏

一、项目效果


在线预览


二、创建项目


  1. 创建项目
1
2
vue create demo-echart-1
// 需要勾选scss解析模块
  1. 安装依赖：
1
npm i echarts -S

  1. 复制图片资源到assets目录下

  2. 复制字体资源到assets目录下

  3. 复制flexible.js和china.js到assets/js目录下
    其中flexible是阿里做的一个实现屏幕自适应的方案，核心思路是将屏幕宽度分成24份，每一份就是一个基本的rem单位
    而china.js则是借助echarts画的一张中国地图，注册在echarts中，可通过map:’china’访问地图

  4. 创建index.scss，实现全局样式：

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
* {

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

li {

    list-style: none;

}

// 将字体DS_DIGIT.TTF定名为electronicFont

@font-face {

    font-family: electronicFont;

    src: url(../font/DS_DIGIT.TTF)

}

body {

    background: url(../img/bg.png) no-repeat top center;

    line-height: 1.15;

}

@media screen and (max-width: 1024px) {

    html {

        font-size: 42px !important;

    }

}

@media screen and (min-width: 1920px) {

    html {

        font-size: 80px !important;

    }

}
  1. 创建vue.config.js，修改标题：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

module.exports = {

    pages: {

        index: {

            entry: 'src/main.js',

            title: '全国航班信息'

        }

    }

}

  1. 将Hello.vue改成Echarts.vue

  2. 在main.js中引入相关模块：

1
2
3
4
5
6

import '@/assets/js/flexible.js';

import '@/assets/js/china.js';

import '@/assets/css/index.scss'

三、标题和时钟


页面部分：

1
2
3
4
5
6
7
8
9
10
11
<header>

    <h1>全国航班数据分析大屏</h1>

    <div class="show-time">

        当前时间：{{currentTime.year}}年{{currentTime.month}}月{{currentTime.day}}日-{{currentTime.hour}}时{{currentTime.minute}}分{{currentTime.second}}秒

    </div>

</header>

代码部分：

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
data() {

    return {

        currentTime: {

        year: 1993,

        month: 1,

        day: 1,

        minute: 0,

        hour: 0,

        second: 0

        },

        timer: null

    }

},

mounted() {

    this.initTime()

},

destoryed() {

    if (this.timer) {

        clearInterval(this.timer)

        this.timer = null

    }

},

method: {

    initTime() {

        let date = new Date()

        this.currentTime.year = date.getFullYear().toString().padStart(2, '0')

        this.currentTime.month = (date.getMonth() + 1).toString().padStart(2, '0')

        this.currentTime.day = date.getDate().toString().padStart(2, '0')

        this.currentTime.hour = date.getHours().toString().padStart(2, '0')

        this.currentTime.minute = date.getMinutes().toString().padStart(2, '0')

        this.currentTime.second = date.getSeconds().toString().padStart(2, '0')

        if (!this.timer) this.timer = setInterval(this.initTime, 1000)

    }

}

CSS部分：

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
header {

    height: 1.25rem

    background: url(../assets/img/bg.png) no-repeat;

    background-size: 100% 100%;

    position: relative;

    h1 {

        font-size: .475rem;

        line-height: 1rem;

        text-align: center;

        color: rgba(255, 255, 255, .87)

    }

    .show-time {

        position: absolute;

        top: 0;

        right: .375rem;

        line-height: .9375rem;

        color: rgba(255, 255, 255, .7);

        font-size: .25rem;

    }

}

四、柱形图 - 增长率


页面部分：

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
<section class="mainbox">

    <div class="column">

        <div class="panel">

            <h2>增长率</h2>

            <div class="chart" ref="chart_bar1"></div>

            <div class="footer" />

        </div>

    </div>

    <div class="column">

        ...

    </div>

    <div class="column">

        ...

    </div>

</section>

代码部分：

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
import * as echarts import 'echarts'

data() {

    return {

        ...

        chartBar1: null,

        chartBar1_option: {

            color: ['2f89cf'],
            // 柱子的颜色
            tooltip: { // 鼠标移上去显示的提示框
                trigger: 'axis',
                // 根据坐标轴来显示提示框，一般用于柱状图、折线图
                axisPointer: {

                    type: 'shadow' // 高亮时表现为阴影效果
                },

                grid: { // grid容器，用来绘制图表
                    left: '0%',
                    //相当于padding的left、right、top、bottom
                    top: '10px'

                    right: '20px',

                    bottom: '2%',

                    containLabel: true // 刻度标签是否参与位置参数的计算
                },

                xAxis: [ //x坐标轴参数
                {

                    type: 'category',
                    // 类目轴，从date中获取数据
                    data: ['2016年', '2017年', '2018年', '2019年', '2020年', '2021年', '2022年'],

                    axisTick: {

                        alignWithLabel: true // 刻度与标签居中对齐
                    },

                    axisLabel: {

                        color: 'rgba(255, 255, 255, .8)',
                        //刻度文字的颜色
                        fontSize: 10 // 刻度文字的大小
                    },

                    axisLine: {

                        show: false // 是否显示坐标轴轴线
                    }

                }

                ],

                yAxis: [

                {

                    type: 'value',
                    //数值轴
                    axisLabel: {

                        color: rgba(255, 255, 255, .6),

                        fontSize: 12

                    },

                    axisLine: {

                        lineStyle: {

                            color: rgba(255, 255, 255, .6),

                            width: 2

                        }

                    },

                    splitLine: { // 横向分割线
                        lineStyle: {

                            color: rgba(255, 255, 255, .1)

                        }

                    }

                }

                ],

                series: [

                {

                    name: '增长率',

                    type: 'bar',
                    // 确定为柱形图
                    barWidth: '35%',
                    // 柱子宽度
                    data: [200, 300, 300, 900, 1500, 1200, 600],

                    itemStyle: {

                        barBorderRadius: 5 // 柱子圆角
                    }

                }

                ]

            }

        },

        resizeChart: () = >{

            if (this.chartBar1) this.chartBar1.resize()

        }

    }

},

mounted() {

    ...

    this.initCharts()

},

destroyed() {

    ...

    window.removeEventListener('resize', this.resizeChart)

},

methods: {

    initCharts() {

        this.chartBar1 = echarts.init(this.$refs.chart_bar1)

        this.chartBar1.setOption(this.chartBar1_option)

        window.addEventListener('resize', this.resizeChart)

    }

}

CSS部分：

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
.mainbox {

    display: flex;

    min - width: 1024px;

    min - height: 768px;

    padding: .125rem.125rem 0; //顶部，左右有间距，底部不需要
    margin: 0 auto;

    column {

        flex: 3;

        & ::nth - child(2) { // nth-child不是取子元素，而是当前同级元素
            flex: 5; // 中部面板的宽度更大一些
            margin: 0.125rem.1875rem;

            overflow: hidden;

        }

        panel {

            position: relative;

            width: 100 % ;

            height: 3.875rem;

            padding: 0 0.1875rem.5rem;

            margin - bottom: .1875rem;

            border: 1px solid rgba(25, 186, 139, .17)

            background: url(.. / assets / img / line.png) rgba(255, 255, 255, .3)

            h2 {

                text - align: center;

                font - size: .25rem;

                line - height: .6rem;

                height: .6rem;

                color: #fff;

                font - weight: 400;

            }

            .chart {

                height: 3rem;

            }

            & ::before {

                position: absolute;

                top: 0;

                left: 0;

                width: 10px;

                height: 10px;

                border - left: 2px solid#02a6b5;

                border - top: 2px solid#02a6b5;

                content: '';

            }

            & ::after {

                position: absolute;

                right: 0;

                top: 0;

                width: 10px;

                height: 10px;

                border - right: 2px solid#02a6b5;

                border - top: 2px solid#02a6b5;

                content: '';

            }

            .footer {

                position: absolute;

                bottom: 0;

                left: 0;

                width: 100 % ;

                & ::before {

                    position: absolute;

                    bottom: 0;

                    left: 0;

                    width: 10px;

                    height: 10px;

                    border - left: 2px solid#02a6b5;

                    border - bottom: 2px solid#02a6b5;

                    content: '';

                }

                & ::after {

                    position: absolute;

                    bottom: 0;

                    right: 0;

                    width: 10px;

                    height: 10px;

                    border - right: 2px solid#02a6b5;

                    border - bottom: 2px solid#02a6b5;

                    content: '';

                }

            }

        }

    }

}

五、线形图 - 每月运输量


页面部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class = "panel">

    <h2>

        线形图 - 每月运输量

        <a v-for = "(item, i) in yearData": key = "i": class = "i === curIndex ? 'a-active' : ''"href = "#"@click = "onYearChange(i)" > {{ item.year }} </a>

    </h2 >

    <div class = "chart"ref = "chart_line1" > </div>

    <div class="footer"></div >

</div>

代码部分：

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
data() {

    return {

        ...

        curIndex: 0,

        yearData: [

        {

        year: '2021',

        data: [

        [24, 60, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],

        [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 189, 79]

        ]

        },

        {

        year: '2022',

        data: [

        [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],

        [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]

        ]

        }

        ],

        chartLine1: null,

        chartLine1_option: {

        color: ['#00f2f1', '#ed3f35'], / / 折线的颜色

        tooltip: {

            trigger: 'axis'

        },

        legend: { // 标记
            textStyle: {

                color: '#4c9dfb' // 标记文字的颜色
            },

            right: '10%'

        },

        grid: {

            top: '20%',

            left: '0%',

            right: '8%',

            bottom: '3%',

            containLabel: true,

            show: true,
            // 显示直角坐标轴网格
            borderColor: '#012f4a' // 坐标轴边框颜色
        },

        xAxis: {

            type: 'category',

            boundaryGap: false,
            //
            类目轴下false的时候折线从最左边开始，一直到最右边，true的时候折线两边留有空隙

            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

            axisTick: {

                show: false

            },

            axisLabel: {

                color: '#4c9bfb'

            },

            axisLine: {

                show: false

            }

        },

        yAxis: {

            type: 'value',

            axisTick: {

                show: false

            },

            axisLabel: {

                color: '#4c9bfb'

            },

            axisLine: {

                show: false

            },

            splitLine: {

                lineStyle: {

                    color: '#012f4a'

                }

            }

        },

        series: [

        {

            name: '进入',

            smooth: true,
            // 平滑显示折线
            type: 'line',

            data: []

        },

        {

            name: '离开',

            smooth: true,

            type: 'line',

            data: []

        }

        ]

        },

        resizeChart: () = >{

            if (this.chartLine1) chartLine1.resize()

        }

    }

},

methods: {

    initChart() {

        this.chartLine1 = echarts.init(this.$refs.chart_line1)

        this.refreshChartLine1()

    },

    refreshChartLine1() {

        for (let i = 0; i < this.yearData.length; i++) {

            this.chartLine1_option.series[i].data = this.yearData[curIndex].data[i]

        }

        this.chartLine1.setOption(this.chartLine1_option)

    }

    onYearChange(index) {

        this.curIndex = index

        this.refreshChartLine1()

    }

}

样式部分：

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
.mainbox {

    ...

    .column {

        ...

        .panel {

            ...

            h2 {

                ...

                a {

                    color: #a7a7a7;

                    text - decoration: none;

                    margin: 0.125rem;

                    & .a - active {

                        color: #fff;

                    }

                }

            }

        }

    }

}

六、饼形图 - 乘客年龄分布


页面部分：

1
2
3
4
5
6
7
8
9
< div class = "panel" >

    <h2 > 乘客年龄分布 < /h2>

    <div class="chart" ref="chart_pie1"></div >

    <div class = "footer" > </div>

</div >

代码部分：

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
data() {

    return {

        chart_pie1: null,

        chart_pie1_option: {

            color: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"],

            tooltip: {

                trigger: 'item',
                // 散点图、饼形图专用
                formatter: '{a} <br/> {b}: {c}({d}%)' //
                指定提示框的文本格式，a是series.name，b是data[i].name，c是data[i].value，d是百分比

            },

            legend: {

                bottom: 0,

                left: 50,

                itemWidth: 10,

                itemHeight: 10,

                textStyle: {

                    color: 'rgba(255, 255, 255, .5)',

                    fontSize: 10

                }

            },

            series: [

            {

                name: '年龄分布',

                type: 'pie',

                center: ['50%', '42%'],
                //
                饼图中心的位置，第一个是横坐标，第二个是纵坐标

                radius: ['40%', '60%'],
                //
                饼图的半径，第一个是外半径，第二个是内半径

                avoidLabelOverlap: false,
                // 用来防止标签重叠
                label: {

                    show: false,

                    position: 'center'

                },

                labelLine: {

                    show: false

                },

                data: [

                {

                    name: '0岁以上',

                    value: 1

                },

                {

                    name: '20-29岁',

                    value: 4

                },

                {

                    name: '30-39岁',

                    value: 2

                },

                {

                    name: '40-49岁',

                    value: 2

                },

                {

                    name: '50岁以上',

                    value: 1

                }

                ]

            }

            ]

        }

    },

    resizeChart: () = >{

        if (this.chart_pie1) this.chart_pie1.resize()

    }

},

methods: {

    initChart() {

        this.chart_pie1 = echart.init(this.$refs.chart_pie1)

        this.chart_pie1.setOption(this.chart_pie1_option)

    }

}

七、柱形图 - 延误率


页面部分：

1
2
3
4
5
6
7
8
9
< div class = "panel" >

    <h2 > 延误率 < /h2>

    <div class="chart" ref="chart_bar2"></div >

    <div class = "footer" > </div>

</div >

代码部分：

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
data() {

    return {

        chart_bar2: null,

        chart_bar2_color: ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"],

        chart_bar2_option: {

            grid: {

                top: '10%',

                left: '10%',

                bottom: '10%'

            },

            xAxis: {

                show: false

            },

            yAxis: [

            {

                type: 'category',

                inverse: true,
                // 数组倒置，由上往下从7月开始排
                axisLine: {

                    show: false

                },

                axisTick: {

                    show: false

                },

                axisLabel: {

                    color: '#fff'

                },

                data: ['7月', '8月', '9月', '10月', '11月']

            },

            { // 右侧纵轴标签
                inverse: true,

                show: true,

                axisLine: {

                    show: false

                },

                axisTick: {

                    show: false

                },

                axisLabel: {

                    color: '#fff'

                },

                data: [702, 350, 610, 793, 664]

            }

            ],

            series: [

            {

                name: '条',

                type: 'bar',

                barCategoryGap: 50,
                // 柱间距离
                barWidth: 10,
                // 柱子宽度
                yAxisIndex: 0,
                // 多个y轴的顺序
                itemStyle: {

                    barBorderRadius: 20,

                    color: param = >this.chart_bar2_color[param.dataIndex]

                },

                data: [70, 34, 60, 78, 69],

                label: {

                    show: true,

                    position: 'inside',

                    formatter: '{c}%'

                }

            },

            {

                name: '框',

                type: 'bar',

                barCategoryGap: 50,

                barWidth: 10,

                itemStyle: {

                    color: none,

                    borderColor: '#00c1de',

                    borderWidth: 2,

                    barBorderRadius: 15

                },

                data: [100, 100, 100, 100, 100]

            }

            ]

        },

        resizeChart: () = >{

            if (this.chart_bar2) this.chart_bar2.resize()

        }

    }

},

methods: {

    initChart() {

        this.chart_bar2 = echarts.init(this.$refs.chart_bar2)

        this.chart_bar2.setOption(this.chart_bar2_option)

    }

}

八、线形图 - 乘客量


页面部分：

1
2
3
4
5
6
7
8
9
< div class = "panel" >

    <h2 > 乘客量 < /h2>

    <div class="chart" ref="chart_line2"></div >

    <div class = "footer" > </div>

</div >

代码部分：

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
data() {

    return {

        chart_line2: null,

        chart_line2_option: {

            tooltip: {

                trigger: 'axis'

            },

            legend: {

                top: '0',

                textStyle: {

                    color: 'rgba(255, 255, 255, .5)',

                    fontSize: 12

                }

            },

            grid: {

                top: '30',

                left: '10',

                right: '30',

                bottom: '10',

                containLabel: true

            },

            xAxis: [

            {

                type: 'category',

                boundaryGap: false,

                axisLabel: {

                    textStyle: {

                        color: 'rgba(255, 255, 255, .6)',

                        fontSize: 12

                    }

                },

                axisLine: {

                    lineStyle: {

                        color: 'rgba(255, 255, 255, .2)'

                    }

                },

                data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"]

            }

            ],

            yAxis: [

            {

                type: 'value',

                axisTick: {

                    show: false

                },

                axisLine: {

                    lineStyle: {

                        color: 'rgba(255, 255, 255, .1)'

                    }

                },

                axisLabel: {

                    textStyle: {

                        color: 'rgba(255, 255, 255, .6)',

                        fontSize: 12

                    }

                },

                splitLine: {

                    lineStyle: {

                        color: 'rgba(255, 255, 255, .1)'

                    }

                }

            }

            ],

            series: [

            {

                name: '男性',

                type: 'line',

                smooth: true,

                lineStyle: {

                    color: '#0184d5',

                    width: 2

                },

                areaStyle: { // 折线下面的部分
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ //
                    前四个参数分别代表位置右下左上，0001代表从上往下渐变

                    {

                        offset: 0,

                        color: 'rgba(1, 132, 213, .4)'

                    },

                    {

                        offset: .8,

                        color: 'rgba(1, 132, 213, .1)'

                    }

                    ], false),
                    // 第六个参数是用全局坐标轴
                    shadowColor: 'rgba(0, 0, 0, .1)'

                },

                symbol: 'circle',
                // 标记是圆点形状
                symbolSize: 5,

                showSymbol: false,
                // 只在鼠标移上去时显示标记点
                itemStyle: {

                    color: '#0184d5',

                    borderColor: 'rgba(221, 220, 107, .1)',

                    borderWidth: 12

                },

                data: [30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 30, 60, 20, 40, 30, 40, 30, 40, 30, 40, 20, 60, 50, 40]

            },

            {

                name: '女性',

                type: 'line',

                smooth: true,

                lineStyle: {

                    normal: {

                        color: '#00d887',

                        width: 2

                    }

                },

                areaStyle: {

                    normal: {

                        color: new echart.graphic.LinearGradient(0, 0, 0, 1, [

                        {

                            offset: 0,

                            color: 'rgba(0, 216, 135, .4)'

                        },

                        {

                            offset: .8,

                            color: 'rgba(0, 216, 135, .1)'

                        }

                        ], false),

                        shadowColor: 'rgba(0, 0, 0, .1)'

                    }

                },

                symbol: 'circle',

                symbolSize: 5,

                itemStyle: {

                    color: '#00d887',

                    borderColor: 'rgba(221, 220, 107, .1)',

                    borderWidth: 12

                },

                showSymbol: false,

                data: [130, 10, 20, 40, 30, 40, 80, 60, 20, 40, 90, 40, 20, 140, 30, 40, 130, 20, 20, 40, 80, 70, 30, 40, 30, 120, 20, 99, 50, 20]

            }

            ]

        },

        resizeChart: () = >{

            if (this.chart_line2) this.chart_line2.resize()

        }

    }

},

methods: {

    initChart() {

        this.chart_line2 = echart.init(this.$refs.chart_line2)

        this.chart_line2.setOption(this.chart_line2_option)

    }

}

九、饼形图 - 地区分布


页面部分：

1
2
3
4
5
6
7
8
9
< div class = "panel" >

<h2 > 地区分布 < /h2>

<div class="chart" ref="chart_pie2"></div >

<div class = "footer" > </div>

</div >

代码部分：

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
data() {

    return {

        chart_pie2: null,

        chart_pie2_option: {

            color: ['#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

            tooltip: {

                trigger: 'axis',

                formatter: '{a} <br/> {b}: {c} ({d}%)'

            },

            legend: {

                bottom: 0,

                itemWidth: 10,

                itemHeight: 10,

                textStyle: {

                    color: 'rgba(255, 255, 255, .5)',

                    fontSize: 10

                }

            },

            series: [

            {

                name: '地区分布',

                type: 'pie',

                center: ['50%', '42%'],

                radius: ['10%', '60%'],
                // 内半径和外半径
                roseType: 'radius',
                //
                用玫瑰花瓣的方式展现图表，radius会根据数据大小决定扇面大小，area则一样

                label: {

                    fontSize: 10

                },

                labelLine: {

                    length: 6,
                    // 标签折线中斜的部分
                    length2: 8 // 标签折线中横的部分
                },

                data: [

                {

                    name: '北京',

                    value: 26

                },

                {

                    name: '山东',

                    value: 24

                },

                {

                    name: '河北',

                    value: 25

                },

                {

                    name: '江苏',

                    value: 20

                },

                {

                    name: '浙江',

                    value: 25

                },

                {

                    name: '四川',

                    value: 30

                },

                {

                    name: '湖北',

                    value: 42

                }

                ]

            }

            ]

        },

        resizeChart: () = >{

            if (this.chart_pie2) this.chart_pie2.resize()

        }

    }

},

methods: {

    initChart() {

        this.chart_pie2 = echart.init(this.$refs.chart_pie2)

        this.chart_pie2.setOption(this.chart_pie2_option)

    }

}

十、中间数字大屏 - 载重量


页面部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="no">
  <div class="no-hd">
    <ul>
      <li>10345
        < /li>
          <li>12353</li>
    </ul>
  </div>
  <div class="no-bd">
    <ul>
      <li>昨日载重量
        < /li>
          <li>今日载重量</li>
    </ul>
  </div>
</div>

样式部分：

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
.no {
	background-color: rgba(101, 132, 226, .1);
	padding: .1875rem;
	.no-hd {
        position: relative;
        border: 1px solid rgba(25, 186, 137, .17);
        &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: .375rem;
            height: .125rem;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
            content: '';
        }

        &::after {
            position: absolute;
            right: 0;
            bottom: 0;
            width: .375rem;
            height: .125rem;
            border-right: 2px solid #02a6b5;
            border-bottom: 2px solid #02a6b5;
            content: '';
        }

        ul {
            display: flex;
            li {
                position: relative;
                flex: 1;
                font-family: eletronicFont;
                font-size: .875rem;
                line-height: 1rem;
                color: #ffeb7b;
                text-align: center;
                &:first-child::after {
                    content: '';
                    position: absolute;
                    top: 25%;
                    right: 0;
                    height: 50%;
                    width: 1px;
                    background-color: rgba(255, 255, 255, .3);
                }

            }

        }

    }

    .no-bd {
        ul {
            display: flex;
            li {
                flex: 1;
                text-align: center;
                color: rgba(255, 255, 255, .7);
                font-size: .225rem;
                height: .5rem;
                line-height: .5rem;
                padding-top: .125rem;
            }
        }
    }
}

十一、中国地图与航班信息


页面部分：

1
2
3
4
5
6
7
8
9
10
11
<div class="map">

    <div class="map1"></div >

    <div class = "map2" > </div>

    <div class="map3"></div >

    <div class = "chart"ref = "chart_map" > </div>

</div >

代码部分：

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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
data() {

    geoCoordMap: { // 全国各大城市的坐标点
        '上海': [121.4648, 31.2891],

        '东莞': [113.8953, 22.901],

        '东营': [118.7073, 37.5513],

        '中山': [113.4229, 22.478],

        '临汾': [111.4783, 36.1615],

        '临沂': [118.3118, 35.2936],

        '丹东': [124.541, 40.4242],

        '丽水': [119.5642, 28.1854],

        '乌鲁木齐': [87.9236, 43.5883],

        '佛山': [112.8955, 23.1097],

        '保定': [115.0488, 39.0948],

        '兰州': [103.5901, 36.3043],

        '包头': [110.3467, 41.4899],

        '北京': [116.4551, 40.2539],

        '北海': [109.314, 21.6211],

        '南京': [118.8062, 31.9208],

        '南宁': [108.479, 23.1152],

        '南昌': [116.0046, 28.6633],

        '南通': [121.1023, 32.1625],

        '厦门': [118.1689, 24.6478],

        '台州': [121.1353, 28.6688],

        '合肥': [117.29, 32.0581],

        '呼和浩特': [111.4124, 40.4901],

        '咸阳': [108.4131, 34.8706],

        '哈尔滨': [127.9688, 45.368],

        '唐山': [118.4766, 39.6826],

        '嘉兴': [120.9155, 30.6354],

        '大同': [113.7854, 39.8035],

        '大连': [122.2229, 39.4409],

        '天津': [117.4219, 39.4189],

        '太原': [112.3352, 37.9413],

        '威海': [121.9482, 37.1393],

        '宁波': [121.5967, 29.6466],

        '宝鸡': [107.1826, 34.3433],

        '宿迁': [118.5535, 33.7775],

        '常州': [119.4543, 31.5582],

        '广州': [113.5107, 23.2196],

        '廊坊': [116.521, 39.0509],

        '延安': [109.1052, 36.4252],

        '张家口': [115.1477, 40.8527],

        '徐州': [117.5208, 34.3268],

        '德州': [116.6858, 37.2107],

        '惠州': [114.6204, 23.1647],

        '成都': [103.9526, 30.7617],

        '扬州': [119.4653, 32.8162],

        '承德': [117.5757, 41.4075],

        '拉萨': [91.1865, 30.1465],

        '无锡': [120.3442, 31.5527],

        '日照': [119.2786, 35.5023],

        '昆明': [102.9199, 25.4663],

        '杭州': [119.5313, 29.8773],

        '枣庄': [117.323, 34.8926],

        '柳州': [109.3799, 24.9774],

        '株洲': [113.5327, 27.0319],

        '武汉': [114.3896, 30.6628],

        '汕头': [117.1692, 23.3405],

        '江门': [112.6318, 22.1484],

        '沈阳': [123.1238, 42.1216],

        '沧州': [116.8286, 38.2104],

        '河源': [114.917, 23.9722],

        '泉州': [118.3228, 25.1147],

        '泰安': [117.0264, 36.0516],

        '泰州': [120.0586, 32.5525],

        '济南': [117.1582, 36.8701],

        '济宁': [116.8286, 35.3375],

        '海口': [110.3893, 19.8516],

        '淄博': [118.0371, 36.6064],

        '淮安': [118.927, 33.4039],

        '深圳': [114.5435, 22.5439],

        '清远': [112.9175, 24.3292],

        '温州': [120.498, 27.8119],

        '渭南': [109.7864, 35.0299],

        '湖州': [119.8608, 30.7782],

        '湘潭': [112.5439, 27.7075],

        '滨州': [117.8174, 37.4963],

        '潍坊': [119.0918, 36.524],

        '烟台': [120.7397, 37.5128],

        '玉溪': [101.9312, 23.8898],

        '珠海': [113.7305, 22.1155],

        '盐城': [120.2234, 33.5577],

        '盘锦': [121.9482, 41.0449],

        '石家庄': [114.4995, 38.1006],

        '福州': [119.4543, 25.9222],

        '秦皇岛': [119.2126, 40.0232],

        '绍兴': [120.564, 29.7565],

        '聊城': [115.9167, 36.4032],

        '肇庆': [112.1265, 23.5822],

        '舟山': [122.2559, 30.2234],

        '苏州': [120.6519, 31.3989],

        '莱芜': [117.6526, 36.2714],

        '菏泽': [115.6201, 35.2057],

        '营口': [122.4316, 40.4297],

        '葫芦岛': [120.1575, 40.578],

        '衡水': [115.8838, 37.7161],

        '衢州': [118.6853, 28.8666],

        '西宁': [101.4038, 36.8207],

        '西安': [109.1162, 34.2004],

        '贵阳': [106.6992, 26.7682],

        '连云港': [119.1248, 34.552],

        '邢台': [114.8071, 37.2821],

        '邯郸': [114.4775, 36.535],

        '郑州': [113.4668, 34.6234],

        '鄂尔多斯': [108.9734, 39.2487],

        '重庆': [107.7539, 30.1904],

        '金华': [120.0037, 29.1028],

        '铜川': [109.0393, 35.1947],

        '银川': [106.3586, 38.1775],

        '镇江': [119.4763, 31.9702],

        '长春': [125.8154, 44.2584],

        '长沙': [113.0823, 28.2568],

        '长治': [112.8625, 36.4746],

        '阳泉': [113.4778, 38.0951],

        '青岛': [120.4651, 36.3373],

        '韶关': [113.7964, 24.7028]

    },

    XAData: [

    [{
        name: '西安'
    },
    {
        name: '北京',
        value: 100
    }],

    [{
        name: '西安'
    },
    {
        name: '上海',
        value: 100
    }],

    [{
        name: '西安'
    },
    {
        name: '广州',
        value: 100
    }],

    [{
        name: '西安'
    },
    {
        name: '西宁',
        value: 100
    }],

    [{
        name: '西安'
    },
    {
        name: '银川',
        value: 100
    }]

    ],

    XNData: [

    [{
        name: '西宁'
    },
    {
        name: '北京',
        value: 100
    }],

    [{
        name: '西宁'
    },
    {
        name: '上海',
        value: 100
    }],

    [{
        name: '西宁'
    },
    {
        name: '广州',
        value: 100
    }],

    [{
        name: '西宁'
    },
    {
        name: '西安',
        value: 100
    }],

    [{
        name: '西宁'
    },
    {
        name: '武汉',
        value: 100
    }],

    [{
        name: '武汉'
    },
    {
        name: '西宁',
        value: 100
    }],

    [{
        name: '武汉'
    },
    {
        name: '哈尔滨',
        value: 100
    }],

    [{
        name: '武汉'
    },
    {
        name: '乌鲁木齐',
        value: 100
    }],

    [{
        name: '西宁'
    },
    {
        name: '银川',
        value: 100
    }]

    ],

    YCData: [

    [{
        name: '银川'
    },
    {
        name: '北京',
        value: 100
    }],

    [{
        name: '银川'
    },
    {
        name: '广州',
        value: 100
    }],

    [{
        name: '银川'
    },
    {
        name: '上海',
        value: 100
    }],

    [{
        name: '银川'
    },
    {
        name: '西安',
        value: 100
    }],

    [{
        name: '银川'
    },
    {
        name: '西宁',
        value: 100
    }],

    ],

    planePath: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',
    // 使用SVG绘制的小飞机图标
    chart_map_color: ['#a6c84c', '#ffa022', '#46bee9'],

    series: [],

    chart_map: null,

    chart_map_option: {

        tooltip: {

            trigger: 'item',

            formatter: (params, ticket, callback) = >{

                if (params.type === 'effectScatter') return '线路' + params.data.name + '' + params.data.value[2]

                else if (params.type === 'lines') return params.data.fromname + '>' + params.data.toname + '<br/>' + params.data.value

                else return params.name

            }

        },

        legend: {

            orient: 'vertical',
            // 竖向展示
            top: 'bottom',

            left: 'right',

            data: ['西安 Top3', '西宁 Top3', '银川 Top3'],

            textStyle: {
                color: '#fff'
            },

            selectedMode: 'multiple' //多选
        },

        geo: {

            map: 'china1',

            zoom: 1.2,

            label: {

                emphasis: { // 省会标签颜色
                    show: true,

                    color: '#fff'

                }

            },

            roam: true,
            // 是否开启缩放和平移
            itemStyle: {

                normal: {

                    areaColor: 'rgba(34, 70, 168, .7)',

                    borderColor: '#0692a4'

                },

                emphasis: {

                    areaColor: 'rgba(119, 139, 224, .548)' // 省会高亮颜色
                }

            }

        }

    },

    resizeChart: () = >{

        if (this.chart_map) this.chart_map.resize()

    }

},

methods: {

    initChart() {

        this.chart_map = echart.init(this.$refs.chart_map)

        this.refreshMap()

        this.chart_map.setOption(this.chart_map_option)

    },

    refreshMap() {

        [

        ['西安', this.XAData],

        ['西宁', this.XNData],

        ['银川', this.YCData]

        ].forEach((item, i) = >{

            this.series.push({

                name: item[0] + ' Top3',

                type: 'lines',

                zlevel: 1,

                effect: { // 特效，如果lineStyle.width为0，特效就是点
                    show: true,

                    period: 6,
                    // 动画时间为6s
                    trailLength: .7,
                    // 拖尾效果
                    color: 'red',

                    symbolSize: 3 // 点的大小
                },

                lineStyle: {

                    normal: {

                        color: this.chart_map_color[i],

                        width: 0,
                        // 宽度为0，表示不显示线条
                        curveness: .2 // 弧度
                    }

                },

                data: this.convertData(item[i])

            },

            {

                name: item[0] + ' Top3',

                type: 'lines',

                zlevel: 2,

                symbol: ['none', 'arrow'],
                // 线条两端的图案
                symbolSize: 10,

                effect: {

                    show: true,

                    period: 6,

                    trailLength: 0,

                    symbol: this.planePath,

                    symbolSize: 15

                },

                lineStyle: {

                    normal: {

                        color: this.chart_map_color[i],

                        width: 1,

                        opacity: .6,

                        curveness: .2

                    }

                },

                data: this.convertData(item[1])

            },

            {

                name: item[0] + ' Top3',

                type: 'effectScatter',

                coordinateSystem: 'geo',

                zlevel: 2,

                rippleEffect: {

                    brushType: 'stroke' // 涟漪特效
                },

                label: {

                    normal: {

                        show: true,

                        position: 'right',

                        formatter: '{b}'

                    }

                },

                symbolSize: val = >val[2] / 8,
                // val是从date中获取
                itemStyle: {

                    normal: {
                        color: this.chart_map_color[i]
                    },

                    emphasis: {
                        areaColor: '#2B91B7'
                    }

                },

                data: item[1].map(dataItem = >{

                    return {

                        name: dataItem[1].name,

                        value: this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])

                    }

                })

            })

        })

        this.chart_map_option.series = this.series

    },

    convertData(data) {

        let res = []

        for (let i = 0; i < data.length; i++) {

            let dataItem = data[i]

            let fromCoord = this.geoCoordMap[dataItem[0].name]

            let toCoord = this.geoCoordMap[dataItem[1].name]

            if (fromCoord && toCoord) {

                res.push({

                    fromName: dataItem[0].name,

                    toName: dataItem[1].name,

                    coords: [fromCoord, toCoord],

                    value: dataItem[1].value

                })

            }

        }

        return res

    }

}

样式部分：

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
108
109
110
111
112
113
114
115
116
117
118
119
.map {

    position: relative;

    height: 10.125rem;

    .map1 {

        position: absolute;

        width: 6.475rem;

        height: 6.475rem;

        top: 50 % ;

        left: 50 % ;

        transform: translate( - 50 % , -50 % );

        background: url(.. / assets / img / map.png);

        background - size: 100 % 100 % ;

        opacity: .3;

    }

    .map2 {

        position: absolute;

        width: 8.3075rem;

        height: 8.3075rem;

        top: 50 % ;

        left: 50 % ;

        transform: translate( - 50 % , -50 % );

        background: url(.. / assets / img / lbx.png);

        background - size: 100 % 100 % ;

        animation: rotate1 15s linear infinite;

    }

    .map3 {

        position: absolute;

        width: 7.075rem;

        height: 7.075rem;

        top: 50 % ;

        left: 50 % ;

        transform: translate( - 50 % , -50 % );

        background: url(.. / assets / img / jt.png);

        background - size: 100 % 100 % ;

        animation: rotate2 15s linear infinite;

    }

    .chart {

        position: absolute;

        top: 0;

        left: 0;

        height: 10.125rem;

        width: 100 % ;

    }

}

@keyframes rotate1 {

    from {

        transform: translate( - 50 % , -50 % ) rotate(0deg);

    }

    to {

        transform: translate( - 50 % , -50 % ) rotate(360deg);

    }

}

@keyframes rotate2 {

    from {

        transform: translate( - 50 % , -50 % ) rotate(360deg);

    }

    to {

        transform: translate( - 50 % , -50 % ) rotate(0deg);

    }

}



参考：

where to find or how to set htmlWebpackPlugin.options.title in project created with vue cli3?

CSS3 @font-face规则

Echarts入门文档

Echarts配置项文档

flex属性值

系统中持续报错：The image argument is a canvas element with a width or height of 0

echarts的渐变色配置 LinearGradient

初识SVG - 绘制基础图形