Echarts多列柱状图时，鼠标滑过显示百分比

前言

最近在弄echarts图表，遇到了同一个图表展示多个柱子，并且鼠标滑过的时候显示对应的个数以及百分比。

我只展示了我写的js部分，具体的引入使用请参考官网 Echarts官网

一、效果图

二、实现方法

1.在series中直接使用tooltip（适合单个柱状图）

代码如下（示例）：

<script>
import * as echarts from 'echarts';
import { kpiData } from '@/api/api'

let _self;

export default {
  data(){
    return{
      completionCharts:{},
      percentList:[],
      completionData:[],
    }
  },
  mounted:function(){
    _self = this
    _self.completionInitCharts();
  },
  computed:{
    completionOpt(){
      let completionOption = {
        color:['#2976F7','#9ED13C','#508EFB','#5FC5FF','#45D9B0'],
        legend: {
          width:'90%',
          left:'860',
          top:'0'
        },
        tooltip: {},
        xAxis: {
          type: 'category',
          nameTextStyle:{
            color:'#B6BFCE',
            padding:[3,0,5,0]
          },
          data:[]
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            barWidth: '20%',
            data: []
          }
        ]
      }
      return completionOption;
    },
    
  },
  methods:{
    //板块指标完成情况
    completionInitCharts(){
      _self.completionCharts = echarts.init(_self.$refs.completionCharts);
      _self.completionCharts.setOption(_self.completionOpt);
      console.log(_self.plateNum)
      completionCharts({'plate':_self.plateNum}).then((res) => {
        console.log(res)
        _self.percentList = res.result.percent
        _self.completionCharts.setOption({
          xAxis: {
            data: res.result.val,  //将异步请求获取到的数据进行装载
          },
          series:[{
            data:res.result.data[0].data,
            tooltip:{
              formatter:function(indexs){
                var percent;
                res.result.data[0].data.forEach((item,index) => {
                  if(indexs.value == item){
                    percent = index
                  }
                })
                return indexs.name + ':<b style="margin:0 10px">'+ _self.percentList[percent]+'%</b><b>'+indexs.value+'</b>'
              }
            }
          }]
        })
      })
    },
  }
}
</script>

其中后台返回的数据格式是

{
	result：[
		{
			'data':['aaaa','bbbb','ccccc'],
			'percent':['10','4','2','6','7']
		}
		
	]
}

2.在tooltip中设置（适合多个柱状图）

代码如下（示例）：

<script>
import * as echarts from 'echarts';
import { kpiData } from '@/api/api'

let _self;

export default {
  data(){
    return{
      completionCharts:{},
      percentList:[],
      completionData:[],
    }
  },
  mounted:function(){
    _self = this
    _self.completionInitCharts();
  },
  computed:{
    completionOpt(){
      let completionOption = {
        color:['#2976F7','#9ED13C','#508EFB','#5FC5FF','#45D9B0','#3399CC','#99CCCC','#6699CC','#0099CC'],
        legend: {
          width:'70%',
          left:'860',
          top:'0'
        },
        tooltip: {
          formatter:function(indexs){
            // console.log(indexs)  
            var floor;
            var percents;
            _self.completionData.forEach((item,index) => {
              if(item.name == indexs.seriesName){
                floor = index
                item.data.forEach((items,index) => {
                  if(indexs.data == items && indexs.dataIndex == index){
                    percents = index
                  }
                })
              }
            })
            return indexs.seriesName+'<br />'+indexs.name + ':<b style="margin:0 10px">'+ _self.percentList[floor].percent[percents]+'%</b><b>'+indexs.data+'</b>'
          }
        },
        xAxis: {
          type: 'category',
          nameTextStyle:{
            color:'#B6BFCE',
            padding:[3,0,5,0]
          },
          data:[]
        },
        yAxis: {},
        series: []
      }
      return completionOption;
    },
    
  },
  methods:{
    //板块指标完成情况
    completionInitCharts(){
      _self.completionCharts = echarts.init(_self.$refs.completionCharts);
      _self.completionCharts.setOption(_self.completionOpt);
      kpiData().then((res) => {
        _self.percentList = res.result.percent
        _self.completionData = res.result.data
        _self.completionCharts.setOption({
          xAxis: {
            data: res.result.val,  //将异步请求获取到的数据进行装载
          },
          series:res.result.data
        })
      })
    },
  }
}
</script>

其中后台返回的数据格式是

{
	result：[
		{
			'val':['aaaa','bbbb','ccccc','dddd','eeee'],
			'data':[
				{
					name:'aaaaaaaaaa',
					type:'bar',
					data:['20','30','49','0','50']
				},
				{
					name:'bbbbbbb',
					type:'bar',
					data:['20','30','49','0','50']
				},
				{
					name:'cccccc',
					type:'bar',
					data:['20','30','49','0','50']
				},
				{
					name:'ddddddd',
					type:'bar',
					data:['20','30','49','0','50']
				},
				{
					name:'eeeeee',
					type:'bar',
					data:['20','30','49','0','50']
				}
			],
			'percent':[
				{
					'percent':['10','4','2','6','7']
				},
				{
					'percent':['10','4','2','6','7']
				},
				{
					'percent':['10','4','2','6','7']
				},
				{
					'percent':['10','4','2','6','7']
				},
				{
					'percent':['10','4','2','6','7']
				}
			]
		}
		
	]
}

总结

提示：方法一中的 data 跟 percent 的值必须要一一对应的，
方法二 中的 val 的值是柱状图的x轴的数据， val 的值得个数跟 data:[‘20’,‘30’,‘49’,‘0’,‘50’] 中值得个数是相同的，并且跟 percent 中的值是一一对应的