九十一前端可视化ECharts的使用

网友投稿 743 2022-05-29

@Author:Runsen

学python的应该听过Pyecharts。那么就应该有ECharts

这次介绍的就是一个基于Javascript的数据可视化库ECharts。

Echarts 由百度的前端技术部开发,是一款难得的由国内厂商开源的JS代码库,相比同类产品如 highcharts,google charts 都有着相当的竞争力。并且用的人不少,说明文档较容易找到,上手简单。

ECharts入门

我们可以在直接下载echarts.min.js并用

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

需要了解的主要配置:

series;xAxis;yAxis;grid ;tooltip;title;legend;color

series

系列列表。每个系列通过 type 决定自己的图表类型

大白话:图标数据,指定什么类型的图标,可以多个图表重叠。

xAxis:直角坐标系 grid 中的 x 轴

boundaryGap: 坐标轴两边留白策略 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。

yAxis:直角坐标系 grid 中的 y 轴

grid:直角坐标系内绘图网格。修改图表的大小

title:标题组件

tooltip:提示框组件

九十一、前端可视化ECharts的使用

legend:图例组件

color:调色盘颜色列表

折线图

Document

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

区域缩放 dataZoom

dataZoom用于区域缩放,对数据范围过滤,x轴和y轴都可以设置

dataZoom是一个数组 可以配置多个区域缩放器

Document

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

饼图

相比于柱状图,饼图的数据格式更加简单,它数值是一维的,无需给出类目。

饼图不在直角坐标系上实现,自然也不需要 xAxis 和 yAxis。

Document

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

仪表盘

Document

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

地图

地图图表的使用方式

百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak

矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据

接下来的实现是通过矢量图的方式来实现的

准备中国的矢量 json 文件, 放到 json/map/ 目录之下

Document

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

地图的常见配置

缩放拖动: roam

名称显示: label

初始缩放比例: zoom

地图中心点: center

地图和散点图结合

Document

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

API GitHub web前端

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:基因数据分析软件迁移-rstudio-server
下一篇:Kubernetes 集群部署 NFS-Subdir-External-Provisioner 存储插件
相关文章