Python+pyecharts绘制双动态曲线教程详解_python_

def line_base() -> Line: line = ( Line() .add_xaxis(list(range(10))) .add_yaxis(series_name="专注度", y_axis=[randrange(0, 100) for _ in range(10)],areastyle_opts=opts.AreaStyleOpts(opacity=0.5)) .add_yaxis(series_name="放松度", y_axis=[randrange(0, 100) for _ in range(10)],areastyle_opts=opts.AreaStyleOpts(opacity=0.5)) .set_series_opts() .set_global_opts( title_opts=opts.TitleOpts(title="专注度和放松度"), xaxis_opts=opts.AxisOpts(type_="value"), yaxis_opts=opts.AxisOpts(type_="value"), ) .dump_options_with_quotes() ) return line class ChartView(APIView): def get(self, request, *args, **kwargs): return JsonResponse(json.loads(line_base())) cnt = 9 cnt1 = 9 class ChartUpdateView(APIView): def get(self, request, *args, **kwargs): global cnt,cnt1 cnt = cnt + 1 cnt1 = cnt1 + 1 return JsonResponse({"name": cnt,"value": randrange(0, 100),"name1":cnt1,"value1":randrange(0, 100)})

 path('index/',views.Index), path('line/', views.ChartView.as_view()), path('lineUpdate/', views.ChartUpdateView.as_view()),

function fetchData() { $.ajax({ type: "GET", url: "http://127.0.0.1:8000/line", dataType: "json", success: function (result) { var options = result.data; line.setOption(options); old_data = line.getOption().series[0].data; old_data1 = line.getOption().series[1].data; } }); } function getDynamicData() { $.ajax({ type: "GET", url: "http://127.0.0.1:8000/lineUpdate", dataType: 'json', success: function (result) { var options = result.data; old_data.push([options.name, options.value]); old_data1.push([options.name1, options.value1]); line.setOption({ series: [{ data: old_data }, { data:old_data1 } ] }); } }); }