自定义图表二。

本示例通过移值echarts示例代码进行演示。

联系我们

1、很多时候,第三方有很多不错的图表样式,这里,我们可以通过自定义图表直接使用,如

https://echarts.apache.org/examples/en/editor.html?c=line-polar2

2、将上图option转换成为后端代码,代码结构与如下类似。

data = [];
for i in range(0, 360):
t = (i / 180) * math.pi
r = math.sin(2 * t) * math.cos(2 * t)
data.append([r, i])

option = """{
title: {
text: 'Two Value-Axes in Polar'
},
legend: {
data: ['line']
},
polar: {
center: ['50%', '54%']
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
angleAxis: {
type: 'value',
startAngle: 0
},
radiusAxis: {
min: 0
},
series: [
{
coordinateSystem: 'polar',
name: 'line',
type: 'line',
showSymbol: false,
data: []
}
],
animationDuration: 2000
}"""
option = json5.loads(option)
option['series'][0]['data'] = data
result = option

代码上下文中已经引入了json5\math库等,可以直接使用,通过这种方式获取数据。




3、前端代码如下。
// config
let config = this.get_config();
// get the datasource
let data_source = config.get_data_source(0)
let option = data_source.get_raw_datas()
this.setOption(option)