Echarts—X轴鼠标滑动或者缩放/多列柱状图中某一列数据为0时不占位

前端探险家

已于 2023-06-22 16:24:07 修改

阅读量4.8k

点赞数 1

分类专栏：地图 | 可视化 vue 文章标签： echarts 计算机外设 javascript

于 2023-06-13 16:47:09 首次发布

本文链接：https://blog.csdn.net/qq_44182284/article/details/131189878

版权

vue 同时被 2 个专栏收录

31 篇文章 91 订阅

订阅专栏

地图 | 可视化

5 篇文章 2 订阅

订阅专栏

这里写目录标题

需求背景
效果图展示
X轴鼠标滑动或者缩放设置
多列柱状图中某一列数据为0时不占位
全部代码展示

需求背景

用柱状图展示12个月的项目对应的供应商数据；
每个月有多个项目不确定，1-50之间，也就是说，12个月，每个月的X轴上有不确定的柱状；例如：1月有20根柱子，2月有5根柱子，3月有15根…
每月的每根柱子代表是一个项目，鼠标移入每月的每一个项目的柱子上要悬浮展示该月该项目具体供应商的情况；

当时听了这个需求，我就很不解，这数据都是不确定的，咋展示，如果只展示一个月的数据还可以，然后通过按钮去选择月份渲染，如果展示一年的数据的话，就有点小复杂啦，那么多数组，还不确定，能挤得下吗？哈哈

效果图展示

主要是X轴数据那么多，还不确定，只能看X轴能不能自适应撑开并且能不能实现滑动，然后就查到了可以实现滑动对X轴放大或者缩放，那就好办啦！

先把实现效果图表展示一下，如下图：
在这里插入图片描述

图表上的数据也是自己随意mock的，由于柱子数量不确定，颜色也是随机的，这些都不要太在意了，重点是图表的实现；

还有，以上柱状图主要涉及到知识点有两个，也顺便分享一下：
1.X轴鼠标滑动或者缩放；
2.多列柱状图中其中某一列数据为0时不占位；

X轴鼠标滑动或者缩放设置

 dataZoom : [{
     type: 'slider',//给x轴设置滚动条
       show: true, //flase直接隐藏图形
       xAxisIndex: [0,1,2,3,4,5,6,7,8,9,10,11],
       bottom:5,
       height:15,
       showDetail: true,
       startValue: 0,//滚动条的起始位置
       endValue: 4 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
     },
     {
       type: 'inside',//设置鼠标滚轮缩放
       disabled: true,
       xAxisIndex: [0,1,2,3,4,5,6,7,8,9,10,11],
       startValue: 0,
       endValue: 4
 }],

多列柱状图中某一列数据为0时不占位

正常多列柱状图，某一列数据为0时，是不显示的，但是还是会占位的，如下图：
在这里插入图片描述
很明显这样是很难看的，我们要遍历然后过滤掉value值为0的柱子，把有值的柱形数据塞到 series 中，但是要配合xAxis 数据，所以我们重新格式化了一下xAxis 和 series ，方法如下图：

  let xAxis=[]
  let xAxisitem={
      type: 'category',
      data: '',
      position: 'bottom',
      axisTick: {
          show: true
      },
  }
  var emphasisStyle = {
    itemStyle: {
      shadowBlur: 10,
      shadowColor: 'rgba(0,0,0,0.3)'
    }
  };
  let xAxisitemdata=[]
  for (let i = 0; i < valueData.length ; i++) {
      xAxisitemdata=[]
      for (let i = 0; i < valueData.length ; i++) {
          xAxisitemdata.push('')
      }
      xAxisitemdata[i]=valueData[i].name
      xAxisitem.data=JSON.parse(JSON.stringify(xAxisitemdata))
      xAxis.push(JSON.parse(JSON.stringify(xAxisitem)))
  }
   // console.log("xAxis",xAxis)


   let series=[]

   for (let j = 0; j < valueData.length; j++) {
       for (let i = 0; i < valueData[j].data.length; i++) {
           let newArrList = [];
           for (let a = 0; a < j; a++) {
               newArrList.push({});
           }
           newArrList[j] = valueData[j].data[i];
           for (let k = 0; k < legenddata.length; k++) {
               let seriesitem={
                   type: 'bar',
                   name:legenddata[i],
                   barWidth: '10',
                   xAxisIndex: j,
                   emphasis: emphasisStyle,
                   itemStyle:{
                     barBorderRadius: [5, 5, 0, 0],//（顺时针左上，右上，右下，左下）
                   },
                   data: newArrList,
               }
               let a = j % legenddata.length;
               if((valueData[j].data[i]).value !==0 && k===a){
                   series.push(JSON.parse(JSON.stringify(seriesitem)))
               }
           }
       }
   }
   //console.log("series",series)

