Echarts升级2：柱状图头部显示百分比、同时内容在弹框显示

目录

需求及技术说明：

效果图： 

根据排污口的排口情况应用echarts的柱状图:

详解1：头部添加百分比

详解2：在弹框不出现百分比

详解3：一种参数同时出现两种值，并且分别展现

---

 

需求及技术说明：

效果图： 

根据排污口的排口情况应用echarts的柱状图:

• 头部展示百分比
• 内容展示排口量
• 展示多个排口名称及单位
• 通过官网，展示的弹框内容基本是展示所有数据

所以，要自定义弹框的内容。

对于多个排口数据的展示，需要循环来插入series，对于头部的数据，需要设置样式。

至于，使两数据集合与一点，这里是柱子重合到一起。

最后，浮窗位置一定要设置，否则会有偏差 ！

话不多说，上代码，详解见下面

//折线图初始化
      setEchart() {  
        this.myChart = echarts.init(document.getElementById('mainEcharts'));
        var tmp = []
        for (var j in this.headerDataTwo) {  
          this.valueLine = [] 
          this.valueper = []
          for (var i in this.historyDataLine) {
            this.valueLine.push(this.historyDataLine[i].ems[j])
            this.valueper.push(parseFloat(this.historyDataLine[i].per[j]))
          }
          var per = {
            name: this.headerDataTwo[j],
            type: 'bar',
            barWidth: 5,
            barGap:'80%',/*多个并排柱子设置柱子之间的间距*/
            barCategoryGap:'50%',/*多个并排柱子设置柱子之间的间距*/
            stack: this.headerDataTwo[j],
            data: this.valueLine
          };
          tmp.push(per)
          var temp = {
            name: this.headerDataTwo[j],
            type: 'bar',
            barWidth: 5,
            barGap:'80%',/*多个并排柱子设置柱子之间的间距*/
            barCategoryGap:'50%',/*多个并排柱子设置柱子之间的间距*/
            stack: this.headerDataTwo[j],
             label: {
                show: true,
                position: 'top',
                formatter: function(v){
                  if(v.data!='0'){
                     return v.data + '%'
                  }else{
                    return ''
                  }
                  
                },
            },
            data: this.valueper,
          };
          tmp.push(temp)
        }
        // 指定图表的配置项和数据
        this.myChart.setOption({
          tooltip: {
            trigger: 'axis',
						// 浮窗位置
						position: function (point, params, dom, rect, size) {
							var x = 0;
							var y = 0;
							var pointX = point[0];
							var pointY = point[1];
							var boxWidth = size.contentSize[0];
							var boxHeight = size.contentSize[1];
							if (boxWidth > pointX) {
								x = 5;
							} else { // 左边放的下
								x = pointX - boxWidth;
							}
							if (boxHeight > pointY) {
								y = 5;
							} else { // 上边放得下
								y = pointY - boxHeight;
							}
							return [x, y];
						},
						//浮窗内容
						formatter(params) {
              console.log(params)
              var pa = ''
              for(var i in params){
                if(i%2 ==0){
                pa = '<p>'+params[i].marker +params[i].seriesName + '：' + params[i].value+'<br>'+pa
                }
              }
              return pa
						}
          },
          legend: {
            data: this.headerDataTwo
          },
          grid: {
            left: '2%',
            right: '5%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            name: "日期",
            type: "category",
            boundaryGap: true,
            data: this.xAxis.map(function (str) {
              return str.replace(' ', '\n')
            })
          },
          yAxis: {
            name: "值",
            type: 'value'
          },
          series: tmp,
          
        });

      },

 

接口内容： 

详解1：头部添加百分比

var temp = {
            name: this.headerDataTwo[j],
            type: 'bar',
            barWidth: 5,
            barGap:'80%',/*多个并排柱子设置柱子之间的间距*/
            barCategoryGap:'50%',/*多个并排柱子设置柱子之间的间距*/
            stack: this.headerDataTwo[j],
             label: {
                show: true,
                position: 'top',
                formatter: function(v){
                  if(v.data!='0'){
                     return v.data + '%'
                  }else{
                    return ''
                  }
                  
                },
            },
            data: this.valueper,
          };
          tmp.push(temp)

循环出来push进数组，设置样式lable,（注意：后台数据之间给%是不可以的，只能自己加%）

详解2：在弹框不出现百分比

//浮窗内容
						formatter(params) {
              console.log(params)
              var pa = ''
              for(var i in params){
                if(i%2 ==0){
                pa = '<p>'+params[i].marker +params[i].seriesName + '：' + params[i].value+'<br>'+pa
                }
              }
              return pa
						}

判断一下当奇数的时候不显示！（注意：一定要手动加上颜色的色块params[i].marker）

详解3：一种参数同时出现两种值，并且分别展现

这里是把柱子进行的重合，然后把弹框的内容进行自定义！

扩展1   柱状图颜色设置：

series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        itemStyle: {
            //配置样式
            itemStyle: {   
                //通常情况下：
                normal:{  
　　　　　　　　　　　　//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目超出，则柱子颜色循环使用该数组
                    color: function (params){
                        var colorList = ['#5EC2DF','#EDAC6D','#CC6633','#F9E8DC','#5BD27C'];
                        return colorList[params.dataIndex];
                    }
                },
            },
        }
    }]