效果图
<template><div><!-- 生态流量报警:echarts图2：柱状图 --><div id="main-barChart"></div></div></template><script>export default {props: {//表单禁用statistics: {type: Object,default() {return {}}}},data() {return {}},watch: {statistics(val) {console.log('wacth3', val.hename)if (val) {this.initCharts()}}},methods: {initCharts() {// 初始化echarts实例var myChart = this.$echarts.init(document.getElementById('main-barChart'))const henameList = this.statistics.hename.map(item => item.hename)const henameSums = this.statistics.hename.map(item => item.sums)console.log(henameList, henameSums)var data = henameSumsvar className = henameListvar colorList = ['#FF6600', '#FAC450', '#F7A729', '#00B050', '#0a7c3d']// var defaultData=[100,100,100,100,100];最多次数// 绘制图表var option = {title: {left: 'left',top: '2%',text: '单站报警TOP5',textStyle: {fontWeight: 'bold',color: '#535353',fontSize: 18,fontFamily: 'Microsoft YaHei'}},grid: {left: '5%',right: '5%',bottom: '-2%',top: '13%',containLabel: true},tooltip: {trigger: 'axis',axisPointer: {type: 'none'}// formatter: function (params) {// return (//params[0].name +//'<br/>' +//"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +//// params[0].seriesName + ' : ' + Number((params[0].value.toFixed(4) / 10000).toFixed(2)).toLocaleString() + ' <br/>'//params[0].seriesName +//' : ' +//params[0].value// )// }},xAxis: {show: false,type: 'value'},yAxis: [{type: 'category',inverse: true,// y轴显示不全，鼠标移上去显示全部，记得加上这个triggerEvent: true,axisLabel: {show: true,textStyle: {color: '#5A5E66'},//显示省略号操作（第一步）formatter: function (value) {var val = ''if (value.length > 5) {val = value.substr(0, 5) + '...'return val} else {return value}}},splitLine: {show: false},axisTick: {show: false},axisLine: {show: false},data: className},{type: 'category',inverse: true,axisTick: 'none',axisLine: 'none',show: true,axisLabel: {textStyle: {color: '#5A5E66',fontSize: '12',fontFamily: 'Microsoft YaHei',fontWeight: 'bold'},formatter: function (value) {return value + ' 次'}},data: data}],series: [{name: '报警次数',type: 'bar',zlevel: 1,itemStyle: {normal: {barBorderRadius: 0,// color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{//offset: 0,//color: 'rgb(57,89,255,1)'// }, {//offset: 1,//color: 'rgb(46,200,207,1)'// }]),color: params => {return colorList[params.dataIndex]}}},barWidth: 18,data: data},{name: '背景',type: 'bar',barWidth: 18,barGap: '-120%',/*多个并排柱子设置柱子之间的间距*/// data: defaultData,itemStyle: {normal: {color: 'transparent',barBorderRadius: 0}}}]}myChart.setOption(option)// 页面监控宽度的变化window.addEventListener('resize', function () {myChart.resize()})// 就是这个方法，解决y轴鼠标放上提示全部内容extension(myChart)function extension(myChart) {// 注意这里，是以X轴显示内容过长为例，如果是y轴的话，需要把ponentType == 'xAxis'改为yAxis// 判断是否创建过div框,如果创建过就不再创建了// 该div用来盛放文本显示内容的，方便对其悬浮位置进行处理var elementDiv = document.getElementById('extension')if (!elementDiv) {var div = document.createElement('div')div.setAttribute('id', 'extension')div.style.display = 'block'document.querySelector('html').appendChild(div)}myChart.on('mouseover', function (params) {if (ponentType == 'yAxis') {var elementDiv = document.querySelector('#extension')//设置悬浮文本的位置以及样式var elementStyle ='position: absolute;z-index: 99999;color: #fff;font-size: 12px;padding: 5px;display: inline;border-radius: 4px;background-color: #303133;box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 8px'elementDiv.style.cssText = elementStyleelementDiv.innerHTML = params.valuedocument.querySelector('html').onmousemove = function (event) {var elementDiv = document.querySelector('#extension')var xx = event.pageX - 10var yy = event.pageY + 15elementDiv.style.top = yy + 'px'elementDiv.style.left = xx + 'px'}}})myChart.on('mouseout', function (params) {//注意这里，我是以X轴显示内容过长为例，如果是y轴的话，需要改为yAxisif (ponentType == 'yAxis') {var elementDiv = document.querySelector('#extension')elementDiv.style.cssText = 'display:none'}})}}}}</script><style lang="less" scoped>#main-barChart {width: 100%;height: 280px;}</style>
