一、获取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="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>

　　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="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>

三、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;
        width: 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="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>
</html>