目录
一、新建静态资源目录
1、静态页面
2、静态资源
二、数据传输
1、后台直接传输，不需要对数据进行分析整理
（1）、后台代码
（2）、前端代码
（3）、效果图
2、需要对数据进行整理分析再传输
（1）、后台代码
（2）、前端代码
（3）、效果图
一、新建静态资源目录
1、静态页面
在根目录下新建静态页面目录template，并在项目名同名子目录下的settings.py做出如下更改：
TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates')],#更改位置 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, }, ]
2、静态资源
在根目录下新建静态资源目录static，主要包含静态页面所用到的所有资源，并在项目名同名子目录下的settings.py做出如下更改：
STATIC_URL = '/static/' STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
在静态页面代码最前面应添加如下代码;
<!DOCTYPE html> {% load static %}
二、数据传输
1、后台直接传输，不需要对数据进行分析整理
（1）、后台代码
直接使用Django对数据表进行读取
使用render对页面进行渲染，数据表中的数据封装在messages中，op2是一个标识，用来使页面按钮因点击而做出不同的改动。
def data_fen(res): messages = table3.objects.all() # 获取全部数据 limit = 20 paginator = Paginator(messages, limit) # 按每页10条分页 page = res.GET.get('page', '1') # 默认跳转到第一页 result = paginator.page(page) return render(res, 'data_temp.html', {'messages': result,'op2':'active'})
（2）、前端代码
这里涉及到if判断，及for循环，message是后台读取数据表后返回的结果，text等是数据表中的列名称。
<tbody> {% if messages %} {% for message in messages %} <tr class="{% cycle 'active' 'success' 'warning' 'info' %}"> <td>{{ message.id }}</td> <td style="max-width: 500px">{{ message.text }}</td> <td>{{ message.name }}</td> <td>{{ message.dian }}</td> <td>{{ message.time }}</td> </tr> {% endfor %} {% else %} <tr> <td colspan="4">无数据</td> </tr> {% endif %} </tbody>
（3）、效果图
2、需要对数据进行整理分析再传输
（1）、后台代码
这里使用pandas对数据进行分析整理，再传输到指定的js代码中，这里使用列表进行分装，尝试过其他形式来传输这一组数据，但都行不通，只用使用列表时传输的最佳
db = pymysql.connect( host='localhost', user='root', password='root', port=3306, database='lybs', charset='utf8' ) def two(): sql = "select * from weibo_score" data = pd.read_sql(sql, db) head = data.sort_values(by='score', ascending=False).head(10) op = ['id:' + str(x) for x in head['id']] return {'dian': [x for x in head['dian']], 'id': op, 'score': [x for x in head['score']]}
（2）、前端代码
代码的作用，主要是使用echarts.js画一个柱状与折线图，在接收完数据后使用js将数据调整为我们需要的样子，然后使用echarts进行绘图
<script> var arr = new Array() {#将返回的列表数据进行循环遍历#} {% for foo in two.id %} {#将数据追加至新建的数组中#} arr.push('{{ foo }}') {#console.log('{{ foo }}')#} {#循环结束标志 #} {% endfor %} var ar = {{ two.dian }} var num = getArrMax(ar) function getArrMax(arr) { //arr接受一个数组 var max = arr[0]; for (var i = 1; i <= arr.length; i++) { if (arr[i] > max) { max = arr[i]; } } return max; } var max_ = 0 var min_ = 0 if(num<50){ max_ = 50 min_ = 5 }else if(num>=50 && num<200){ max_ = Math.round(num/50)*50; min_ = 20 }else if(num>=200 && num<500){ max_ = Math.round(num/50)*50; min_ = 50 }else if(num>=500 && num<2000){ max_ = Math.round(num/50)*50; min_ = 200 }else if(num>=2000){ max_ = Math.round(num/50)*50; min_ = 500 } var ar1={{ two.score }} function getArrmin(arr) { //arr接受一个数组 var max = arr[0]; for (var i = 1; i <= arr.length; i++) { if (arr[i] < max) { max = arr[i]; } } return max; } var min1 = getArrmin(ar1) var jian=(100-min1)/(max_/min_) const colors = ['#5470C6', '#91CC75', '#EE6666']; var myChart1 = echarts.init(document.querySelector(".two")); var option1 = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, title: { text: '情感分析top10点赞数量', left: 'center', subtext: '情感评分排名 从左到右' }, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { data: ['点赞数量', '情感评分'], left: 'left' }, xAxis: [ { type: 'category', data: arr, axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', name: '点赞数量', min: 0, max: max_+50, interval: min_, axisLabel: { formatter: '{value}' }, axisTick: { show: false } }, { type: 'value', name: '情感评分', min: min1, max: 100, interval: jian, axisTick: { show: false }, axisLabel: { formatter: '{value}' } } ], series: [ { name: '点赞数量', type: 'bar', data: {{ two.dian }} }, { name: '情感评分', type: 'line', yAxisIndex: 1, lineStyle: { color: "black" }, data: {{ two.score }}, } ] }; myChart1.setOption(option1); </script>
（3）、效果图
