百度图表echarts+django初试

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

    效果
    百度图表echarts+django初试_第1张图片
  2. 后台拼凑数据
    后台代码,使用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>
      
        <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>

     

  3. 前台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"转成字符串。

    
    
        
    "main" style="width: 600px;height:400px;">

     

转载于:https://www.cnblogs.com/a10086/p/9551966.html

你可能感兴趣的:(百度图表echarts+django初试)