【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模块代码如下:


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>


猜你喜欢

转载自blog.csdn.net/qq_41664845/article/details/80454543
今日推荐