需要工具： 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>