打印的xAxis 如下图：

在这里插入图片描述
注意看红框标记的，每月的data，只有当月显示，其他月为空；

打印的series如下图：

在这里插入图片描述
12个月，按10个项目，正常数据应该有120个，这里只有81个，就是所有有值的柱子的集合，把值为0的已经过滤掉，不显示，这样就不会在图表中占位；

全部代码展示

下面我们就把上面图表的实现的全部代码展示出来，开袋即食！

 <template>
   <div id="myChartFour"  style="height: 260px;"></div>
 </template>
 
 <script>
 import Vue from 'vue'
 export default {
   data(){
     return{
       echartData:[]
     }
   },
   mounted(){
       this.getEchartData()
   },
   methods:{
    getEchartData(){
        Vue.axios.get('/getReportDataFour', {}).then(res => {
            if(res.status == 200){
               this.echartData = res.data.datalist
               this.initEchart(this.echartData)
            }
        })
    },
    initEchart(valueData) {
        var chartDom = document.getElementById('myChartFour');
        var myChart = this.$echarts.init(chartDom);
        //这个是获取legenddata，把每一个项目名称塞进去，后面也是为了和color配合自定义颜色
        let legenddata = []
        var singleData = valueData[0].data
        singleData .forEach( item => {
          legenddata.push(item.name)
        })
        
        //这里我们要重新格式化一下xAxis的属性，如果数据不多的话，直接写死也可以
        let xAxis=[]
        let xAxisitem={
            type: 'category',
            data: '',
            position: 'bottom',
            axisTick: {
                show: true
            },
        }
        var emphasisStyle = {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.3)'
          }
        };
        let xAxisitemdata=[]
        for (let i = 0; i < valueData.length ; i++) {
            xAxisitemdata=[]
            for (let i = 0; i < valueData.length ; i++) {
                xAxisitemdata.push('')
            }
            xAxisitemdata[i]=valueData[i].name
            xAxisitem.data=JSON.parse(JSON.stringify(xAxisitemdata))
            xAxis.push(JSON.parse(JSON.stringify(xAxisitem)))
        }
        console.log("xAxis",xAxis)
        
        //重新格式化series，把柱状图每一列为空的过滤掉
        let series=[]
        for (let j = 0; j < valueData.length; j++) {
            for (let i = 0; i < valueData[j].data.length; i++) {
                let newArrList = [];
                for (let a = 0; a < j; a++) {
                    newArrList.push({});
                }
                newArrList[j] = valueData[j].data[i];
                for (let k = 0; k < legenddata.length; k++) {
                    let seriesitem={
                        type: 'bar',
                        name:legenddata[i],
                        barWidth: '10',
                        xAxisIndex: j,
                        emphasis: emphasisStyle,
                        itemStyle:{
                          barBorderRadius: [5, 5, 0, 0],//（顺时针左上，右上，右下，左下）
                        },
                        data: newArrList,
                    }
                    let a = j % legenddata.length;
                    if((valueData[j].data[i]).value !==0 && k===a){
                        series.push(JSON.parse(JSON.stringify(seriesitem)))
                    }
                }
            }
        }
        console.log("series",series)
        let series1= JSON.parse(JSON.stringify(series))
        
        //此函数是随机生成颜色的
        function getColor(num){
          var colorArr = []
          var colorValue="0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
          //以","为分隔符，将colorValue字符串分割为字符数组["0","1",...,"f"]
          var colorArray = colorValue.split(",");
          
          for( var j = 0; j<num;j++){
            var color="#";
            for(var i=0;i<6;i++){
                  color+=colorArray[Math.floor(Math.random()*16)];
              }
              colorArr.push(color)
          }
          return  colorArr
        }
        
        const option = {
            tooltip: {
              extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);',
              backgroundColor:'rgba(255,255,255,.8)',
              confine: true ,
              textStyle:{
                  color: '#3d3d3d' ,
                  fontSize: 14 ,
              },
              formatter: function(params) {
                    const result = params.data
                    var apercent = result.a !== 0 ? ((result.a / result.value) * 100) .toFixed(1) + '%' : '0%'
                    var bpercent = result.b !== 0 ? ((result.b / result.value) * 100) .toFixed(1) + '%' : '0%'
                    var cpercent = result.c !== 0 ? ((result.c / result.value) * 100) .toFixed(1) + '%' : '0%'
                    var dpercent = result.d !== 0 ? ((result.d / result.value) * 100) .toFixed(1) + '%' : '0%'
                    return  `
                       <div style="padding:10px 20px 10px 10px">
                         <div>
                            <span style="font-size:14px;font-weight:700">${params.seriesName}</span><span style="margin-left:15px;font-weight:700">${result.value}个</span>
                         </div>
                         <ul>
                            <li style="padding:3px 0;">${params.marker}A级:<span style="padding:0 15px;">${result.a}个</span><span>${apercent}</span></li>
                            <li style="padding:3px 0;">${params.marker}B级:<span style="padding:0 15px;">${result.b}个</span><span>${bpercent}</span></li>
                            <li style="padding:3px 0;">${params.marker}C级:<span style="padding:0 15px;">${result.c}个</span><span>${cpercent}</span></li>
                            <li style="padding:3px 0;">${params.marker}D级:<span style="padding:0 15px;">${result.d}个</span><span>${dpercent}</span></li>
                         </ul>
                       </div>
                    `
                }
            },
            color:getColor(legenddata.length),
            legend:{
              show:false,
              data:legenddata,
            },
            dataZoom : [{
                  type: 'slider',//给x轴设置滚动条
                  show: true, //flase直接隐藏图形
                  xAxisIndex: [0,1,2,3,4,5,6,7,8,9,10,11],
                  bottom:5,
                  height:15,
                  showDetail: true,
                  startValue: 0,//滚动条的起始位置
                  endValue: 4 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
                },
                {
                  type: 'inside',//设置鼠标滚轮缩放
                  disabled: false,
                  xAxisIndex: [0,1,2,3,4,5,6,7,8,9,10,11],
                  startValue: 0,
                  endValue: 4
            }],
            grid: {
                left: 40,
                right: 10,
                top: 25,
                bottom: 25,
            },
            xAxis: xAxis,
            yAxis: [
                {
                    type: 'value',
                    name:'供应商数量(个)',
                    nameGap: 10,
                    // max:12,
                    nameTextStyle:{

                    },
                    splitLine:{
                        show :true,
                        lineStyle:{
                          type:'dashed'
                        }
                    },
                    
                }
            ],
            series:series1
        };
        myChart.setOption(option)
        window.addEventListener("resize", () => {
            myChart.resize();
        });
    },
   }
 }
 </script>

