地图完整交互

component/chart/map-chart.js

@@ -8,101 +8,177 @@
            return {
                chartid: _.uniqueId("chart_"),
                chart: null,
                lastIndex:null
                lastIndex: null
            }
        },
        mounted: function () {
            var that =this;
      
            var that = this;
            this.$nextTick(function () {
                that.chart = echarts.init(document.getElementById(that.chartid));
                that.chart.setOption(defaults);  //试着一下
                this.chart.on('click', function (params) {//点击事件
                    that.$emit('clickMap',params)    //传给外面点击事件
                that.chart.setOption(that.setOption()); //试着一下
                this.chart.on('click', function (params) { //点击事件
                    that.$emit('clickMap', params) //传给外面点击事件
                    if (params.componentType === 'series') {
                      if(that.lastIndex !== null) {
                        that.chart.dispatchAction({   //把上一个高亮的取消掉
                                    type: 'downplay',
                                    seriesIndex: 0,
                                    dataIndex: that.lastIndex
                        if (that.lastIndex !== null) {
                            that.chart.dispatchAction({ //把上一个高亮的取消掉
                                type: 'downplay',
                                seriesIndex: 0,
                                dataIndex: that.lastIndex
                            })
                        }
                        that.$emit('map-click', params)
                        that.lastIndex = params.dataIndex //高亮现在这个
                        that.chart.dispatchAction({
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: params.dataIndex
                        })
                      }
                      that.$emit('map-click',params)     
                      that.lastIndex = params.dataIndex //高亮现在这个
                      that.chart.dispatchAction({
                          type: 'highlight',
                          seriesIndex: 0,
                          dataIndex: params.dataIndex
                      })  
                    }
                })  
   
                })
            })
        
        },
        methods: {
            setOption: function (options) {
                if(!options)return
                var options = $.extend({}, defaults, options);
            setOption: function () {
                var options=JSON.parse(JSON.stringify(defaults));
                if(this.config){
                    var maxValue =0;
                    this.config.data.map(v => {
                          if(v.value){
                            maxValue =  Math.max(maxValue,parseInt(v.value || 0));
                            maxValue = Math.ceil(maxValue/5)*5
                          }             
                        })
                        var piceArr = this.getPiceArr(maxValue)
                        options.visualMap = {
                            text: null,
                            color: ['#0146ad', '#bdcfe5', '#c5ddff'],
                            pieces: piceArr,
                            textStyle: {
                                color: '#b5e1fc'
                            },
                            left: '50'
                        }
                        options.series[0].zoom = this.config.zoom || 1.2;
                        options.series[0].data = this.config.data;
                }
                
                return options
            },
            getPiceArr(max, num) {
                var lastArr = [];
                if (max == 0) {
                    lastArr = [{
                        max: 0,
                        min: 0,
                        label: '0'
                    }]
                } else {
                    var divisor = max > 10000 ? 10000 : (max > 1000 ? 1000 : 100); //最小区间跨度值
                    var unitSpan = divisor >= 10000 ? 10000 : 1; //计算单位用
                    var _num = num || (max / divisor > 5) ? 5 : (max / divisor); //区间取值次数
                    var _span = (max / _num); //刚好区间跨度，需调整
                    _span = ((_span + '').match(/0/ig) && (_span + '').match(/0/ig).length) == (((_span + '').split('.'))[0].length - 1) ? _span : (((_span + '').substr(0, 1) | 0) + 1) + Array(((_span + '').split('.'))[0].length).join(0); //区间跨度，可能需要进位 0填充等
                    var company = _span >= 10000 ? '万' : ''; //区间单位
                    _num = num || Math.ceil(max / _span); //重新计算区间次数
                    for (var j = 0; j < _num; j++) {
                        lastArr.push({
                            min: _span * (_num - j - 1),
                            max: _span * (_num - j),
                            label: (_span * (_num - j - 1) / unitSpan) + company + "-" + (_span * (_num - j) / unitSpan) + company
                        })
                    }
                }
                return lastArr;
            },
            closeLineHeight(index) {
                var that = this;
                if (index) that.lastIndex = index
                if (that.lastIndex === null) return
                that.chart.dispatchAction({ //把上一个高亮的取消掉
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: that.lastIndex
                })
            },
            selectLineHeight(index){   //高亮某个区县   港北区--0     港南区--1   桂平市--2   平南县--3  覃塘区--5    //直接写死  顺序和guigang.js 的顺序一样
                index--;
                this.closeLineHeight();
                this.lastIndex = index
                this.chart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: index
                })
            }
        },
        watch: {
            config: function (data) {
                if (data) {
                    this.chart.setOption(this.setOption(data));
                    console.log(this.setOption());
                    console.log(defaults);
                    this.chart.setOption(this.setOption());
                }
            }
        }
    })
    var  defaults = {
    var defaults = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c} (p / km2)'
        },
        visualMap: {
            min: 800,
            max: 50000,
            text:['High','Low'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['#c5ddff','#62a3ff', '#277eff', '#005adc', '#0146ad']
            }
        },
        series: [
            {
                type: 'map',
                mapType: '贵港', // 自定义扩展图表类型
                itemStyle:{
                    normal:{
						label:{
							show:true,
							color: '#fff'
						},
						borderColor: '#fff',
						shadowColor: '#0355ab',
						shadowBlur: 10,
						shadowOffsetX: 10,
						shadowOffsetY: 10
					},
                    emphasis:{
						label:{
							show:true,
							color: '#fff'
						}
					}
            formatter: '{b}<br/>{c} (人次)'
        },      
        series: [{
            type: 'map',
            mapType: '贵港', // 自定义扩展图表类型
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        color: '#fff'
                    },
                    borderColor: '#fff',
                    shadowColor: '#0355ab',
                    shadowBlur: 10,
                    shadowOffsetX: 10,
                    shadowOffsetY: 10
                },
                data:[
                    {name: '港北区', value: 20057.34},
                    {name: '港南区', value: 15477.48},
                    {name: '桂平市', value: 31686.1},
                    {name: '平南县', value: 6992.6},
                    {name: '覃塘区', value: 44045.49}
                ],
				selectedMode: 'single'
            }
        ]
       }
                emphasis: {
                    label: {
                        show: true,
                        color: '#fff'
                    }
                }
            },
            data: [{
                    name: '港北区',
                    value: 20057.34
                },
                {
                    name: '港南区',
                    value: 15477.48
                },
                {
                    name: '桂平市',
                    value: 31686.1
                },
                {
                    name: '平南县',
                    value: 6992.6
                },
                {
                    name: '覃塘区',
                    value: 44045.49
                }
            ],
            selectedMode: 'single'
        }],
    }
})()

