一、获取data来源
1、利用openpyxl从excel表格获取数据，相较于xlrd，openpyxl可以将表格里的样式也传递过来的优势
xlrd ----------------- https://blog.csdn.net/csdnnews/article/details/80878945
openpyxl --------------- https://www.cnblogs.com/zeke-python-road/p/8986318.html
from openpyxl import load_workbook from matplotlib import pyplot as plt wb = load_workbook('qqqqqq.xlsx') ws = wb.active cols = [] for col in ws.iter_cols(): col = col[1:11] cols.append(col) Casename_list = [] for key in cols[2]: Casename_list.append(key.value) # print(Casename_list) Test_result = [] for key in cols[7]: Test_result.append(key.value)
二、data图表分析
1、利用matplotlab
存在中文编码问题：
import matplotlib.pyplot as plt plt.rcParams['font.sans-serif']=['SimHei'] #用来正常显示中文标签 plt.rcParams['axes.unicode_minus']=False #用来正常显示负号 plt.plot((1,2,3),(4,5,7)) plt.xlabel('横坐标') plt.ylabel('纵坐标') plt.show() --------------------- 作者：Yrish 来源：CSDN 原文：https://blog.csdn.net/sinat_29699167/article/details/80029898 版权声明：本文为博主原创文章，转载请附上博文链接！
2、echarts ----- https://www.cnblogs.com/a10086/p/9551966.html
A、后台拼凑数据
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=" 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>
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"转成字符串。
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style=" 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>
三、eg
1、前台
from django.views.generic.base import TemplateView from .models import * class Echarts_html(TemplateView): template_name = "../templates/eg1.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.name) aaa['series'][0]['data'].append(item.read_count) context['aaa'] = aaa return context def post(self,request): print('post') return HttpResponse('post')
2、后台
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.js"></script> </head> <style> #myimg { border: 1px solid red; height: 18px; 18px; background-image: url('2.png'); background-position-y: 138px; } </style> <body> <form action="" method="post"> <input type="text"> <input type="submit" value="带点"> </form> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style=" 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> </html>