Django

一个开放源代码的Web应用框架，由Python写成。

官网

命令

创建应用

1
python manage.py startapp 应用名称

运行服务

1
python manage.py runserver ip:port

迁移

  1. 生成迁移文件：根据模型类生成创建表的语句

    1
    python manage.py makemigrations

  2. 执行迁移

    1
    python manage.py migrate

创建管理员

1
python manage.py createsuperuser

PyG2Plot

一个基于配置、体验优雅、面向数据分析的统计图表库，帮助开发者以最小成本绘制高质量统计图表。

官网

1
2
3
4
5
6
7
8
9
from pyg2plot import Plot
import urllib3
import json


def get(url):
	http = urllib3.PoolManager()
    data = http.request('get', url).data
    return list(json.loads(data))

alt "折线图"

  • X 轴：通常对应连续数据，值为时间，调用连续数据 X 轴。
  • Y 轴：通常对应连续数据，值为数字，调用连续数据 Y 轴。
  • 图例：通常出现在多条折线图中，用来区分不同折线代表的数据含义。
  • 标签：用来解释数据点的值。
  • 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。

alt "饼图"

  • 图形(Element)：饼图由扇形组成，环图由滑块组成。
  • 图形标签(Label)：显示各个区块的占比（%），名称（华东、华南、华北）和实际数值（123.45）。
  • 复合指标：在环图中心位置处显示，或以指标卡形式显示在图表上部分，。
  • 图形辅助组件(Info Component)：图例，tooltip 或者指标卡等的组件支持。

alt "子弹图"

折线图

官网

💡基础柱状图适合少量分类数据

💡减少数据油墨比

💡时序数据建议使用折线图

💡文本标签不易过长

📊 查看更多示例.

🎨 折线图详细的配置参考 API 文档。

1
line = Plot("Line")
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
line.set_options({
  "data": [
    { "year": "1991", "value": 3 },
    { "year": "1992", "value": 4 },
    { "year": "1993", "value": 3.5 },
    { "year": "1994", "value": 5 },
    { "year": "1995", "value": 4.9 },
    { "year": "1996", "value": 6 },
    { "year": "1997", "value": 7 },
    { "year": "1998", "value": 9 },
    { "year": "1999", "value": 13 },
  ],
  "xField": "year",
  "yField": "value",
})

生成 HTML 文件

1
line.render("line.html")

生成 string

1
line.render_html()

曲线图

用曲线将一系列的数据点连接的图表, 对应的只需要配置 smooth: true 属性即可。

1
data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/line.json')
1
2
3
4
5
6
7
8
9
10
line.set_options({
    'data': data,
    'xField': 'Date',
    'yField': 'scales',
    'smooth': True,
    'xAxis': {
        # type: 'timeCat'
        'tickCount': 5,
    },
})

阶梯型直线图

对应的只需要配置 stepType 属性即可。

1
'stepType': 'vh' # 可选项：hv | vh | hvh | vhv

柱状图

官网

📊 查看更多示例.

🎨 柱状图详细的配置参考 API 文档。

1
2
column = Plot("Column ")
data = get('https://gw.alipayobjects.com/os/antfincdn/K0kfOzo4j%24/column.json')
1
2
3
4
5
column.set_options({
  "data": data,
  "xField": "type",
  "yField": "sales",
})

堆叠柱状图

使用颜色不同的堆叠的柱形来显示各维度的数值。横轴标示出第一个分类维度，颜色标示出第二个分类维度，纵轴显示相应的值。

通过指定 seriesField 且设置 isStack: true 就可以创建堆叠柱状图。

