直接上干货！

效果如下：

代码如下：

methods: 中的方法

initChart() {let that = this;const fontColor = '#00D8FE'this.chart = this.$echarts.init(this.$refs.chart);//this.chart是data() {return {chart: null}}中创建的属性var option = {grid: {//柱状图位置top: "18%",left: "5%",right: "4%",bottom: "5%",containLabel: true,},// 柱图的标题文字//   title: {//     text: '平均游览时长：' + this.averageTime + '小时',//     textStyle: {//         align: 'left',//         color: '#18F6FF',//         fontSize: that.$base.nowSize(14),//     },//     top: '5%',//     left: '15%',// },tooltip: {show: true,trigger: "axis",axisPointer: {type: "shadow",shadowStyle: {color: "#65A3FF",opacity: 0.2,width: "auto",},},textStyle: {color: "#FFFFFF",fontFamily: "MicrosoftYaHei",fontSize: that.$base.nowSize(14),},borderWidth: 0,borderRadius: 5,padding: 0,backgroundColor: "transparent",formatter: function (v) {var str ='<span>' +v[0].name +"：" +v[0].data +"人</span><br/>";var inner ='<div style="color: #fff;text-align: left;font-family:Microsoft YaHei;line-height:' +that.$base.nowSize(22) +"px;font-size:" +that.$base.nowSize(14) +"px;padding: " +that.$base.nowSize(5) +"px " +that.$base.nowSize(10) +'px; border-radius:' +that.$base.nowSize(8) +'px; background: linear-gradient(90deg, #286CE9 0%, #6004F4 100%);">' +str +"</div>";return inner;},},xAxis: [{type: "category",data: ['光华小区', '光华小区', '光华小区', '光华小区', '光华小区', '光华小区', '光华小区', '光华小区', '光华小区', '光华小区'],axisLine: {//x轴样式show: false},axisTick: {//轴线刻度show: false},shadowBlur: 10,axisLabel: {show: true,interval: 0,//使x轴文字显示全textStyle: {color: "#FFFFFF",fontSize: that.$base.nowSize(12),},inside: false,// rotate: 20,},splitLine: {show: false},},],yAxis: [{type: "value",name: "",nameLocation: "end",nameTextStyle: {fontFamily: "Source Han Sans CN",color: "#26BCF8",opacity: 0.7,},axisLine: {//y轴样式show: false},axisLabel: {show: false,inside: false},axisTick: {show: false},splitLine: {show: false},},],series: [{//柱的信息name: "体育健康",type: "bar",data: [200, 170, 167, 150, 146, 132, 120, 115, 100, 80],itemStyle: {normal: {barBorderRadius: 0,color: function (params) {//渐变色，也可以直接用数组给不同的柱子设置不同的颜色return new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(103, 245, 200, 1)",},{offset: 1,color: "rgba(89, 252, 198, 0)",},]);},  }},emphasis: {itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: '#F9E142' // 0% 处的颜色}, {offset: 1, color: '#40523F' // 100% 处的颜色}],global: false // 缺省为 false},}},// 只能展示数据中的value字段label: {show: false,position: 'top',color: fontColor,fontSize: that.$base.nowSize(14)},zlevel: 11,barWidth: that.$base.nowSize(10), //柱子宽度markPoint: {symbol:'rect',// circle:圆形，rect:方形itemStyle:{normal:{label:{show:true,color:'#fff',position: 'top',color: fontColor,fontSize: that.$base.nowSize(14),formatter: function (param) {// if(param.data.coord[1]>20){//   return '优秀'// }else if (param.data.coord[1]>10){//   return '良好'// } else {//   return '不达标'// }return param.name}},color:'rgba(89, 252, 198, 0)'}},symbolSize:[50, 50],symbolOffset:[0,24],// data中的数据，name字段是你想要展示的内容，coord字段中的第一个数是指第几个柱子，第二个字段是柱子的值data:[{name:'Top1',coord:[0,200]},{name:'Top2',coord:[1,170]},{name:'Top3',coord:[2,167]},{name:'Top4',coord:[3,150]},{name:'Top5',coord:[4,146]},{name:'Top6',coord:[5,132]},{name:'Top7',coord:[6,120]},{name:'Top8',coord:[7,115]},{name:'Top9',coord:[8,100]},{name:'Top10',coord:[9,80]},],},//   markLine: {//     data: [//       {type: 'average', name: '平均值'}//     ]//   }},],};option && this.chart.setOption(option);},
// tooltip 自动循环展示
setHighlightFun() {this.chart.dispatchAction({type: "showTip",seriesIndex: 0,dataIndex: this.loopIndex,position: (pos, params, dom, rect, size) => {this.$utils.positionFun(pos, params, dom, rect, size)},});this.loopIndex++;// this.resData 是data() {return {resData: []}}中创建的属性,内容是对应的柱图的数据条数的数据if (this.loopIndex == this.resData.length) {this.loopIndex = 0;}
},