|
@@ -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);*/
|
|
|
|
|
|
- // })
|
|
|
+ // })
|
|
|
|
|
|
}
|
|
|
},
|