1
data = get('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
column.set_options({
    "data": data,
    "isStack": True,
    "xField": "year",
    "yField": "value",
    "seriesField": "type",
    "label": {
        # 可手动配置 label 数据标签位置
        "position": "middle",	# 'top', 'bottom', 'middle'
        "layout": [
            # 柱形图数据标签位置自动调整
            {"type": "interval-adjust-position"},
            # 数据标签防遮挡
            {"type": "interval-hide-overlap"},
            # 数据标签文颜色自动调整
            {"type": "adjust-color"},
        ]
    }
})

分组柱状图

使用颜色不同的柱形并排组成小组来显示各维度的数值。横轴标示出分组，颜色标示出分类，纵轴显示相应的值。

通过指定 seriesField 且设置 isGroup: true 就可以创建分组柱状图。

1
data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/grouping-column-data.json')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
column.set_options({
    "data": data,
    "isGroup": True,
    "xField": "月份",
    "yField": "月均降雨量",
    "seriesField": "name",
    # 设置颜色
    "color": ['#1ca9e6', '#f88c24'],
    # 设置间距
    "marginRatio": 0.1,
    "label": {
        # 可手动配置 label 数据标签位置
        "position": "middle",	# 'top', 'bottom', 'middle'
        "layout": [
            # 柱形图数据标签位置自动调整
            {"type": "interval-adjust-position"},
            # 数据标签防遮挡
            {"type": "interval-hide-overlap"},
            # 数据标签文颜色自动调整
            {"type": "adjust-color"},
        ]
    }
})

指定柱子最大宽度、最小宽度

通过设置 maxColumnWidth 可以指定柱子的最大宽度，设置 minColumnWidth 可以指定柱子的最小宽度。

通过组合指定柱子最大宽度、最小宽度可以达到指定柱子宽度的效果。

1
2
3
4
# 指定柱子的最大宽度
"maxColumnWidth": 20,
# 指定柱子的最小宽度
"minColumnWidth": 20,

设置柱子的圆角

通过设置 columnStyle.radius 可以指定柱子的圆角，数据类型可以是 number 也可以是 number[]。

当柱子数值为正值时，const [r1, r2, r3, r4] = radius 依次代表柱子左上角、右上角、右下角、左下角的 radius。 当柱子数值为负值时，const [r1, r2, r3, r4] = radius 依次代表柱子左下角、右下角、右上角、左上角的 radius。

1
2
3
'columnStyle': {
    'radius': [20, 20, 0, 0]
},

设置柱子的背景样式

通过设置 columnBackground.style 可以指定柱子的背景样式。

1
2
3
4
5
'columnBackground': {
    'style': {
        'fill': 'rgba(0,0,0,0.1)'
    }
}

条形图

官网

📊 查看更多示例.

🎨 条形图详细的配置参考 API 文档。

1
2
3
4
5
6
7
8
9
10
11
12
13
bar = Plot('Bar')

data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/line-data.json')

row.set_options({
    'data': data,
    'xField': 'value',
    'yField': 'year',
    'seriesField': 'year',
    'legend': {
        'position': 'top-left',
    },
})

面积图

官网

📊 查看更多示例.

🎨 面积图详细的配置参考 API 文档。

1
2
3
4
5
6
7
8
9
10
area = Plot('Area')

area.set_options({
    'data': data,
    'xField': 'timePeriod',
    'yField': 'value',
    'xAxis': {
        'range': [0, 1],
    },
})

仪表盘

官网

💡为了视觉上的不拥挤且符合常识，我们建议指针的数量不超过 3 根。

📊 查看更多示例.

🎨 仪表盘详细的配置参考 API 文档.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
gauge = Plot('Gauge')

gauge.set_options({
    'percent': 0.5,
    'range': {
        'color': '#5B8FF9',
    },
    'statistic': {
        'content': {
            'style': {
                'fontSize': '36px',
                'lineHeight': '36px',
            },
        },
    },
})

自定义指示器的样式

通过设置 indicator 来自定义指示器的样式，指示器包含指针 pointer 和 指针针头样式。

1
2
3
4
5
6
7
8
9
10
11
12
'indicator': {
    'pointer': {
        'style': {
            'stroke': '#FAAD14',
        },
    },
    'pin': {
        'style': {
            'stroke': '#30BF78',
        }
    }
},

自定义辅助圆弧的样式

通过设置 range 的 'ticks'' 和 'color' 来自定义辅助圆弧的样式。

1
2
3
4
'range': {
    'ticks': [0, 1 / 3, 2 / 3, 1],
    'color': ['#F4664A', '#FAAD14', '#30BF78'],
},

设置辅助圆弧的宽度与圆弧

通过设置 range 的 'width' 来对辅助圆弧的宽度进行像素级别的设置。默认通过 radius，innerRadius 来计算辅助圆弧的宽度。

1
2
3
4
5
6
7
8
9
'radius': 0.75,
'range': {
    'ticks': [0, 1 / 3, 2 / 3, 1],
    'color': ['#F4664A', '#FAAD14', '#30BF78'],
    'width': 16,
}
'gaugeStyle': {
    'lineCap': 'round',
}

设置仪表盘展示类型

通过设置 type: 'meter', 可以实现一个展示形态为米轨的仪表盘。 同时还支持对 steps 以及 stepRatio 的设置，其中 stepRatio 代表着 step 和 gap 的比例关系，默认为：0.5，即默认 step 等于 gap 宽度，当 stepRatio 为 1 时，gap 为 0。

1
2
3
4
5
6
'innerRadius': 0.8,
'type': 'meter',
'meter': {
    'steps': 50,
    'stepRatio': 0.7,
},

饼图

官网

💡分类数不超过 9 个

💡将多个极小值合并展示

💡排列排序

💡如果每个数值的差异不大，不建议使用饼图

📊 查看更多示例.

🎨 饼图详细的配置参考 API 文档。

1
2
3
4
5
6
7
8
9
pie = Plot('Pie')

data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/line-data.json')

pie.set_options({
    'data': data,
    'angleField': 'value',
    'colorField': 'year',
})

环图

在 G2Plot 中，只需要指定 innerRadius 就可以创建环形饼图。

1
2
3
4
5
6
7
8
9
10
'innerRadius': 0.6,
'label': {
    'type': 'inner',
    'offset': '-50%',
    'content': '{value}',
    'style': {
        'textAlign': 'center',
        'fontSize': 14,
    },
},

扇形图

通过设置饼图的 startAngle (开始角度) 和 endAngle (结束角度)，我们可以将饼图变成扇形图。

1
2
'startAngle': math.pi,
'endAngle': math.pi * 1.5,

直方图

官网

📊 查看更多示例.

🎨 直方图详细的配置参考 API 文档。

1
2
3
4
5
6
7
8
9
histogram = Plot('Histogram')

data = get('https://gw.alipayobjects.com/os/antfincdn/RoliHq%2453S/histogram.json')

histogram.set_options({
    'data': data,
    'binField': 'value',
    'binWidth': 2
})

子弹图

官网

子弹图的发明是为了取代仪表盘上常见的那种里程表，时速表等基于圆形的信息表达方式。更多可以查看：Bullet Graph Design Specification

📊 查看更多示例.

🎨 子弹图详细的配置参考 API 文档。

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
bullet = Plot('Bullet')

data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/bullet.json')

bullet.set_options({
    'data': data,
    'measureField': 'measures',
    'rangeField': 'ranges',
    'targetField': 'target',
    'xField': 'title',
    'color': {
        'range': ['#FFbcb8', '#FFe0b0', '#bfeec8'],
        'measure': '#5B8FF9',
    	'target': '#39a3f4',
    },
    'label': {
        'measure': {
            'position': 'middle',
            'style': {
                'fill': '#fff',
            },
        },
    },
    'xAxis': {
        'line': 'null',
    },
    'yAxis': False,
    'legend': {
        'custom': True,
        'position': 'bottom',
        'items': [
            {
                'value': '差',
                'name': '差',
                'marker': { 'symbol': 'square', 'style': { 'fill': '#FFbcb8', 'r': 5 } },
            },
            {
                'value': '良',
                'name': '良',
                'marker': { 'symbol': 'square', 'style': { 'fill': '#FFe0b0', 'r': 5 } },
            },
            {
                'value': '优',
                'name': '优',
                'marker': { 'symbol': 'square', 'style': { 'fill': '#bfeec8', 'r': 5 } },
            },
            {
                'value': '实际值',
                'name': '实际值',
                'marker': { 'symbol': 'square', 'style': { 'fill': '#5B8FF9', 'r': 5 } },
            },
            {
                'value': '目标值',
                'name': '目标值',
                'marker': { 'symbol': 'line', 'style': { 'stroke': '#39a3f4', 'r': 5 } },
            },
        ],
    },
})

瀑布图

官网

📊 查看更多示例.

🎨 瀑布图详细的配置参考 API 文档。

1
2
3
4
5
6
7
8
9
Waterfall = Plot('Waterfall')

data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/waterfall.json')

Waterfall.set_options({
    'data': data,
    'xField': 'type',
    'yField': 'money'
})

颜色

通过 risingFill 和 fallingFill 可以指定普通柱形颜色和正值柱形颜色，对于汇总值可以通过 total.style.fill 指定颜色。

1
2
3
4
5
6
7
'risingFill': 'red',
'fallingFill': 'green',
'total': {
    'style': {
        'fill': '#96a6a6',
    },
},

水波图

官网

📊 查看更多示例.

🎨 水波图详细的配置参考 API 文档.

1
2
3
4
5
liquid = Plot('Liquid')

liquid.set_options({
    'percent': 0.25,
})

雷达图

官网

📊 查看更多示例.

🎨 雷达图详细的配置参考 API 文档。

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
radar = Plot('Radar')

data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/radar.json')

radar.set_options({
    'data': data,
    'xField': 'item',
    'yField': 'score',
    'seriesField': 'user',
    'meta': {
        'score': {
            'alias': '分数',
            'min': 0,
            'max': 80,
        },
    },
    'xAxis': {
        'line': 'null',
        'tickLine': 'null',
        'grid': {
            'line': {
                'style': {
                    'lineDash': 'null',
                },
            },
        },
    },
    # 开启面积
    'area': {},
    # 开启辅助点
    'point': {
        'size': 2,
    },
})

散点图

官网

📊 查看更多示例.

🎨 散点图详细的配置参考 API 文档.

1
2
3
4
5
6
7
8
9
10
11
12
13
scatter = Plot('Scatter')

data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/scatter.json')

scatter.set_options({
    'data': data,
    'xField': 'x',
    'yField': 'y',
    'size': 5,
    'pointStyle': {
        'fill': '#5B8FF9',
    },
})

回归线

设置regressionLine启用回归线，指定type回归线的样式。

1
2
3
'regressionLine': {
    'type': 'quad', # linear, exp, loess, log, poly, pow, quad
},

气泡图

气泡图是一种多变量的统计图表，由笛卡尔坐标系（直角坐标系）和大小不一、颜色不同的圆组成，可以看作是散点图的变形。

通过设置sizeField: 'pop'呈现气泡效果。

上面程序所有代码

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
from django.shortcuts import render, HttpResponse

from pyg2plot import Plot

import urllib3
import json

http = urllib3.PoolManager()


# Create your views here.

def get(url):
    data = http.request('get', url).data
    return list(json.loads(data))


def index(request):
    line = Plot('Line')

    data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/line.json')

    line.set_options({
        'data': data,
        'xField': 'Date',
        'yField': 'scales',
        'smooth': True,
        # stepType: 'vh' // 可选项：hv | vh | hvh | vhv
        'xAxis': {
               # 'type': 'timeCat'
            'tickCount': 5,
        },
    })
    line.render('graph.html')
    return HttpResponse(line.render_html())


def column(request):
    col = Plot('Column')

    # data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/column.json')
    data = get('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json')
    # data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/grouping-column-data.json')

    col.set_options({
        'data': data,
        'xField': 'year',
        'yField': 'value',
        # 'isGroup': True,    # 分组
        'isStack': True,    # 堆叠
        'seriesField': 'type',
        'label': {
            'position': 'middle',
            'layout': [
                # 柱形图数据标签位置自动调整
                {'type': 'interval-adjust-position'},
                # 数据标签防遮挡
                {'type': 'interval-hide-overlap'},
                # 数据标签文颜色自动调整
                {'type': 'adjust-color'},
            ]
        },
        # # 设置颜色
        # 'color': ['#1ca9e6', '#f88c24'],
        # # 设置间距
        # 'marginRatio': 0.1,
        # # 指定柱子的最大宽度
        # 'maxColumnWidth': 20,
        # # 指定柱子的最小宽度
        # 'minColumnWidth': 20,
        # # 指定柱子的圆角
        # 'columnStyle': {
        #     'radius': [20, 20, 0, 0]
        # },
        # # 设置柱子的背景样式
        # 'columnBackground': {
        #     'style': {
        #         'fill': 'rgba(0,0,0,0.1)'
        #     }
        # }
    })

    col.render("stack-column.html")
    return HttpResponse(col.render_html())


def bar(request):
    row = Plot('Bar')

    data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/line-data.json')

    row.set_options({
        'data': data,
        'xField': 'value',
        'yField': 'year',
        'seriesField': 'year',
        'legend': {
            'position': 'top-left',
        },
    })

    row.render("bar.html")
    return HttpResponse(row.render_html())


def area(request):
    are = Plot('Area')

    data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/area.json')

    are.set_options({
        'data': data,
        'xField': 'timePeriod',
        'yField': 'value',
        'xAxis': {
            'range': [0, 1],
        },
    })

    are.render("area.html")
    return HttpResponse(are.render_html())


def gauge(request):
    instrument = Plot('Gauge')

    instrument.set_options({
        # 设置仪表盘展示类型
        'innerRadius': 0.8,
        'type': 'meter',
        'meter': {
            'steps': 50,
            'stepRatio': 0.7,
        },
        'percent': 0.5,
        # 圆弧里圆心距离
        'radius': 0.75,
        # 自定义辅助圆弧的样式
        'range': {
            'ticks': [0, 1],
            # 'ticks': [0, 1 / 3, 2 / 3, 1],
            'color': ['l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78'],
            # 'color': ['#F4664A', '#FAAD14', '#30BF78'],
            # 'color': '#30BF78',
            'width': 32,
        },
        # 自定义指示器的样式
        'indicator': {
            'pointer': {
                'style': {
                    'stroke': '#FAAD14',
                },
            },
            'pin': {
                'style': {
                    'stroke': '#30BF78',
                }
            }
        },
        'statistic': {
            'content': {
                'style': {
                    'fontSize': '36px',
                    'lineHeight': '36px',
                },
            },
        },
        # 线端为圆弧
        # 'gaugeStyle': {
        #     'lineCap': 'round',
        # }
    })

    instrument.render("area.html")
    return HttpResponse(instrument.render_html())


def pie(request):
    p = Plot('Pie')

    data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/line-data.json')
    import math
    p.set_options({
        'data': data,
        'radius': 1,
        'appendPadding': 10,
        'angleField': 'value',
        'colorField': 'year',
        # 设置环图
        'innerRadius': 0.6,
        # 设置扇形图
        # 'startAngle': math.pi,
        # 'endAngle': math.pi * 1.5,

        'label': {
            'type': 'inner',
            'offset': '-50%',
            'content': '{value}',
            'style': {
                'textAlign': 'center',
                'fontSize': 14,
            },
        },
        'statistic': {
            'title': True,
            'content': {
                'style': {
                    'whiteSpace': 'pre-wrap',
                    'overflow': 'hidden',
                    'textOverflow': 'ellipsis',
                },
            },
        },
        'pieStyle': {
            'lineWidth': 4,
        },
    })

    p.render('pie.html')
    return HttpResponse(p.render_html())


def histogram(request):

    his = Plot('Histogram ')
    data = get('https://gw.alipayobjects.com/os/antfincdn/RoliHq%2453S/histogram.json')

    his.set_options({
        'data': data,
        'binField': 'value',
        'binWidth': 2,
    })

    his.render('histogram.html')
    return HttpResponse(his.render_html())


def bullet(request):
    bul = Plot('Bullet')

    data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/bullet.json')

    bul.set_options({
        'data': data,
        'measureField': 'measures',
        'rangeField': 'ranges',
        'targetField': 'target',
        'xField': 'title',
        'color': {
            'range': ['#FFbcb8', '#FFe0b0', '#bfeec8'],
            'measure': '#5B8FF9',
            'target': '#39a3f4',
        },
        'label': {
            'measure': {
                'position': 'middle',
                'style': {
                    'fill': '#fff',
                },
            },
        },
        'xAxis': {
            'line': 'null',
        },
        'yAxis': False,
        'legend': {
            'custom': True,
            'position': 'bottom',
            'items': [
                {
                    'value': '差',
                    'name': '差',
                    'marker': {'symbol': 'square', 'style': {'fill': '#FFbcb8', 'r': 5}},
                },
                {
                    'value': '良',
                    'name': '良',
                    'marker': {'symbol': 'square', 'style': {'fill': '#FFe0b0', 'r': 5}},
                },
                {
                    'value': '优',
                    'name': '优',
                    'marker': {'symbol': 'square', 'style': {'fill': '#bfeec8', 'r': 5}},
                },
                {
                    'value': '实际值',
                    'name': '实际值',
                    'marker': {'symbol': 'square', 'style': {'fill': '#5B8FF9', 'r': 5}},
                },
                {
                    'value': '目标值',
                    'name': '目标值',
                    'marker': {'symbol': 'line', 'style': {'stroke': '#39a3f4', 'r': 5}},
                },
            ],
        },
    })

    bul.render('bullet.html')
    return HttpResponse(bul.render_html())


def waterfall(request):
    water_f = Plot('Waterfall')

    data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/waterfall.json')

    water_f.set_options({
        'data': data,
        'xField': 'type',
        'yField': 'money'
    })

    water_f.render('waterfall.html')
    return HttpResponse(water_f.render_html())


def liquid(request):
    liq = Plot('Liquid')

    liq.set_options({
        'percent': 0.25,
    })

    liq.render('liquid.html')
    return HttpResponse(liq.render_html())


def radar(request):
    rad = Plot('Radar')

    data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/radar.json')

    rad.set_options({
        'data': data,
        'xField': 'item',
        'yField': 'score',
        'seriesField': 'user',
        'meta': {
            'score': {
                'alias': '分数',
                'min': 0,
                'max': 80,
            },
        },
        'xAxis': {
            'line': 'null',
            'tickLine': 'null',
            'grid': {
                'line': {
                    'style': {
                        'lineDash': 'null',
                    },
                },
            },
        },
        # 开启面积
        'area': {},
        # 开启辅助点
        'point': {
            'size': 2,
        },
    })

    rad.render('radar.html')
    return HttpResponse(rad.render_html())


def scatter(request):
    sca = Plot('Scatter')

    # data = get('https://gitee.com/hjhcos/hjhcos.gitlab.io/raw/master/json/visual/scatter.json')
    data = get('https://gw.alipayobjects.com/os/bmw-prod/0b37279d-1674-42b4-b285-29683747ad9a.json')

    sca.set_options({
        'data': data,
        'appendPadding': 30,
        # 'xField': 'x',
        # 'yField': 'y',
        'xField': 'change in female rate',
        'yField': 'change in male rate',
        'sizeField': 'pop',
        'colorField': 'continent',
        'color': ['#ffd500', '#82cab2', '#193442', '#d18768', '#7e827a'],
        # 'size': 5,
        'size': [4, 30],
        'shape': 'circle',
        'pointStyle': {
            'fillOpacity': 0.8,
            'stroke': '#bbb',
            # 'stroke': '#777777',
            # 'lineWidth': 1,
            # 'fill': '#5B8FF9',
        },
        # 'regressionLine': {
        #     'type': 'quad',  # linear, exp, loess, log, poly, pow, quad
        # },
        'xAxis': {
            'min': -25,
            'max': 5,
            'grid': {
                'line': {
                    'style': {
                        'stroke': '#eee',
                    },
                },
            },
            'line': {
                'style': {
                    'stroke': '#aaa',
                },
            },
        },
        'yAxis': {
            'line': {
                'style': {
                    'stroke': '#aaa',
                },
            },
        },
        'quadrant': {
            'xBaseline': 0,
            'yBaseline': 0,
            'labels': [
                {
                    'content': 'Male decrease,\nfemale increase',
                },
                {
                    'content': 'Female decrease,\nmale increase',
                },
                {
                    'content': 'Female & male decrease',
                },
                {
                    'content': 'Female &\n male increase',
                },
            ],
        },
    })

    sca.render('scatter.html')
    return HttpResponse(sca.render_html())