记django+pyecharts+html+css+js遇到的问题

      自己是初入门的小白，以此篇文章记录自己遇到的问题，方便以后的查找。如果可以帮助到和我一样的小白就更好了~当然，还有很多不足之处，也欢迎大家多多指教~

1、django+pyecharts+地图

<script type = "text/javascript" src = "https://assets.pyecharts.org/assets/maps/china.js"></script>

地图需要额外引入js，代码如上。

词云也类似，需要引入js， <script src="/static/js/echarts-wordcloud.min.js"></script>，这个我是到csdn上下载的，可以直接搜索echarts-wordcloud.min.js，选择下载量最高的。

2、文字过长+首行缩进

<td>{{c}}</td>

  

改为： 

<td style = "white-space:normal;word-break:break-all;text-indent:2em;">{{c}}</td>

 3、django+html，引入两个参数

py文件：（在py文件种将两个参数用zip打包）

def comment(request,event_name):
    comment = Review.objects.filter(event_name = event_name).order_by('-comment_likes')
    c_list = []
    like_list = []
    for c in comment:
        c_list.append(c.comment_content)
        like_list.append(c.comment_likes)
    com = zip(c_list,like_list)
    return render(request, '网页.html', {'com':com}) 

html文件：

<tbody>
{% for c,like in com %}                                  
<tr>
<td>{{c}}</td>
 <th>{{like}}</th>
 </tr>
{% endfor %}
</tbody>

4、pyecharts+django

py文件（这个脚本我是想获取评论者的性别，再画个饼图

def get_gender():#获取性别数据
    commenter_list =Commenter.objects.all()#获取评论者信息
    gender_list = []
    for co in commenter_list:
        gender_list.append(commenter.commenter_gender) #获取评论者性别
    # print(gender_list)    
    dit = {}#存储男女性别数
    for w in gender_list:
        if w in dit:
            dit[w] += 1
        else:
            dit[w] = 1

    gen_list = list(dit.keys())#性别：男和女
    num_list = list(dit.values())#性别的数量
    return gen_list, num_list#返回数据

def gender() -> Pie:
    gen_list, num_list = get_gender()
    c = (
    Pie()
    .add("", [list(z) for z in zip(gen_list, num_list)])
    .set_global_opts(title_opts=opts.TitleOpts(title=""))
    .set_series_opts(label_opts=opts.LabelOpts(formatter="{b}: {c}"))
    .dump_options_with_quotes()
    )
    return c
class ChartViewGender(APIView):
    def get(self, request, *args, **kwargs):
        return JsonResponse(json.loads(gender()))#返回json文件

url文件：

path('gender/', views.ChartViewGender.as_view(), name='gender')

 html文件

<div class="panel-body tab-content">
    <div id="map-china-chart" class="tab-pane active" data-highcharts-chart="1">
        <script src="/static/js/echarts-amap.min.js"></script>
        <script type = "text/javascript" src = "https://assets.pyecharts.org/assets/maps/china.js"></script>
        <div id="pie" style="width:1400px; height:600px;"></div>
        <script>
            var chart = echarts.init(document.getElementById('pie'), {renderer: 'canvas'});
    
            $(
                function () {
                    fetchData(chart);
                }
            );
    
            function fetchData() {
                $.ajax({
                    type: "GET",
                    url: "http://127.0.0.1:8000/gender",
                    dataType: 'json',
                    success: function (result) {
                        chart.setOption(result.data);
                    }
                });
            }
        </script>
    </div>
</div>

"http://127.0.0.1:8000/gender"中存储json文件，画图时会读取网页中的数据进行画图，Json数据类似下图：