123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180 |
- (function() {
- Vue.component('key-service-population', {
- template: '<div style="height: 100%;">\
- <h4 class="c-b5e1fc c-f16 c-t-center div-common-title">重点服务人群增加趋势</h4>\
- <div data-toggle="buttons" class="btn-group fr mr40 mt0" style="position: absolute;right: 0.208rem;top: 0.05rem;z-index: 99999;">\
- <label class="btn btn-default" :class="{active: activeIndex == 0}" @click="btnClick(0)">\
- <input type="radio">月\
- </label>\
- <label class="btn btn-default" :class="{active: activeIndex == 1}" @click="btnClick(1)">\
- <input type="radio">季\
- </label>\
- <label class="btn btn-default" :class="{active: activeIndex == 2}" @click="btnClick(2)">\
- <input type="radio">年\
- </label>\
- </div>\
- <div id="div-zhongidan-echart" class="ml30"></div>\
- </div>',
- props: ["data"],
- data: function() {
- return {
- keyServiceData:null,
- activeIndex:0,
- fontSize: 0.007 * window.screen.width,
- }
- },
- mounted: function() {
- var vm = this;
- setTimeout(function(){
- vm.initData();
- },50)
- },
- watch:{
- data:function(data){
- this.data = data;
- this.initData();
- }
- },
- methods: {
- initData:function(){//重点人群
- this.activeIndex = 0;
- this.keyServiceData = this.data["重点服务人群增加趋势"].本月;
- this.chartMainFun();
- },
- btnClick:function(type){
- this.activeIndex = type;
- if(type==0){//本月
- this.keyServiceData = this.data["重点服务人群增加趋势"].本月;
- }
- if(type==1){//本季
- this.keyServiceData = this.data["重点服务人群增加趋势"].本季;
- }
- if(type==2){//本年
- this.keyServiceData = this.data["重点服务人群增加趋势"].本年;
- }
- this.chartMainFun();
- },
- chartMainFun:function(){
- var vm = this;
- var xAxisData = this.keyServiceData.xAxis[0].data;
- var pjcrsData = this.keyServiceData.series[0].data;
- var huanbiData = this.keyServiceData.series[1].data;
- var zhongdianChart = echarts.init(document.getElementById('div-zhongidan-echart'));
- var zhongdianOption = {
- tooltip: {
- trigger: 'axis',
- axisPointer: {
- type : 'shadow'
- },
- formatter: '{b} <br /> {a0}: {c0}<br />{a1}: {c1}' + "%"
- },
- grid: {top: 50, bottom: 30, left: 30,right:80},
- legend: {
- data:['平均床日数','环比'],
- textStyle: {
- color: '#b5e1fc'
- }
- },
- xAxis: [
- {
- type: 'category',
- data: xAxisData,
- axisPointer: {
- type: 'shadow'
- },
- axisTick: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: '#095f8e'
- }
- },
- axisLabel: {
- color: '#b5e1fc',
- fontSize:vm.fontSize
- }
- }
- ],
- yAxis: [
- {
- type: 'value',
- name: '平均床日数',
- nameTextStyle: {
- color: '#b5e1fc' // 坐标轴名称颜色
- },
- splitLine: {
- show: false
- },
- axisLine: {
- lineStyle: {
- color: '#095f8e'
- }
- },
- axisLabel: {
- color: '#b5e1fc',
- fontSize:vm.fontSize
- }
- },
- {
- type: 'value',
- name: '环比',
- nameTextStyle: {
- color: '#b5e1fc' // 坐标轴名称颜色
- },
- splitLine: {
- show: false // 不显示坐标轴刻度
- },
- axisLine: {
- lineStyle: {
- color: '#095f8e' // 坐标轴轴线颜色
- }
- },
- axisLabel: {
- color: '#b5e1fc' ,// 坐标轴刻度标签文本颜色
- fontSize:vm.fontSize
- },
- show: true
- }
- ],
- series: [
- {
- name:'平均床日数',
- type:'bar',
- data:pjcrsData,
- barWidth: 20,
- label: {
- normal: {
- show: true,
- position: 'top', // 在柱状图上方显示
- color: '#fff',// 柱状图上方显示的数值颜色
- }
- },
- itemStyle: {
- barBorderRadius: [8,8,0,0],
- color: '#00e6f3'
- }
- },
- {
- name:'环比',
- type:'line',
- yAxisIndex: 1,
- data:huanbiData,
- itemStyle: {
- color: '#03fa6d'
- },
- }
- ]
- };
-
- zhongdianChart.setOption(zhongdianOption);
- },
-
-
-
- }
-
- })
- })()
|