css/flex.css

@@ -45,6 +45,9 @@
.mb10{
    margin-bottom: .052083rem
}
.mr10{
    margin-right: .052083rem
}
.pl15{
    padding-left: .078125rem
}

dataJson/bigData.js

@@ -43,7 +43,7 @@ var bigData = {
			}
		},
		"grid": {
			top: '50',
			top: '70',
			left: '60'
		},
		legend: {
@@ -172,7 +172,7 @@ var bigData = {
			}
		},
		"grid": {
			top: '50'
			top: '70',
		},
		legend: {
			data: ['住院人次', '环比'],
@@ -280,7 +280,26 @@ var bigData = {
			}
		]
	},
	"各区县服务患者数": [{
			name: "港北区",
			value: 585
		},
		{
			name: "港南区",
			value: 584
		}, {
			name: "覃塘区",
			value: 523
		}, {
			name: "平南县",
			value: 559
		}, {
			name: "桂平市",
			value: 527
		},
	],
	"昨日数据": {
		"服务患者数": 3078,
		"门急诊人次": 2455,
		"住院人次": 623,
		"门急诊总费用": 565456.23,
@@ -306,7 +325,7 @@ var bigData = {
		{
			"月份": "3",
			"门急诊总费用": "23481",
			"门急诊总费用环比": "2.3",
			"门急诊总费用环比": "0.7",
			"门急诊次均费用": "296",
			"门急诊次均费用环比": "1.6"
		},
@@ -315,12 +334,12 @@ var bigData = {
			"门急诊总费用": "35482",
			"门急诊总费用环比": "1.5",
			"门急诊次均费用": "223",
			"门急诊次均费用环比": "1.4"
			"门急诊次均费用环比": "0.8"
		},
		{
			"月份": "5",
			"门急诊总费用": "25482",
			"门急诊总费用环比": "2.3",
			"门急诊总费用环比": "0.7",
			"门急诊次均费用": "276",
			"门急诊次均费用环比": "1.2"
		},
@@ -329,50 +348,102 @@ var bigData = {
			"门急诊总费用": "35486",
			"门急诊总费用环比": "2.3",
			"门急诊次均费用": "226",
			"门急诊次均费用环比": "2.2"
			"门急诊次均费用环比": "0.8"
		}
	],
	"门诊分类别月趋势": {
		"title": {
			"text": "门诊分类别月趋势",
			"x": "center"
			"x": "center",
			textStyle: {
				color: '#b5e1fc',
				fontSize: 16,
				fontWeight: 'bold'
			}
		},
		"tooltip": {
			"trigger": "axis"
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#fff'
				}
			}
		},
		"grid": {
			"x2": "80px",
			"y2": "50px",
			"x": "50px",
			"y": "40px"
			top: '70',
			left: '60',
			bottom: '30'
		},
		"xAxis": [{
			"type": "category",
			"name": "",
			"data": [
				"1月",
				"2月",
				"3月",
				"4月",
				"5月",
				"6月"
			]
		}],
		"yAxis": [{
			"type": "value",
			"name": ""
		legend: {
			data: ['普通号', '专家号', '普通号环比', '专家号环比'],
			textStyle: {
				color: '#b5e1fc'
			},
			top: '30',
			itemWidth: 10
		},
		xAxis: [{
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月'],
			axisPointer: {
				type: 'shadow'
			},
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#095f8e'
				}
			},
			axisLabel: {
				color: '#b5e1fc'
			}
		}],
		"series": [{
				"smooth": true,
				"name": "普通号",
				"type": "bar",
				"itemStyle": {
					"normal": {
						"lineStyle": {
							"shadowColor": "rgba(0,0,0,0.4)"
						}
		yAxis: [{
				type: 'value',
				name: '人次',
				nameTextStyle: {
					color: '#b5e1fc' // 坐标轴名称颜色
				},
				splitLine: {
					show: false
				},
				axisLine: {
					lineStyle: {
						color: '#095f8e'
					}
				},
				axisLabel: {
					color: '#b5e1fc'
				},
				splitNumber: 2
			},
			{
				type: 'value',
				name: '环比',
				min: 0,
				max: 4,
				nameTextStyle: {
					color: '#b5e1fc' // 坐标轴名称颜色
				},
				splitLine: {
					show: false // 不显示坐标轴刻度
				},
				axisLine: {
					lineStyle: {
						color: '#095f8e' // 坐标轴轴线颜色
					}
				},
				axisLabel: {
					color: '#b5e1fc' // 坐标轴刻度标签文本颜色
				}
			}
		],
		series: [{
				name: '普通号',
				type: 'bar',
				"data": [
					"13232",
					"26323",
@@ -380,19 +451,24 @@ var bigData = {
					"21232",
					"22454",
					"22892"
				]
			},
			{
				"smooth": true,
				"name": "专家号",
				"type": "bar",
				"itemStyle": {
					"normal": {
						"lineStyle": {
							"shadowColor": "rgba(0,0,0,0.4)"
						}
				],
				barWidth: 20,
				label: {
					normal: {
						show: true,
						position: 'top', // 在柱状图上方显示
						color: '#fff', // 柱状图上方显示的数值颜色
						fontSize: 11
					}
				},
				itemStyle: {
					barBorderRadius: [8, 8, 0, 0],
					color: '#00e6f3'
				}
			},
			{
				name: '专家号',
				type: 'bar',
				"data": [
					"9232",
					"8323",
@@ -400,19 +476,25 @@ var bigData = {
					"8232",
					"9454",
					"8892"
				]
			},
			{
				"smooth": true,
				"name": "普通环比",
				"type": "line",
				"itemStyle": {
					"normal": {
						"lineStyle": {
							"shadowColor": "rgba(0,0,0,0.4)"
						}
				],
				barWidth: 20,
				label: {
					normal: {
						show: true,
						position: 'top', // 在柱状图上方显示
						color: '#fff', // 柱状图上方显示的数值颜色
						fontSize: 11
					}
				},
				itemStyle: {
					barBorderRadius: [8, 8, 0, 0],
					color: '#fff71a'
				}
			},
			{
				name: '普通号环比',
				type: 'line',
				yAxisIndex: 1,
				"data": [
					"1.5",
					"2.2",
@@ -420,19 +502,15 @@ var bigData = {
					"1.1",
					"1.3",
					"1.6"
				]
				],
				itemStyle: {
					color: '#03fa6d'
				}
			},
			{
				"smooth": true,
				"name": "专家环比",
				"type": "line",
				"itemStyle": {
					"normal": {
						"lineStyle": {
							"shadowColor": "rgba(0,0,0,0.4)"
						}
					}
				},
				name: '专家号环比',
				type: 'line',
				yAxisIndex: 1,
				"data": [
					"2.5",
					"3.2",
@@ -440,8 +518,11 @@ var bigData = {
					"2.1",
					"2.3",
					"2.6"
				]
			}
				],
				itemStyle: {
					color: '#ff616f'
				}
			},
		]
	},
	"住院服务情况": [{
@@ -461,7 +542,7 @@ var bigData = {
		{
			"月份": "3",
			"住院总费用": "2348156",
			"住院总费用环比": "2.3",
			"住院总费用环比": "0.6",
			"住院次均费用": "1296",
			"住院次均费用环比": "1.6"
		},
@@ -470,64 +551,115 @@ var bigData = {
			"住院总费用": "3548562",
			"住院总费用环比": "1.5",
			"住院次均费用": "1223",
			"住院次均费用环比": "1.4"
			"住院次均费用环比": "0.9"
		},
		{
			"月份": "5",
			"住院总费用": "2548243",
			"住院总费用环比": "2.3",
			"住院总费用环比": "0.6",
			"住院次均费用": "1276",
			"住院次均费用环比": "1.2"
		},
		{
			"月份": "6",
			"住院总费用": "3548623",
			"住院总费用环比": "2.3",
			"住院总费用环比": "1.3",
			"住院次均费用": "1226",
			"住院次均费用环比": "2.2"
			"住院次均费用环比": "0.9"
		}
	],
	"住院平均日数月趋势": {
		"title": {
			"text": "住院平均日数月趋势",
			"x": "center"
			"x": "center",
			textStyle: {
				color: '#b5e1fc',
				fontSize: 16,
				fontWeight: 'bold'
			}
		},
		"tooltip": {
			"trigger": "axis"
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'cross',
				crossStyle: {
					color: '#fff'
				}
			}
		},
		"grid": {
			"x2": "80px",
			"y2": "50px",
			"x": "50px",
			"y": "40px"
			top: '70',
			left: '60',
			bottom: '30'
		},
		"xAxis": [{
			"type": "category",
			"name": "",
			"data": [
				"1月",
				"2月",
				"3月",
				"4月",
				"5月",
				"6月"
			]
		}],
		"yAxis": [{
			"type": "value",
			"name": ""
		legend: {
			data: ['住院平均床日数', '环比'],
			textStyle: {
				color: '#b5e1fc'
			},
			top: '30'
		},
		xAxis: [{
			type: 'category',
			data: ['1月', '2月', '3月', '4月', '5月', '6月'],
			axisPointer: {
				type: 'shadow'
			},
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#095f8e'
				}
			},
			axisLabel: {
				color: '#b5e1fc'
			}
		}],
		"series": [{
				"smooth": true,
				"name": "住院平均床日数",
				"type": "bar",
				"itemStyle": {
					"normal": {
						"lineStyle": {
							"shadowColor": "rgba(0,0,0,0.4)"
						}
		yAxis: [{
				type: 'value',
				name: '天',
				nameTextStyle: {
					color: '#b5e1fc' // 坐标轴名称颜色
				},
				splitLine: {
					show: false
				},
				axisLine: {
					lineStyle: {
						color: '#095f8e'
					}
				},
				axisLabel: {
					color: '#b5e1fc'
				},
				splitNumber: 2
			},
			{
				type: 'value',
				name: '环比',
				min: 0,
				max: 4,
				nameTextStyle: {
					color: '#b5e1fc' // 坐标轴名称颜色
				},
				splitLine: {
					show: false // 不显示坐标轴刻度
				},
				axisLine: {
					lineStyle: {
						color: '#095f8e' // 坐标轴轴线颜色
					}
				},
				axisLabel: {
					color: '#b5e1fc' // 坐标轴刻度标签文本颜色
				}
			}
		],
		series: [{
				name: '住院平均床日数',
				type: 'bar',
				"data": [
					"23.2",
					"46.1",
@@ -535,19 +667,24 @@ var bigData = {
					"41.2",
					"52.4",
					"42.4"
				]
			},
			{
				"smooth": true,
				"name": "环比",
				"type": "line",
				"itemStyle": {
					"normal": {
						"lineStyle": {
							"shadowColor": "rgba(0,0,0,0.4)"
						}
				],
				barWidth: 20,
				label: {
					normal: {
						show: true,
						position: 'top', // 在柱状图上方显示
						color: '#fff' // 柱状图上方显示的数值颜色
					}
				},
				itemStyle: {
					barBorderRadius: [8, 8, 0, 0],
					color: '#00e6f3'
				}
			},
			{
				name: '环比',
				type: 'line',
				yAxisIndex: 1,
				"data": [
					"1.5",
					"2.2",
@@ -555,7 +692,10 @@ var bigData = {
					"1.1",
					"1.3",
					"1.6"
				]
				],
				itemStyle: {
					color: '#03fa6d'
				}
			}
		]
	}

page/bigData/css/medical.css

@@ -101,6 +101,32 @@ padding-top: .09375rem;
	cursor: pointer;
}
/* 表格样式 */
td{
	text-align: center;
	height:.166667rem;
    border: 1px solid #019dff;
}
th{
	text-align: center;
	height: .208333rem;
	background: url(../images/mjzfwqktoubukuang.png) no-repeat;
	background-size: 100% 100%;
}
td img{
	margin-right: .026042rem;
    width: 12px;
}
.w60{
width: .3125rem
}
.w193{
	width: 1.005208rem
}
.w188{
	width: .979167rem
}
/* 左边样式 */
.div-body>.left{
	width: 2.3rem;
@@ -204,4 +230,6 @@ padding-top: .09375rem;
.dropdown-menu{
	background: url(../images/mjzfwqktoubukuang.png) no-repeat no-repeat;
	background-size: 100% 100%;
}
}

page/bigData/html/medical.html

@@ -86,7 +86,7 @@
                <div class="middle flex_coloumn">
					<!-- 地图 -->
					<div class="map mt20">
							<map-chart @map-click="clickMap"></map-chart>
							<map-chart @map-click="clickMap" ref="map" :config="mapData"></map-chart>
							<div class="dropdown Mapselect">
									<div type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">{{city}}
										<span class="caret"></span>
@@ -104,41 +104,41 @@
							<div class="left flex_coloumn f_x_sb">
								<div class="flex">
										<p class="w100">门急诊人次</p>
										<p class="yellow_number pl15 ">123,225 <span class="sub">人</span></p>
										<p class="yellow_number pl15 ">{{yesterdayData['门急诊人次']}} <span class="sub">人</span></p>
								</div>
								<div class="flex ">
										<p class="w100">门急诊总费用</p>
										<p class="yellow_number pl15 ">123,225 <span class="sub">元</span></p>
										<p class="yellow_number pl15 ">{{yesterdayData['门急诊总费用']}} <span class="sub">元</span></p>
								</div>
									
								<div class="flex">
										<p class="w100">门急诊次均费用</p>
										<p class="yellow_number pl15 ">123,225 <span class="sub">元</span></p>
										<p class="yellow_number pl15 ">{{yesterdayData['门急诊次均费用']}} <span class="sub">元</span></p>
								</div>								
							</div>
							
							<div class="middle flex_coloumn f_xy_c">
									<p class="mb10 title">门急诊人次</p>
									<p class="yellow_number font44">123,225 </p>
									<p class="sub">人次</p>
									<p class="mb10 title">昨日数据</p>
									<p class="yellow_number font44">{{yesterdayData['服务患者数']}} </p>
									<p class="sub">服务患者人数</p>
							</div>
							<div class="right flex_coloumn f_x_sb">
									<div class="flex">
											<p class="w100">住院人次</p>
											<p class="yellow_number pl15 ">123,225 <span class="sub">人</span></p>
											<p class="yellow_number pl15 ">{{yesterdayData['住院人次']}} <span class="sub">人</span></p>
									</div>
									<div class="flex">
											<p class="w100">住院总费用</p>
											<p class="yellow_number pl15 ">123,225 <span class="sub">元</span></p>
											<p class="yellow_number pl15 ">{{yesterdayData['门急诊次均费用']}} <span class="sub">元</span></p>
									</div>
										
									<div class="flex">
											<p class="w100">住院次均费用</p>
											<p class="yellow_number pl15 ">123,225 <span class="sub">元</span></p>
											<p class="yellow_number pl15 ">{{yesterdayData['住院均次费用']}} <span class="sub">元</span></p>
									</div>							
									<div class="flex">
											<p class="w100">住院平均日数</p>
											<p class="yellow_number pl15 ">123,225 <span class="sub">天</span></p>
											<p class="yellow_number pl15 ">{{yesterdayData['住院平均床日数']}} <span class="sub">天</span></p>
									</div>							
							</div>
					</div>
@@ -151,16 +151,69 @@
						<!-- 门诊服务情况 -->
						<div class="right1">
								<div class="boxTitle mb10">门诊服务情况</div>
								<div class="contentBox mb20  h234"></div>
								<div class="contentBox mb20  h234">
									<table>
										<tr>
										  <th class="w60">月份</th>
										  <th class="w193">门急诊总费用</th>
										  <th class="w188">门急诊均次费用</th>
										</tr>
										<tr v-for="(item,index) in tableData1">
										  <td>{{(index+1)+'月'}}</td>
										  <td>
											  <span class="mr10">{{item['门急诊总费用']}}元</span>
											  <span class="mr20">环比</span>
											  <img  v-if="item['门急诊总费用环比'] >1" src="../images/zengzhang.png">
											  <img v-else src="../images/xiajiang.png">
											  <span>{{item['门急诊总费用环比']}}</span>
										   </td>
										   <td>
											    <span class="mr10">{{item['门急诊次均费用']}}元</span>
											  <span class="mr20">环比</span>
											  <img  v-if="item['门急诊次均费用环比'] >1" src="../images/zengzhang.png">
											  <img v-else src="../images/xiajiang.png">
											  <span>{{item['门急诊次均费用环比']}}</span>
										   </td>
										</tr>
									  </table>
								</div>
								<div class="contentBox3 mb20 h165">
										<bar-chart :config="leftChart3"></bar-chart>
										<bar-chart :config="rightChart1"></bar-chart>
								</div>
							</div>
						<!-- 住院服务情况 -->
						<div class="right2">
								<div class="boxTitle mb10 mt24">住院服务情况</div>
								<div class="contentBox mb20 h234"></div>
								<div class="contentBox3  h165 mb10"></div>
								<div class="contentBox mb20 h234">
										<table>
												<tr>
												  <th class="w60">月份</th>
												  <th class="w193">住院总费用</th>
												  <th class="w188">住院均次费用</th>
												</tr>
												<tr v-for="(item,index) in tableData2">
												  <td>{{(index+1)+'月'}}</td>
												  <td>
													  <span class="mr10">{{item['住院总费用']}}元</span>
													  <span class="mr20">环比</span>
													  <img  v-if="item['住院总费用环比'] >1" src="../images/zengzhang.png">
													  <img v-else src="../images/xiajiang.png">
													  <span>{{item['住院总费用环比']}}</span>
												   </td>
												   <td>
														<span class="mr10">{{item['住院次均费用']}}元</span>
													  <span class="mr20">环比</span>
													  <img  v-if="item['住院次均费用环比'] >1" src="../images/zengzhang.png">
													  <img v-else src="../images/xiajiang.png">
													  <span>{{item['住院次均费用环比']}}</span>
												   </td>
												</tr>
											  </table>
								</div>
								<div class="contentBox3  h165 mb10">
									<bar-chart :config="rightChart2"></bar-chart>
								</div>
							</div>
				</div>
            </div>			

page/bigData/js/medical.js

@@ -3,6 +3,10 @@ new Vue({
	data: {     
        city:'贵港市',
        town: [
            {
                "townName": "贵港市",
                "result": "0"
            },
            {
                "townName": "港北区",
                "result": "26531"
@@ -12,62 +16,106 @@ new Vue({
                "result": "25634"
            },
            {
                "townName": "覃塘区",
                "result": "12587"
                "townName": "桂平市",
                "result": "113485"
            },
            {
                "townName": "平南县",
                "result": "74128"
            },
            {
                "townName": "桂平市",
                "result": "113485"
            }
                "townName": "覃塘区",
                "result": "12587"
            },
        ],
        timeType:'1',//时间过滤条件  1是上月  2是半年
        leftData1:{},  //左边数据块1
        leftData2:{}, //左边数据块2
        yesterdayData:{},
        leftChart1:null,   //左边的图表1
        leftChart2:null,    //左边的图表2
        leftChart3:null,    //左边的图表3
        timeType:'1'//时间过滤条件  1是上月  2是半年
        rightChart1:null,    //右边边的图表1
        rightChart2:null,    //右边的图表2
        tableData1:null, //表格数据1
        tableData2:null, //表格数据2
        mapData:null,
        allData:null   //所有的数据  用来切换区县
	},
	mounted: function() {
       this.initData()
    },
    methods: {
        initData:function(){
            this.allData = this.newObj(bigData);
            this.setLeftChart1();
            this.setLeftChart2();
            this.setRightChart1();
            this.setRightChart2();
            this.setTable1();
            this.setTable2();
            this.setleftData1();
            window.leftData1 =  this.leftData1
            this.setYesterDay();
            this.setMapData();
        },
        setleftData1:function(){
            var options = null;
            if(this.timeType == 1){
               options= this.newObj(bigData['上月']);         
               options= this.newObj(this.allData['上月']);         
                
            }
            else{
                options= this.newObj(bigData['本年'])
                options= this.newObj(this.allData['本年'])
            }
            this.setFormater(options);
            this.leftData1 =  options;
        },
        setYesterDay:function(){
            var options = null;
            options= this.newObj(this.allData['昨日数据'])
            this.setFormater(options);
            this.yesterdayData =  options;
        
        },
        setLeftChart1:function(){
           var options =bigData['门诊人次月趋势'];
           var options =this.allData['门诊人次月趋势'];
           this.leftChart1 = options
 
        },
        setLeftChart2:function(){
           var options =bigData['住院人次月趋势'];
           var options =this.allData['住院人次月趋势'];
           this.leftChart2 = options
        },
        setLeftChart3:function(){
           var options =bigData['门诊分类别月趋势'];
           this.leftChart3= options
        setMapData:function(){
            var options =this.allData['各区县服务患者数'];
            this.mapData ={data:options}  ;       
        },
        setRightChart1:function(){
           var options =this.allData['门诊分类别月趋势'];
           this.rightChart1= options
        },
        setRightChart2:function(){
           var options =this.allData['住院平均日数月趋势'];
           this.rightChart2= options
        },
        setTable1:function(){
            var options =this.allData['门急诊服务情况'];
            this.tableData1= options
        },
        setTable2:function(){
            var options =this.allData['住院服务情况'];
            this.tableData2= options
        },
        setCity(item){
            this.city = item.townName
            this.city = item.townName;
            var that =this;
            this.town.map(function(v,i){
                if(v.townName == item.townName) {
                    that.$refs.map.selectLineHeight(i) //高亮地图
                }
            })
           
        },
        setTimeStr(v){
            this.timeType = v;
@@ -82,8 +130,7 @@ new Vue({
            return JSON.parse(JSON.stringify(obj))
        },
        clickMap:function(res){
           console.log(res);
            
            this.city = res.name;
        }
    }
});