mock的数据结构如下图：

{
    "datalist":[
        {
            "name":"1月",
            "data":[
                {"value":10,"a":2,"b":3,"c":4,"d":1,"name":"项目一"},
                {"value":8,"a":2,"b":3,"c":4,"d":1,"name":"项目二"},
                {"value":6,"a":2,"b":3,"c":4,"d":1,"name":"项目三"},
                ...
            ]
        },
        {
            "name":"2月",
            "data":[
                {"value":0,"a":0,"b":0,"c":0,"d":0,"name":"项目一"},
                {"value":8,"a":2,"b":3,"c":4,"d":1,"name":"项目二"},
                {"value":4,"a":2,"b":3,"c":4,"d":1,"name":"项目三"},
                ...
            ]
        },
        {
            "name":"3月",
            "data":[
                {"value":0,"a":0,"b":0,"c":0,"d":0,"name":"项目一"},
                {"value":0,"a":0,"b":0,"c":0,"d":0,"name":"项目二"},
                {"value":0,"a":0,"b":0,"c":0,"d":0,"name":"项目三"},
                ...
            ]
        },
        ...
        
    ]
}

前端探险家

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
Echarts—X轴鼠标滑动或者缩放/多列柱状图中某一列数据为0时不占位

当时听了这个需求，我就很不解，这数据都是不确定的，咋展示，如果只展示一个月的数据还可以，然后通过按钮去选择月份渲染，展示一年的数据，就有点小复杂啦；12个月，按10个项目，正常数据应该有120个，这里只有81个，就是所有有值的柱子的集合，把值为0的已经过滤掉，不显示，这样就不会炸图表中占位；图表上的数据也是自己随意mock的，由于柱子数量布丁，颜色也是随机的，这些都不要在意不要，重点是图表的实现；X轴数据那么多，还不确定，只能看卡能不能实现滑动，结果还真能，那就好办啦，1.X轴鼠标滑动或者缩放、
复制链接

扫一扫