1、效果图：
2、Vue代码
<template><!--区域分布数量柱状图--><div class="emp-area"></div>
</template><script>require('@/assets/theme/chalk')require('echarts/theme/macarons')export default {name: "StaffArea",data() {return {chart: null,examples: [],timerId: null,}},mounted() {// 动态效果,定时this.$nextTick(() => {this.initChart()this.timerId = setInterval(() => {this.examples = [];this.product();const option = this.chart.getOption();option.series[0].data = this.examples;this.chart.setOption(option);this.$forceUpdate()}, 5000);})window.addEventListener('resize', this.resize)},beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = nullwindow.removeEventListener('resize', this.resize)},created() {this.product()},destroyed() {clearInterval(this.timerId);},methods: {initChart() {this.chart = this.echarts.init(document.querySelector('.emp-area'), 'macarons')const cityColors = {'兰州市': '#CF4645','嘉峪关市': '#B580B2','金昌市': '#7cb9e8','白银市': '#146A90','天水市': '#8956FF','武威市': '#70C9A8','张掖市': '#bfbfbf','平凉市': '#595959','酒泉市': '#40a9ff','庆阳市': '#1890ff','定西市': '#ffd666','陇南市': '#adf7b6','临夏州': '#fa8c16','甘南州': '#80ed99',};this.chart.setOption({title: {text: '甘肃省各地州市人员',padding: [0, 0, 0, 10],textStyle: {color: '#fff',},},legend: {show: false,},animationDuration: 0,animationDurationUpdate: 3000,animationEasing: 'linear',animationEasingUpdate: 'linear',grid: {top: '8%',left: '3%',right: '4%',bottom: '3%',containLabel: true},xAxis: {axisLabel: {rotate: 0,color: '#fff'},splitLine: {show: false,},},yAxis: {type: 'category',axisLabel: {rotate: 30,color: '#fff'},data: ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '武威市', '张掖市', '平凉市', '酒泉市', '庆阳市', '定西市', '陇南市', '临夏州', '甘南州'],inverse: true,animationDuration: 0,animationDurationUpdate: 300,max: 13 // only the largest 3 bars will be displayed},series: [{realtimeSort: true,name: '',type: 'bar',itemStyle: {opacity: 1,barBorderRadius: 3,color: function (param) {return cityColors[param.name] || '#5470c6';},},data: this.examples,label: {show: true,position: 'right',valueAnimation: true,}}],});},product() {for (let i = 0; i < 14; ++i) {this.examples.push(Math.round(Math.random() * 200));}},resize() {this.chart.resize()},}}
</script><style lang="less" scoped>.emp-area {width: 100%;height: 100%;}
</style>
