本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization1<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
2<div id="container" style="width:800px;height:700px;"></div>
option中设置Media Query须遵循如下格式： 1option = {
2 // 这里是基本的『原子option』。
3 title: {...},
4 legend: {...},
5 series: [{...}, {...}, ...],
6 ...,
7 media: [ // 这里定义了 media query 的逐条规则。
8 {
9 query: {...}, // 这里写规则。
10 option: { // 这里写此规则满足下的option。
11 legend: {...},
12 ...
13 }
14 },
15 {
16 query: {...}, // 第二个规则。
17 option: { // 第二个规则对应的option。
18 legend: {...},
19 ...
20 }
21 },
22 { // 这条里没有写规则，表示『默认』，
23 option: { // 即所有规则都不满足时，采纳这个option。
24 legend: {...},
25 ...
26 }
27 }
28 ]
29};
-
引入用于加载数据的脚本文件：
与前一篇一样，因为浏览器处于安全考虑，大多不支持跨域请求加载数据，因此本次也需要引入jquery.min.js脚本文件。
1<!-- 引入下载的 jquery.min.js 文件 -->
2<script type="text/javascript" src="js/jquery.min.js"></script>
-
创建一个虚拟服务器：
1from flask import Flask,render_template
2app = Flask(__name__,static_folder = '',template_folder = '')
3@app.route('/')
4def hello_world():
5 return render_template('index.html') # index.html：html文件名，需要保持一致
6if __name__ == '__main__':
7 from werkzeug.serving import run_simple
8 run_simple('127.0.0.1', 8080, app)
-
引入用于生成可拖拽图表的脚本文件：
1https://github.com/apache/echarts/blob/master/test/lib/draggable.js
脚本文件下载完成后，通过以下代码完成脚本文件加载读取，并生成一个可拖拽的图表：
1 $.when(
2 $.getScript('js/draggable.js') // 用于实现拖拽功能
3 ).done(function() {
4 draggable.init(
5 $('div[_echarts_instance_]')[0],
6 myChart, {
7 width: 700, // 初始话的图表大小为700*400
8 height: 400,
9 });
10
11 // 设置图表的参数
12 var option = {
13 baseOption: {...},
14
15 // 这里定义了 media query 的逐条规则
16 media: [{...}, {...}, {...}]
17 };
18
19 // 使用指定的配置项和数据显示图表
20 myChart.setOption(option);
21 });
1{
2 minWidth: 200,
3 maxHeight: 300,
4 minAspectRatio: 1.3
5}
另外，media中的option是『原子option』，理论上可以写任何option的配置项。但是一般我们只写跟布局定位相关的。
接下来就可以实现文章最开始展现的响应式自适应图表，代码如下所示：
1<!DOCTYPE html>
2<html>
3
4<head>
5 <meta charset="utf-8">
6 <!-- 引入下载的 echarts.js 文件 -->
7 <script type="text/javascript" src="js/echarts.js"></script>
8 <!-- 引入下载的 jquery.min.js 文件 -->
9 <script type="text/javascript" src="js/jquery.min.js"></script>
10 <title>ECharts图表</title>
11</head>
12
13<body>
14 <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
15 <div id="container" style="width:800px;height:700px;"></div>
16 <script type="text/javascript">
17 // 基于准备好的dom，初始化echarts实例
18 var myChart = echarts.init(document.getElementById('container'));
19
20 $.when(
21 $.getScript('js/draggable.js') // 用于实现拖拽功能
22 ).done(function() {
23 draggable.init(
24 $('div[_echarts_instance_]')[0],
25 myChart, {
26 width: 700, // 初始话的图表大小为700*400
27 height: 400,
28 });
29
30 // 设置图表的参数
31 var option = {
32 baseOption: {
33 title: {
34 text: "响应式自适应图表"
35 },
36
37 legend: {
38 data: ["品类1", "品类2", "品类3", "品类4", "品类5"]
39 },
40
41
42 // 数据系列
43 series: [{
44 name: "2000年销量",
45 type: "pie",
46 data: [
47 { value: 5, name: '品类1' },
48 { value: 35, name: '品类2' },
49 { value: 25, name: '品类3' },
50 { value: 15, name: '品类4' },
51 { value: 45, name: '品类5' }
52 ]
53 }, {
54 name: "2001年销量",
55 type: "pie",
56 data: [
57 { value: 10, name: '品类1' },
58 { value: 45, name: '品类2' },
59 { value: 35, name: '品类3' },
60 { value: 20, name: '品类4' },
61 { value: 60, name: '品类5' }
62 ]
63 }]
64 },
65
66 // 这里定义了 media query 的逐条规则
67 media: [{
68 // 第一个规则
69 query: { minAspectRatio: 1 }, // 当长宽比大于1
70 option: {
71 legend: {
72 right: 'center',
73 bottom: 0,
74 orient: 'vertical' // 图例竖直放置
75 },
76 series: [{
77 radius: [30, '40%'],
78 center: ['25%', '50%']
79 },
80 {
81 radius: [30, '40%'],
82 center: ['75%', '50%']
83 }
84 ]
85 }
86 }, {
87 // 第二个规则
88 query: { maxAspectRatio: 1 }, // 当长宽比小于1
89 option: {
90 legend: {
91 right: 'center',
92 bottom: 0,
93 orient: 'horizontal' // 图例水平放置
94 },
95 series: [{
96 radius: [30, '40%'],
97 center: ['50%', '30%']
98 },
99 {
100 radius: [30, '40%'],
101 center: ['50%', '70%']
102 }
103 ]
104 }
105 }, {
106 // 该option没有query选项
107 // 即当以上query都不满足时，执行该option设置
108 option: {
109 legend: {
110 right: 'center',
111 bottom: 0,
112 orient: 'horizontal'
113 },
114 series: [{
115 radius: [20, '50%'],
116 center: ['25%', '50%']
117 },
118 {
119 radius: [30, '50%'],
120 center: ['75%', '50%']
121 }
122 ]
123 }
124 }]
125 };
126
127
128 // 使用指定的配置项和数据显示图表
129 myChart.setOption(option);
130 });
131 </script>
132</body>
133
134</html>
可视化结果如下图所示：
可以看到生成的图表大小为定义的700*400，此时长宽比大于1，因此采用第一个规则对应的option设置，图例布局为竖直放置。
拖动右下角的圆点可以改变图表大小，随着尺寸变化，图例和图表会自动改变布局位置和方式。
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
