|  | @@ -12,14 +12,12 @@ export default {
 | 
	
		
			
				|  |  |    name: "BarData",
 | 
	
		
			
				|  |  |    data() {
 | 
	
		
			
				|  |  |      return {
 | 
	
		
			
				|  |  | -      a:[],
 | 
	
		
			
				|  |  | -      b:[]
 | 
	
		
			
				|  |  | +      a: [],
 | 
	
		
			
				|  |  | +      b: []
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    props: {
 | 
	
		
			
				|  |  | -    resultXData: {
 | 
	
		
			
				|  |  | -
 | 
	
		
			
				|  |  | -    },
 | 
	
		
			
				|  |  | +    resultXData: {},
 | 
	
		
			
				|  |  |      titleText: {
 | 
	
		
			
				|  |  |        type: String,
 | 
	
		
			
				|  |  |      }
 | 
	
	
		
			
				|  | @@ -30,9 +28,9 @@ export default {
 | 
	
		
			
				|  |  |      }, 1000)*/
 | 
	
		
			
				|  |  |    },
 | 
	
		
			
				|  |  |    watch: {
 | 
	
		
			
				|  |  | -    resultXData:{
 | 
	
		
			
				|  |  | -        handler(newVal){
 | 
	
		
			
				|  |  | -        this.resultYData=newVal
 | 
	
		
			
				|  |  | +    resultXData: {
 | 
	
		
			
				|  |  | +      handler(newVal) {
 | 
	
		
			
				|  |  | +        this.resultYData = newVal
 | 
	
		
			
				|  |  |          this.getPie()
 | 
	
		
			
				|  |  |        }
 | 
	
		
			
				|  |  |  
 | 
	
	
		
			
				|  | @@ -41,91 +39,95 @@ export default {
 | 
	
		
			
				|  |  |    methods: {
 | 
	
		
			
				|  |  |      getPie() {
 | 
	
		
			
				|  |  |        var _this = this
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  |        // 绘制图表
 | 
	
		
			
				|  |  | -     /* this.$nextTick(() => {*/
 | 
	
		
			
				|  |  | -        var option = {
 | 
	
		
			
				|  |  | -          title: {
 | 
	
		
			
				|  |  | -            text: this.titleText,
 | 
	
		
			
				|  |  | -            x: 'left',              //标题位置
 | 
	
		
			
				|  |  | -            // textStyle: { //标题内容的样式
 | 
	
		
			
				|  |  | -            //   color: '#000',
 | 
	
		
			
				|  |  | -            //   fontStyle: 'normal',
 | 
	
		
			
				|  |  | -            //   fontWeight: 100,
 | 
	
		
			
				|  |  | -            //   fontSize: 16 //主题文字字体大小,默认为18px
 | 
	
		
			
				|  |  | -            // },
 | 
	
		
			
				|  |  | -          },
 | 
	
		
			
				|  |  | -          tooltip: {
 | 
	
		
			
				|  |  | -            trigger: 'axis',
 | 
	
		
			
				|  |  | -            axisPointer: {
 | 
	
		
			
				|  |  | -              type: 'shadow'
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -          },
 | 
	
		
			
				|  |  | -          grid: {
 | 
	
		
			
				|  |  | -            left: '3%',
 | 
	
		
			
				|  |  | -            right: '4%',
 | 
	
		
			
				|  |  | -            bottom: '3%',
 | 
	
		
			
				|  |  | -            containLabel: true
 | 
	
		
			
				|  |  | -          },
 | 
	
		
			
				|  |  | -          xAxis: [
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -              type: 'category',
 | 
	
		
			
				|  |  | -              data: this.resultYData.name,
 | 
	
		
			
				|  |  | -              axisTick: {
 | 
	
		
			
				|  |  | -                alignWithLabel: true
 | 
	
		
			
				|  |  | -              },
 | 
	
		
			
				|  |  | -              axisLabel: {
 | 
	
		
			
				|  |  | -                interval: 0,
 | 
	
		
			
				|  |  | -                rotate: 20
 | 
	
		
			
				|  |  | -              }
 | 
	
		
			
				|  |  | +      /* this.$nextTick(() => {*/
 | 
	
		
			
				|  |  | +      var option = {
 | 
	
		
			
				|  |  | +        title: {
 | 
	
		
			
				|  |  | +          text: this.titleText,
 | 
	
		
			
				|  |  | +          x: 'left',              //标题位置
 | 
	
		
			
				|  |  | +          // textStyle: { //标题内容的样式
 | 
	
		
			
				|  |  | +          //   color: '#000',
 | 
	
		
			
				|  |  | +          //   fontStyle: 'normal',
 | 
	
		
			
				|  |  | +          //   fontWeight: 100,
 | 
	
		
			
				|  |  | +          //   fontSize: 16 //主题文字字体大小,默认为18px
 | 
	
		
			
				|  |  | +          // },
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        tooltip: {
 | 
	
		
			
				|  |  | +          trigger: 'axis',
 | 
	
		
			
				|  |  | +          axisPointer: {
 | 
	
		
			
				|  |  | +            type: 'shadow'
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        grid: {
 | 
	
		
			
				|  |  | +          left: '3%',
 | 
	
		
			
				|  |  | +          right: '4%',
 | 
	
		
			
				|  |  | +          bottom: '3%',
 | 
	
		
			
				|  |  | +          containLabel: true
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        xAxis: [
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            type: 'category',
 | 
	
		
			
				|  |  | +            data: this.resultYData.name,
 | 
	
		
			
				|  |  | +            axisTick: {
 | 
	
		
			
				|  |  | +              alignWithLabel: true
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            axisLabel: {
 | 
	
		
			
				|  |  | +              interval: 0,
 | 
	
		
			
				|  |  | +              rotate: 20
 | 
	
		
			
				|  |  |              }
 | 
	
		
			
				|  |  | -          ],
 | 
	
		
			
				|  |  | -          legend: {
 | 
	
		
			
				|  |  | -            top: '5%', // 控制 板块控制器的位置
 | 
	
		
			
				|  |  | -            right: 'center',
 | 
	
		
			
				|  |  | -            // icon: 'rect',//形状  类型包括 circle,rect,line,roundRect,triangle,diamond,pin,arrow,none
 | 
	
		
			
				|  |  | -            // itemWidth: 10,  // 设置宽度
 | 
	
		
			
				|  |  | -            // itemHeight: 4, // 设置高度
 | 
	
		
			
				|  |  | -            itemGap: 40, // 设置两个legend之间的间距
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        ],
 | 
	
		
			
				|  |  | +        legend: {
 | 
	
		
			
				|  |  | +          top: '5%', // 控制 板块控制器的位置
 | 
	
		
			
				|  |  | +          right: 'center',
 | 
	
		
			
				|  |  | +          // icon: 'rect',//形状  类型包括 circle,rect,line,roundRect,triangle,diamond,pin,arrow,none
 | 
	
		
			
				|  |  | +          // itemWidth: 10,  // 设置宽度
 | 
	
		
			
				|  |  | +          // itemHeight: 4, // 设置高度
 | 
	
		
			
				|  |  | +          itemGap: 40, // 设置两个legend之间的间距
 | 
	
		
			
				|  |  | +        },
 | 
	
		
			
				|  |  | +        yAxis: [
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            type: 'value',
 | 
	
		
			
				|  |  | +            name: "单位(亩)",
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        ],
 | 
	
		
			
				|  |  | +        series: [
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            name: '实际占用土地面积',
 | 
	
		
			
				|  |  | +            type: 'bar',
 | 
	
		
			
				|  |  | +            barWidth: 20,
 | 
	
		
			
				|  |  | +            symbolSize: 8,
 | 
	
		
			
				|  |  | +            label: {
 | 
	
		
			
				|  |  | +              show: true,
 | 
	
		
			
				|  |  | +              position: 'top',
 | 
	
		
			
				|  |  | +            },
 | 
	
		
			
				|  |  | +            data: this.resultYData.value
 | 
	
		
			
				|  |  |            },
 | 
	
		
			
				|  |  | -          yAxis: [
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -              type: 'value',
 | 
	
		
			
				|  |  | -              name: "单位(亩)",
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -          ],
 | 
	
		
			
				|  |  | -          series: [
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -              name: '实际占用土地面积',
 | 
	
		
			
				|  |  | -              type: 'bar',
 | 
	
		
			
				|  |  | -              barWidth: 20,
 | 
	
		
			
				|  |  | -              symbolSize: 8,
 | 
	
		
			
				|  |  | -              label: {
 | 
	
		
			
				|  |  | -                show: true,
 | 
	
		
			
				|  |  | -                position:'top',
 | 
	
		
			
				|  |  | -              },
 | 
	
		
			
				|  |  | -              data: this.resultYData.value
 | 
	
		
			
				|  |  | +          {
 | 
	
		
			
				|  |  | +            name: '闲置低效土地面积',
 | 
	
		
			
				|  |  | +            type: 'bar',
 | 
	
		
			
				|  |  | +            symbolSize: 8,
 | 
	
		
			
				|  |  | +            barWidth: 20,
 | 
	
		
			
				|  |  | +            label: {
 | 
	
		
			
				|  |  | +              show: true,
 | 
	
		
			
				|  |  | +              position: 'top',
 | 
	
		
			
				|  |  |              },
 | 
	
		
			
				|  |  | -            {
 | 
	
		
			
				|  |  | -              name: '闲置低效土地面积',
 | 
	
		
			
				|  |  | -              type: 'bar',
 | 
	
		
			
				|  |  | -              symbolSize: 8,
 | 
	
		
			
				|  |  | -              barWidth: 20,
 | 
	
		
			
				|  |  | -              label: {
 | 
	
		
			
				|  |  | -                show: true,
 | 
	
		
			
				|  |  | -                position:'top',
 | 
	
		
			
				|  |  | -              },
 | 
	
		
			
				|  |  | -              data: this.resultYData.value2
 | 
	
		
			
				|  |  | -            }
 | 
	
		
			
				|  |  | -          ]
 | 
	
		
			
				|  |  | +            data: this.resultYData.value2
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        ]
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        }
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -        // 使用刚指定的配置项和数据显示图表。
 | 
	
		
			
				|  |  | -        var myChart = echarts.init(this.$refs.dom)
 | 
	
		
			
				|  |  | -        myChart.setOption(option)
 | 
	
		
			
				|  |  | -        /*window.addEventListener("resize", myChart.resize);*/
 | 
	
		
			
				|  |  | +      // 使用刚指定的配置项和数据显示图表。
 | 
	
		
			
				|  |  | +      var myChart = echarts.init(this.$refs.dom)
 | 
	
		
			
				|  |  | +      myChart.on('click', (params) => {
 | 
	
		
			
				|  |  | +        _this.$emit('visible', {xzqh: params.name});
 | 
	
		
			
				|  |  | +      })
 | 
	
		
			
				|  |  | +      myChart.setOption(option)
 | 
	
		
			
				|  |  | +      /*window.addEventListener("resize", myChart.resize);*/
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  | -    //  })
 | 
	
		
			
				|  |  | +      //  })
 | 
	
		
			
				|  |  |  
 | 
	
		
			
				|  |  |      }
 | 
	
		
			
				|  |  |    },
 |