目录
一、新建静态资源目录
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）、效果图
