echarts数据可视化系列：折线图_echarts折线图数据

绘制折线图及配置
说明：引入echarts文件和echarts的容器及实例化echarts就不写了，上篇文章已写：可以自行查看，这里直接从配置入手

<script>
        let mEcharts = echarts.init(document.querySelector('div'))
        // x轴的月份
        let yuefen = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        // 康师傅的销量
        let kanshifu = [3580, 5682, 6541, 2644, 5621, 9351, 4516, 3254, 6574, 9510, 6547, 1435]
        // 统一的销量
        let tongyi = [3480, 6682, 2541, 5644, 5421, 7351, 2516, 4254, 3574, 1510, 7547, 8435]
        let option = {
        	// 直角坐标系的X轴
            xAxis: {
            	// X轴的数据
                data: yuefen,
                // x轴两边留白策略，false不留白，true留白，默认true
                boundaryGap: false
            },
            // 直角坐标系的Y轴
            yAxis: {
            	// 是否脱离在刻度上脱离0比例，只在数值轴中有效(type: 'value') false不脱离0比例，true脱离0比例，默认false
                scale:true
            },
            series: [
                {
                	// 折线图的类型
                    type: 'line',
                    // 系列的名称
                    name: '康师傅',
                    // 数值轴的数据
                    data: kanshifu,
                    // 数据堆叠，在同一个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加，从而不会进行交叉
                    stack: 'all',
                    // 最大值
                    markPoint: {
                        data: [
                            {
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                    // 平均值
                    markLine: {
                        data: [
                            {
                                type: 'average',
                                name: '平均值'
                            }
                        ]
                    },
                    // 标记图表中某个范围的数据
                    markArea: {
                    	// 标记范围的数组
                        data: [
                        	// 第一个标记范围
                            [
                            	// 从类目轴的1月份开始
                                {xAxis: '1月'},
                                // 到类目轴的2月份结束
                                {xAxis: '2月'}
                            ],
                            // 第二个标记范围
                            [
                                {xAxis: '8月'},
                                {xAxis: '10月'}
                            ]
                        ]
                    },
                    // 区域填充样式，设置后显示成区域面积图
                    areaStyle: {}
                },
                // 统一的数值轴销量
                {
                    type: 'line',
                    name: '统一',
                    data: tongyi,
                    stack: 'all',
                    markPoint: {
                        data: [
                            {
                                type: 'max',
                                name: '最大值'
                            },
                            {
                                type: 'min',
                                name: '最小值'
                            }
                        ]
                    },
                    markLine: {
                        data: [
                            {
                                type: 'average',
                                name: '平均值'
                            }
                        ]
                    },
                    markArea: {
                        data: [
                            [
                                {xAxis: '1月'},
                                {xAxis: '2月'}
                            ],
                            [
                                {
                                    xAxis: '8月'
                                },
                                {
                                    xAxis: '9月'
                                }
                            ]
                        ]
                    },
                    // 折现拐点标志的样式
                    itemStyle: {
                    	// 图形的颜色
                        color: 'red'
                    },
                    // 是否平滑显示，true平滑，false不平滑，默认false
                    smooth: true,
                    // 线条样式
                    lineStyle: {
                    	// 线的类型：solid实线，dashed虚线，dotted点线
                        type: 'dashed'
                    },
                    // 区域填充样式，设置后显示成区域面积图
                    areaStyle: {
                    	// 区域填充的颜色
                        color: 'pink'
                    }
                }
            ]
        }
        // 使用刚指定的配置项和数据显示图表
        mEcharts.setOption(option)
    </script>
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

最终展示效果：