【Flask-Ajax-Echarts】 python实现新浪微博数据分析并实时展示在Flask服务器上
需要工具: python3.6 pandas Flask china.json echarts.js element.js jQuery.js,map.js,vue.js 需要数据集: 新浪微博用户数据集.csv 数据集一览:用pandas读入数据集放在内存中,Flask接收到Ajax传入的请求,将数据整理分析打包成json返回前端,前端通过echarts做可视化。后端flask模块
·
需要工具: python3.6 pandas Flask china.json echarts.js element.js jQuery.js,map.js,vue.js
需要数据集: 新浪微博用户数据集.csv
数据集一览:
用pandas读入数据集放在内存中,Flask接收到Ajax传入的请求,将数据整理分析打包成json返回前端,前端通过echarts做可视化。
后端flask模块代码如下:
from flask import Flask, render_template, request
from flask import jsonify
#从falsktools脚本里面导入相应的处理方法,flasktools.py项目文件中。
from flaskwebtools import time_paser, gender_paser, city_paser, topic_paser
app = Flask(__name__)
app.config['SECRET_KEY'] = "dfdfdffdad"
@app.route('/')
def index():
'''
根目录,访问的主页。一个搜索框,
可以在里面输入一些指定的话题,来转换到指定数据分析路由。
'''
return render_template('index.html')
@app.route('/zl',methods=['GET', 'POST'])
def zl():
'''
数据总览页面,大体的介绍下数据分布,数据的一些属性。
起到一个说明书的作用,建立与浏览页面者的信任。
'''
if request.method == 'POST':
return
else:
return '<h1>只接受post请求!</h1>'
#接收前端web页面的点击请求,如果是下面路由,返回以下内容
@app.route('/gwy',methods=['GET', 'POST'])
def gwy():
'''
路由/gwy 对应的请求为公务员。下面的类推,/tzdn对应同桌的你...
'''
a,b = time_paser('公务员')
c = gender_paser('公务员')
d = topic_paser('公务员')
e = city_paser('公务员')
datas = {
"data1":{
"x":a,
"y":b
},
"data2":c,
"data3":d,
"data5": e
}
return jsonify(datas)
#接收前端web页面的点击请求,如果是下面路由,返回以下内容
@app.route('/tzdn',methods=['GET', 'POST'])
def tzdn():
a,b = time_paser('同桌的你')
c = gender_paser('同桌的你')
d = topic_paser('同桌的你')
e = city_paser('同桌的你')
datas = {
"data1":{
"x":a,
"y":b
},
"data2":c,
"data3":d,
"data5": e
}
return jsonify(datas)
#接收前端web页面的点击请求,如果是下面路由,返回以下内容
@app.route('/xm',methods=['GET', 'POST'])
def xm():
a,b = time_paser('小米')
c = gender_paser('小米')
d = topic_paser('小米')
e = city_paser('小米')
datas = {
"data1":{
"x":a,
"y":b
},
"data2":c,
"data3":d,
"data5": e
}
return jsonify(datas)
#接收前端web页面的点击请求,如果是下面路由,返回以下内容
@app.route('/hd',methods=['GET', 'POST'])
def hd():
a,b = time_paser('恒大')
c = gender_paser('恒大')
d = topic_paser('恒大')
e = city_paser('恒大')
datas = {
"data1":{
"x":a,
"y":b
},
"data2":c,
"data3":d,
"data5": e
}
return jsonify(datas)
#接收前端web页面的点击请求,如果是下面路由,返回以下内容
@app.route('/fj',methods=['GET', 'POST'])
def fj():
a,b = time_paser('房价')
c = gender_paser('房价')
d = topic_paser('房价')
e = city_paser('房价')
datas = {
"data1":{
"x":a,
"y":b
},
"data2":c,
"data3":d,
"data5": e
}
return jsonify(datas)
#接收前端web页面的点击请求,如果是下面路由,返回以下内容
@app.route('/hj',methods=['GET', 'POST'])
def hj():
a,b = time_paser('韩剧')
c = gender_paser('韩剧')
d = topic_paser('韩剧')
e = city_paser('韩剧')
datas = {
"data1":{
"x":a,
"y":b
},
"data2":c,
"data3":d,
"data5": e
}
return jsonify(datas)
#接收前端web页面的点击请求,如果是下面路由,返回以下内容
@app.route('/lsh',methods=['GET', 'POST'])
def lsh():
a,b = time_paser('林书豪')
c = gender_paser('林书豪')
d = topic_paser('林书豪')
e = city_paser('林书豪')
datas = {
"data1":{
"x":a,
"y":b
},
"data2":c,
"data3":d,
"data5": e
}
return jsonify(datas)
#接收前端web页面的点击请求,如果是下面路由,返回以下内容
@app.route('/hj1',methods=['GET', 'POST'])
def hj1():
a,b = time_paser('火箭')
c = gender_paser('火箭')
d = topic_paser('火箭')
e = city_paser('火箭')
datas = {
"data1":{
"x":a,
"y":b
},
"data2":c,
"data3":d,
"data5": e
}
return jsonify(datas)
#接收前端web页面的点击请求,如果是下面路由,返回以下内容
@app.route('/tg',methods=['GET', 'POST'])
def tg():
a,b = time_paser('贪官')
c = gender_paser('贪官')
d = topic_paser('贪官')
e = city_paser('贪官')
datas = {
"data1":{
"x":a,
"y":b
},
"data2":c,
"data3":d,
"data5": e
}
return jsonify(datas)
#接收前端web页面的点击请求,如果是下面路由,返回以下内容
@app.route('/zjy',methods=['GET', 'POST'])
def zjy():
a,b = time_paser('转基因')
c = gender_paser('转基因')
d = topic_paser('转基因')
e = city_paser('转基因')
datas = {
"data1":{
"x":a,
"y":b
},
"data2":c,
"data3":d,
"data5": e
}
return jsonify(datas)
#接收前端web页面的点击请求,如果是下面路由,返回以下内容
@app.route('/wm',methods=['GET', 'POST'])
def wm():
a,b = time_paser('雾霾')
c = gender_paser('雾霾')
d = topic_paser('雾霾')
e = city_paser('雾霾')
datas = {
"data1":{
"x":a,
"y":b
},
"data2":c,
"data3":d,
"data5": e
}
return jsonify(datas)
#接收前端web页面的点击请求,如果是下面路由,返回以下内容
@app.route('/mz',methods=['GET', 'POST'])
def mz():
a,b = time_paser('魅族')
c = gender_paser('魅族')
d = topic_paser('魅族')
e = city_paser('魅族')
datas = {
"data1":{
"x":a,
"y":b
},
"data2":c,
"data3":d,
"data5": e
}
return jsonify(datas)
if __name__ == '__main__':
app.run()
依赖的flaskwebtools模块:
import pandas as pd
#读取数据源文件,将其读入内存转换成pandas的dataframe数据表结构
#usecols 的意思是只用后面列表中存在的数据。这里只用日期,热点话题,性别,省份..
Data = pd.read_csv('data.csv',usecols = ['date','topic','gender','location','repostsnum'])
def time_paser(kw):
'''
时间变化趋势图
对数据表进行筛选 返回讨论人数随时间变化的坐标点(x,y)
格式为 x=[4/7,4/8,4/9/4/10...] y=[1000,2000,1000,3000,3000,...]
'''
myData = Data[(Data['topic'] == kw )]
myData['date'] = pd.to_datetime(myData['date']).dt.normalize()
pf = myData.groupby('date').size()
pf = pf['2014/4/27':'2014/5/16']
x = [str(i)[:10] for i in pf.index]
y = [int(j) for j in pf.values]
#print(x)
#print(y)
return x,y
def gender_paser(kw):
'''
用户性别分布图
对数据表进行筛选 返回参与指定单一话题的性别分布。
格式为[{'name':'m','value':8000},{'name':'f','value':9000}]
m指的是男性,f指的是女性。
'''
myData = Data[(Data['topic'] == kw )]
pf = myData.groupby('gender').size()
res = []
for k,v in dict(zip([str(i) for i in pf.index],[int(j) for j in pf.values])).items():
res.append({'name': k , 'value' : v})
return res
def topic_paser(kw):
'''
单个话题在总话题中的占比
对数据表进行筛选 返回单一指定话题在总话题中的占比
格式为[{'name':'热点话题1','value':8000},{'name':'其他全部话题','value':80000}]
转换的数值,由前端echarts绘图的时候会自动转化成百分比形式。
'''
data = Data.groupby('topic').size()
myData = Data[(Data['topic'] == kw )]
pf = myData.groupby('topic').size()
res = [
{"value": int(pf.values), "name":kw},
{"value":int(data.sum())-int(pf.values), "name":'其他'},
]
return res
def remove_whitespace(x):
"""
Helper function to remove any blank space from a string
x: a string
"""
try:
# Remove spaces inside of the string
x = "".join(x.split(' '))
except:
pass
return x
def city_paser(kw):
'''
单个话题讨论人数的地区分布图
对数据表进行筛选 返回单一指定话题中讨论人群的地区分布。
格式为[{'name':'北京','value':600},{'name':'南京','value':300}.。。。]
在前端echarts绘图时,不同大小的value在地图上的颜色深浅不同,
通过颜色变化可以直观发现,参与讨论话题的人群地理位置分布。
'''
myData = Data[(Data['topic'] == kw )]
myData['location'] = myData['location'].astype(str)
myData['location'] = myData['location'].apply(lambda x: str(x)[:3])
myData['location'] = myData['location'].apply(lambda x:remove_whitespace(x))
myData= myData[(myData['location'] != '其他') &(myData['location'] != '海外')]
pf = myData.groupby('location').size()
res = []
for k,v in dict(zip([str(i) for i in pf.index],[int(j) for j in pf.values])).items():
res.append({'name': k , 'value' : v})
#print(res)
return res
前端HTML页面代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- <link rel="stylesheet" type="text/css" href="../static/style/element.css"> -->
<link rel="stylesheet" type="text/css" href="../static/style/index.css">
</head>
<body>
<div id="app">
<div class="echarts_box" :style="{display:echarts_show}">
<div class="top_box">
<span @click="to_0">总览</span>
<span @click="to_1">公务员</span>
<span @click="to_2">同桌的你</span>
<span @click="to_3">小米</span>
<span @click="to_4">恒大</span>
<span @click="to_5">房价</span>
<span @click="to_6">韩剧</span><br>
<span @click="to_7">林书豪</span>
<span @click="to_8">火箭</span>
<span @click="to_9">贪官</span>
<span @click="to_10">转基因</span>
<span @click="to_11">雾霾</span>
<span @click="to_12">魅族</span>
<span @click="back_index">back</span>
</div>
<!-- 总览的页面布局 -->
<div class="zl_box" :style="{display:zl_show}">
<h3>微博热点话题数据数据挖掘分析</h3>
<p>本网站主要是对84000条微博用户数据进行分析,其中涉及到小米,同桌的你,房价,恒大....等12个热门话题,时间跨度主要集中在2014年5月1日-2014年5月16日</p>
<img src="../static/img/zl_001.jpg" alt="总览分析图">
<p>通过推话题讨论人数的统计分析:</p>
<ul>
<li>可以很直观的发现,小米,同桌的你,房价在所处时间段讨论人数较多。话题较为火热。</li>
<li>张翰,林书豪,魅族的讨论话题相对较少。从下面的饼图可以更直观的发现,这些话题讨论人数约占总人数的7%。</li>
</ul>
<img src="../static/img/zl_002.jpg" alt="总览分析图">
<img src="../static/img/zl_003.jpg" alt="总览分析图">
<p>通过对热门的6个话题的时间序列分析:</p>
<ul>
<li>同桌的你保持的较高的讨论率,平均每天会产生1002条讨论信息。而韩剧则每天平均只有707条。</li>
<li>5-5到5-6号之间小米和恒大的讨论人数达到所有讨论人数的巅峰。从下面的状图可以直观的发现约为2128条/天。</li>
</ul>
<img src="../static/img/zl_004.jpg" alt="总览分析图">
<img src="../static/img/zl_006.jpg" alt="总览分析图">
<p>对每个热点话题一周中的占比情况进行分析。发现一周中讨论话题的时间段有28%的时间是有微博活跃用户在参与恒大话题的讨论,仅仅有0.13%的用户再讨论张翰与郑爽的关系。</p>
<img src="../static/img/zl_005.jpg" alt="总览分析图">
<p>在对热点话题用户性别分析中发现:</p>
<ul>
<li>62%的讨论者为男性,女性只占38%。这说明男性会更倾向于关注与讨论微博社交热议话题</li>
</ul>
</div>
<div class="ech_body" :style="{display:e01_show}">
<div id="echarts_1"></div>
<div id="echarts_2"></div>
</div>
<div class="ech_body" :style="{display:e02_show}">
<div id="echarts_3"></div>
<div id="echarts_4">
<img :src="img_url" alt="">
</div>
</div>
<div class="ech_body" :style="{display:e03_show}">
<div id="echarts_5"></div>
</div>
</div>
<div class="input_box" :style="{display:input_show}">
<el-input placeholder="请输入内容" v-model.trim="search" @keyup.enter.native="finp_click">
<!-- <span slot="append" class="sousuo" @click='finp_click'></span> -->
<el-button slot="append" icon="el-icon-search" @click='finp_click'></el-button>
<el-button ></el-button>
</el-input>
</div>
</div>
</body>
<script type="text/javascript" src="../static/js/jQuery.js"></script>
<script src="../static/js/vue.js"></script>
<script src="../static/js/echarts.js"></script>
<script src="../static/js/map.js"></script>
<!-- 引入组件库 -->
<script src="../static/js/element.js"></script>
<script>
new Vue({
el: '#app',
data: {
input_show: '',
echarts_show: 'none',
zl_show: 'none',
e01_show: '',
e02_show: '',
e03_show: '',
// 输入内容
search: null,
// 数据部分
// 线形图,趋势图
option1: {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
title: {
text: '线形图标题',
left: 'center'
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
},
// 圆形图,占总讨论比
option2: {
tooltip: {
trigger: 'item',
// show: false,
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
title: {
text: '各类占比',
left: 'center'
},
// legend: {
// orient: 'vertical',
// x: 'left',
// data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
// },
series: [
{
name:'讨论占比',
type:'pie',
radius: ['0%', '70%'],
// avoidLabelOverlap: false,
label: {
normal: {
show: false,
// position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
// show: false
}
},
data:[
{value:335, name:'公务员'},
{value:310, name:'其他'},
]
}
]
},
// 环形图,性别分布
option3: {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
title: {
text: '男女比',
left: 'center'
},
// legend: {
// orient: 'vertical',
// x: 'left',
// data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
// },
series: [
{
name:'性别',
type:'pie',
radius: ['50%', '70%'],
// avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'男'},
{value:310, name:'女'},
]
}
]
},
option4: null,
// 第四个图
img_url: '../img/001.jpg',
// 地图
option5: {
backgroundColor: '#eee',
title: {
text: '用户区域分布',
left: 'center'
},
tooltip: {
trigger: 'item'
},
// legend: {
// orient: 'vertical',
// left: 'left',
// data: ['王者荣耀']
// },
visualMap: {
min: 0,
max: 500,// ----------这里指定数据范围
left: 'left',
top: 'bottom',
text: ['高', '低'],
calculable: true,
inRange: {
color: ['#50a3ba','#f1c40f', '#e67e22', '#d94e5d']
},
textStyle: {
color: '#fff'
}
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
series: [{
name: '讨论人数',
type: 'map',
mapType: 'china',
map: '中国',//---------------注意指定这个map
roam: true,
label: {
normal: {
show: false
},
emphasis: {
show: true
}
},
data: [{
name: '北京',
value: 6.8
}, {
name: '天津',
value: 1.6
}, {
name: '上海',
value: 4.7
}, {
name: '重庆',
value: 2.5
}, {
name: '河北',
value: 3.6
}, {
name: '河南',
value: 4.5
}, {
name: '云南',
value: 1.1
}, {
name: '辽宁',
value: 3.1
}, {
name: '黑龙江',
value: 2.1
}, {
name: '湖南',
value: 2.9
}, {
name: '安徽',
value: 2.9
}, {
name: '山东',
value: 6.6
}, {
name: '新疆',
value: 0.5
}, {
name: '江苏',
value: 8.3
}, {
name: '浙江',
value: 7.6
}, {
name: '江西',
value: 2.3
}, {
name: '湖北',
value: 3.6
}, {
name: '广西',
value: 2.0
}, {
name: '甘肃',
value: 0.6
}, {
name: '山西',
value: 1.7
}, {
name: '内蒙古',
value: 0.9
}, {
name: '陕西',
value: 2.1
}, {
name: '吉林',
value: 1.1
}, {
name: '福建',
value: 4.4
}, {
name: '贵州',
value: 1.0
}, {
name: '广东',
value: 12.6
}, {
name: '青海',
value: 0.1
}, {
name: '西藏',
value: 0.2
}, {
name: '四川',
value: 4.7
}, {
name: '宁夏',
value: 0.3
}, {
name: '海南',
value: 0.6
}, {
name: '台湾',
value: 0.3
}]
}]
},
},
methods: {
finp_click: function() {
console.log('点击input')
let self = this;
if(self.search == '' || self.search == null){
self.$message.error('请输入搜索内容!');
}
else if(self.search == '公务员') {
self.to_1();
}else if(self.search == '同桌的你') {
self.to_2();
}else if(self.search == '小米') {
self.to_3();
}else if(self.search == '恒大') {
self.to_4();
}else if(self.search == '房价') {
self.to_5();
}else if(self.search == '韩剧') {
self.to_6();
}else if(self.search == '林书豪') {
self.to_7();
}else if(self.search == '火箭') {
self.to_8();
}else if(self.search == '贪官') {
self.to_9();
}else if(self.search == '转基因') {
self.to_10();
}else if(self.search == '雾霾') {
self.to_11();
}else if(self.search == '魅族') {
self.to_12();
}else{
self.$message.error('对不起还未收录此话题信息!');
}
},
// 隐藏总览,显示其他
show_other: function() {
this.zl_show = 'none';
this.e01_show = '';
this.e02_show = '';
this.e03_show = '';
},
to_echarts: function(){
let self = this;
self.input_show = 'none';
self.echarts_show = '';
},
ajax_data: function(title,datas) {
let self = this;
console.log(datas)
self.option1.xAxis.data = [].concat(datas.data1.x);
self.option1.series[0].data = [].concat(datas.data1.y);
self.option1.title.text = title+'讨论趋势图';
self.option2.series[0].data = [].concat(datas.data3);
self.option2.title.text = title+'话题占比';
self.option3.series[0].data = [].concat(datas.data2);
self.option3.title.text = title+'性别比';
self.option5.series[0].data = [].concat(datas.data5);
self.option5.title.text = title+'区域分布';
self.get_echarts(self.option1,self.option2,self.option3,self.option5);// 数据渲染
},
to_0: function() {// 总览
let self = this;
this.zl_show = '';
this.e01_show = 'none';
this.e02_show = 'none';
this.e03_show = 'none';
// $.post("/zl",
// JSON.stringify({
// 'topic': 'zl'}),
// function(data, status){
// console.log(data,'0')
// // 在这里改变数据
// self.img_url = '../static/img/100.jpg';
// self.get_echarts();
// });
},
to_1: function() {// 公务员
let self = this;
self.show_other();
$.post("/gwy",
JSON.stringify({
'topic': 'gwy'}),
function(data, status){
console.log(data,'1');
self.ajax_data('公务员',data);
self.img_url = '../static/img/001.jpg';
// self.get_echarts();// 数据渲染
self.to_echarts();//这个是转到图页面
});
},
to_2: function() {// 同桌的你
let self = this;// 可以加一个loading
self.show_other();
$.post("/tzdn",
JSON.stringify({
'topic': 'tzdn'}),
function(data, status){
console.log(data,'2')
self.ajax_data('同桌的你',data);
self.img_url = '../static/img/002.jpg';
// self.get_echarts();// 数据渲染
self.to_echarts();//这个是转到图页面
});
},
to_3: function() { // 小米
let self = this;
self.show_other();
$.post("/xm",
JSON.stringify({
'topic': 'xm'}),
function(data, status){
console.log(data,'3')
self.ajax_data('小米',data);
self.img_url = '../static/img/003.jpg';
// self.get_echarts();// 数据渲染
self.to_echarts();//这个是转到图页面
});
},
to_4: function() { //恒大
let self = this;
self.show_other();
$.post("/hd",
JSON.stringify({
'topic': 'hd'}),
function(data, status){
console.log(data,'4')
self.ajax_data('恒大',data);
self.img_url = '../static/img/004.jpg';
// self.get_echarts();// 数据渲染
self.to_echarts();//这个是转到图页面
});
},
to_5: function() {// 房价
let self = this;
self.show_other();
$.post("/fj",
JSON.stringify({
'topic': 'fj'}),
function(data, status){
console.log(data,'5')
// 在这里改变数据
self.ajax_data('房价',data);
self.img_url = '../static/img/005.jpg';
// self.get_echarts();// 数据渲染
self.to_echarts();//这个是转到图页面
});
},
to_6: function() { //韩剧
let self = this;
self.show_other();
$.post("/hj",
JSON.stringify({
'topic': 'hj'}),
function(data, status){
console.log(data,'6')
// 在这里改变数据
self.ajax_data('韩剧',data);
self.img_url = '../static/img/006.jpg';
self.to_echarts();//这个是转到图页面
});
},
to_7: function() { //林书豪
let self = this;
self.show_other();
$.post("/lsh",
JSON.stringify({
'topic': 'lsh'}),
function(data, status){
console.log(data,'7')
// 在这里改变数据
self.ajax_data('林书豪',data);
self.img_url = '../static/img/007.jpg';
self.to_echarts();//这个是转到图页面
});
},
to_8: function() { //火箭
let self = this;
self.show_other();
$.post("/hj1",
JSON.stringify({
'topic': 'hj1'}),
function(data, status){
console.log(data,'8')
// 在这里改变数据
self.ajax_data('火箭',data);
self.img_url = '../static/img/008.jpg';
self.to_echarts();//这个是转到图页面
});
},
to_9: function() { //贪官
let self = this;
self.show_other();
$.post("/tg",
JSON.stringify({
'topic': 'tg'}),
function(data, status){
console.log(data,'9')
// 在这里改变数据
self.ajax_data('贪官',data);
self.img_url = '../static/img/009.jpg';
self.to_echarts();//这个是转到图页面
});
},
to_10: function() { //转基因
let self = this;
self.show_other();
$.post("/zjy",
JSON.stringify({
'topic': 'zjy'}),
function(data, status){
console.log(data,'10')
// 在这里改变数据
self.ajax_data('转基因',data);
self.img_url = '../static/img/010.jpg';
self.to_echarts();//这个是转到图页面
});
},
to_11: function() { //雾霾
let self = this;
self.show_other();
$.post("/wm",
JSON.stringify({
'topic': 'wm'}),
function(data, status){
console.log(data,'11')
// 在这里改变数据
self.ajax_data('雾霾',data);
self.img_url = '../static/img/011.jpg';
self.to_echarts();//这个是转到图页面
});
},
to_12: function() { //魅族
let self = this;
self.show_other();
$.post("/mz",
JSON.stringify({
'topic': 'mz'}),
function(data, status){
console.log(data,'12')
// 在这里改变数据
self.ajax_data('魅族',data);
self.img_url = '../static/img/012.jpg';
self.to_echarts();//这个是转到图页面
});
},
get_echarts: function(aa,bb,cc,dd) {
let self = this;
var myChart1 = echarts.init(document.getElementById('echarts_1'));
console.log(bb,'渲染的数据')
console.log(self.img_url,'img_url')
myChart1.setOption(aa);
var myChart2 = echarts.init(document.getElementById('echarts_2'));
myChart2.setOption(bb);
var myChart3 = echarts.init(document.getElementById('echarts_3'));
myChart3.setOption(cc);
var myChart5 = echarts.init(document.getElementById('echarts_5'));
myChart5.setOption(dd);
},
back_index: function(){
this.input_show = '';
this.echarts_show = 'none';
this.search = null;
this.zl_show = 'none';
this.e01_show = 'none';
this.e02_show = 'none';
this.e03_show = 'none';
}
},
mounted: function() {
}
})
</script>
</html>
更多推荐
已为社区贡献1条内容
所有评论(0)