百度图表echarts+django初试
- 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
<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"转成字符串。
<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>