emergencyManagement/components/IndexBarChart.vue

<template>
  <view>
    <uni-ec-canvas
      class="uni-ec-canvas"
      id="line-chart"
      canvas-id="multi-charts-line"
      :ec="ec"
    ></uni-ec-canvas>
  </view>
</template>

<script>
import uniEcCanvas from "./UniEcCanvas.vue";
export default {
  props: ['data'],
  watch: {
	  'data.yData': {
		handler(val) {
		  if (val) {
			this.ec.option.series[0].data = val;
		  }
		},
		deep: true
	  },
	  'data.name': {
	  		handler(val) {
	  		  if (val) {
	  			this.ec.option.series[0].name = val;
	  		  }
	  		},
	  		deep: true
	  },
	  'data.xData': {
		handler(val) {
		  if (val) {
			this.ec.option.xAxis.data = val;
		  }
		},
		deep: true
	  }
  },
  data() {
    return {
      ec: {
		option : {
		  legend: {
				show: true
		  },
		  xAxis: {
			type: 'category',
			data: [],
			axisLabel: {
				rotate: -50,
				fontSize:10
			}
		  },
		  yAxis: {
			type: 'value'
		  },
		  series: [
			{
			  data: [],
			  type: 'bar',
			  name: '统计数据',
			  barWidth: 14,
			  itemStyle: {
				color: '#0080FF'
			  }
			}
		  ]
		}
      }
    };
  },
  components: {
    uniEcCanvas
  }
};
</script>

<style scoped>
.uni-ec-canvas {
  width: 100%;
  height: 600upx;
  display: block;
}
</style>