前后端分离 使用pyecharts踩坑日记

pyechart的官方文档:
https://pyecharts.org/#/zh-cn/intro

加载百分比的时候页面渲染的bug:

视图代码:

        print("yaxis_dict______>",yaxis_dict)
        yaxis_values = list(yaxis_dict.values())
        sum_list = list(np.array(yaxis_values).sum(axis=0, dtype=int))  # 二维数组每列求和

        sum_l = []
        for i in yaxis_values:
            print(i)
            d = [{"value": k, "percent": round(k / sum_list[i_index], 2)} for i_index, k in enumerate(i)]
            sum_l.append(d)

        c = Bar(init_opts=opts.InitOpts(theme=ThemeType.LIGHT))
        c = c.add_xaxis(legend_x_list)
        for i, d in enumerate(yaxis_dict):
            c = c.add_yaxis(d, sum_l[i], stack="stack1", category_gap="50%")
        c = c.set_series_opts(
                label_opts=opts.LabelOpts(
                    position="inside",
                    formatter=JsCode(
                        "function(x){return Number(x.data.percent * 100).toFixed() + '%';}"
                    ),
                )
            )
        c = c.set_global_opts(
            title_opts=opts.TitleOpts(title="百分比堆积柱状图 ", subtitle="我是副标题"),
            datazoom_opts=[opts.DataZoomOpts(), opts.DataZoomOpts(type_="inside")],     # 区域缩放配置项
            # visualmap_opts=[opts.VisualMapOpts()],                                      # 视觉映射配置项
            toolbox_opts=[opts.ToolboxOpts()],      # 工具类
            )

        c = c.dump_options_with_quotes()
        print(c)
        return JsonResponse(json.loads(c))

前端代码:
前端用的vue+element ui

<script>
 show_chart() {


                    axios.defaults.headers.post['X-CSRFToken'] = '{{ csrf_token }}'
                    axios.post(BASE_URL + '/show_chart/', {
                        t_name: this.value,
                        legend_v: this.legend_v,
                        //legend_v:[['过去一年读课外书量', 2], ['过去一年读课外书量', 3]],
                        legend_x: this.value_p,
                        //legend_x: '省',
                        chart_value: this.chart_value,
                    })
                        .then((res) => {
                            console.log(res.data)
                            // echarts.init(document.getElementById('bar')).dispose();             // 销毁上一个实例
                            let chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
                            chart.setOption(res.data);

                        })
                        .catch((error) => {
                            this.$message({
                                message: '选项没有选择完呢！ 亲~',
                                type: 'warning'
                            });
                        })

                },
    </script>

解决代码：

<script>
 show_chart() {


                    axios.defaults.headers.post['X-CSRFToken'] = '{{ csrf_token }}'
                    axios.post(BASE_URL + '/show_chart/', {
                        t_name: this.value,
                        legend_v: this.legend_v,
                        //legend_v:[['过去一年读课外书量', 2], ['过去一年读课外书量', 3]],
                        legend_x: this.value_p,
                        //legend_x: '省',
                        chart_value: this.chart_value,
                    })
                        .then((res) => {
                    if (res.data.series[0].label.formatter === "function(x){return Number(x.data.percent * 100).toFixed() + '%';}"){
                                for (i in res.data.series){
                                    res.data.series[i].label.formatter = function(x){return Number(x.data.percent * 100).toFixed() + '%';}
                                    console.log(typeof res.data.series[i].label.formatter)


                                }
                            }
                            console.log(res.data)
                            // echarts.init(document.getElementById('bar')).dispose();             // 销毁上一个实例
                            let chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'});
                            chart.setOption(res.data);

                        })
                        .catch((error) => {
                            this.$message({
                                message: '选项没有选择完呢！ 亲~',
                                type: 'warning'
                            });
                        })

                },
    </script>

小提醒:
前后端分离的时候，在每次生成可视化图形前记得销毁上一个实例呢,清空画布是没有用的！！！

代码如下:

echarts.init(document.getElementById('bar')).dispose();             // 销毁上一个实例

解决之后的图: