自定义图表二。

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)