百度图表echarts+django初试

时间 2019-11-20

标签百度图表 echarts+django echarts django 初试栏目 Python 繁體版

原文原文链接

echarts参考官方教程
5 分钟上手 ECharts

效果

后台拼凑数据
后台代码，使用TemplateView类。传递数据到前台 echarts.html

class Echarts_html(TemplateView):
    template_name = "templeate/app01/echarts.html"

    def get_context_data(self, **kwargs):
        context = super(Echarts_html, self).get_context_data(**kwargs)
        aaa= {
            'title': {
                'text': 'ECharts 入门示例'
            },
            'tooltip': {},
            'legend': {
                'data': ['销量']
            },
            'xAxis': {
                'data': []
            },
            'yAxis': {},
            'series': [{
                'name': '销量',
                'type': 'bar',
                'data': []
            }]
        }
        articles = Article.objects.all()
        for item in articles:
            aaa['xAxis']['data'].append(item.title)
            aaa['series'][0]['data'].append(item.read_count)
        context['aaa'] = aaa
        return context

前台代码,数据处理完毕，前台直接使用。可是记得加{{xxx|safe}} 不然会被转义（xss跨站了解下）

<body>
　　<!-- 为ECharts准备一个具有大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {{ aaa | safe}};
        myChart.setOption(option);
    </script>
</body>

前台js处理数据
后台代码，很简单直接返回数据

class Echarts_html(TemplateView):
    template_name = "templeate/app01/echarts.html"

    def get_context_data(self, **kwargs):
        context = super(Echarts_html, self).get_context_data(**kwargs)
        context['articles'] = Article.objects.all()
        return context

前台代码，js处理,注意的一点就是js中数组push(相似append)必须是字符串或者数字，直接"xxxx"转成字符串。javascript

<body>
<!-- 为ECharts准备一个具有大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            'title': {
                'text': 'ECharts 入门示例'
            },
            'tooltip': {},
            'legend': {
                'data': ['阅读量']
            },
            'xAxis': {
                'data': []
            },
            'yAxis': {},
            'series': [{
                'name': '阅读量',
                'type': 'bar',
                'data': []
            }]
        }
        {% for item in articles %}
            option['xAxis']['data'].push("{{ item.title }}")
            option['series'][0]['data'].push("{{ item.read_count }}")
        {% endfor %}
        console.log(option)

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>


</body>