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

        initChart3() {
            const chartDom = this.$refs.chart3;
            const myChart = this.$echarts.init(chartDom);
            let legenddata = ['>10000','10000-5000','5000-1000','1000-500','500-100' ]
            let datalist=[
                {
                    name:'万州区',
                    data:[5,'',3,1,4]
                },
                {
                    name:'开州区',
                    data:['',2,3,1,5]
                },
                {
                    name:'云阳县',
                    data:[7,2,3,'',6]
                },
                {
                    name:'奉节县',
                    data:[5,2,'',2,2]
                },
                {
                    name:'巫山县',
                    data:['',2,4,'',2]
                },
            ]
            let xAxis=[]
            let xAxisitem={
                type: 'category',
                data: '',
                position: 'bottom',
                axisTick: {
                    show: false
                },
                axisLine:{
                    show :true,
                    lineStyle:{
                        color:"#EBEBEB",
                    },
                },
                nameTextStyle:{
                    color:"#797979",
                },
                axisLabel:{
                    color:"#797979",
                },
            }
            let xAxisitemdata=[]
            for (let i = 0; i < datalist.length ; i++) {
                xAxisitemdata=[]
                for (let i = 0; i < datalist.length ; i++) {
                    xAxisitemdata.push('')
                }
                xAxisitemdata[i]=datalist[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 < datalist.length; j++) {
                for (let i = 0; i < datalist[j].data.length; i++) {
                    let newArrList = [];
                    for (let a = 0; a < j; a++) {
                        newArrList.push("");
                    }
                    newArrList[j] = datalist[j].data[i];
                    for (let k = 0; k < legenddata.length; k++) {
                        let seriesitem={
                            type: 'bar',
                            name:legenddata[i],
                            barWidth: '10',
                            xAxisIndex: j,
                            data: newArrList,
                        }
                        let a = j % legenddata.length;
                        if(datalist[j].data[i] && k===a){
                            series.push(JSON.parse(JSON.stringify(seriesitem)))
                        }
                    }
                }
            }
            console.log("series",series)
            let series1= JSON.parse(JSON.stringify(series))

            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    // 进行数据处理,去掉提示框中一些x轴坐标为空的数据显示.
                    formatter: function (params) {
                        var html = '';
                        if (params.length != 0) {
                            // 可以自己打印一下console.info(params[0]);
                            var getName = params[0].name;
                            html += getName + '<br/>';
                            for (var i = 0; i < params.length; i++) {
                                // 如果为0 为空的数据我们不要了(你们可以直接判断 > 0)
                                if (
                                    params[i].value != null &&
                                    params[i].value != 0 &&
                                    params[i].value != ''
                                ) {
                                    html += params[i].marker;
                                    html += params[i].seriesName + ': ' + params[i].value + '<br/>';
                                }
                            }
                        }
                        return html;
                    }
                },
                legend: {
                    itemHeight:13,
                    data:legenddata,
                    textStyle: {
                        fontSize: 14,
                        height: 10,
                        rich: {
                            a: {
                                verticalAlign: 'middle',
                            },
                        },
                    },
                },
                grid: {
                    left: "5%",
                    right: "5%",
                    top: "20%",
                    bottom: "10%",
                },
                xAxis: xAxis,
                yAxis: [
                    {
                        type: 'value',
                        splitLine:{
                            show :false
                        },
                        name:'(家)',
                        axisLine:{

                            show :true,
                            lineStyle:{
                                color:"#EBEBEB",
                            },
                        },
                        nameTextStyle:{
                            color:"#797979",
                        },
                        axisLabel:{
                            color:"#797979",
                        },
                    }
                ],
                series:series1
            };
            myChart.setOption(option)
            myChart.on('click',function (param) {})
        },

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue-Echarts多列柱状图是使用Vue框架和Echarts表库来实现的一种表类型。它可以显示多个列的柱状图,每个列代表不同的数据系列。在Vue-Echarts,可以通过高度封装的方式来使用Echarts的折线柱状图功能。引用的混入文件可以帮助实现窗口改变,使Echarts表自适应。 对于多列柱状图,每一列数据可以通过series的配置来设置。在3D柱状图数据分为底部切片、间柱子和顶部切片三个部分。可以通过配置不同的系列来表示不同的数据列。 具体实现多列柱状图的步骤如下: 1. 使用Vue-Echarts库来创建一个Vue组件,并引入相关依赖。 2. 在Vue组件,使用Echarts的option配置对象来设置表的样式、数据和系列。 3. 在option的series属性,通过配置不同的系列来表示多个数据列。 4. 按照需求配置其他的Echarts选项,如x轴、y轴、例等。 5. 在Vue组件渲染并显示Echarts表。 通过以上步骤,可以实现一个Vue-Echarts多列柱状图。在,每一列代表一个数据系列,可以展示多个数据的对比情况。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue-echarts-element-stylus:高度封装的elemnet表格组件,高度封装echarts,excel表格上传,excel表格下载](https://download.csdn.net/download/weixin_42133452/18559339)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue2.x-echarts公共组件封装--简易篇(3d柱状图,炫酷仪表盘,折线,曲线)](https://blog.csdn.net/vscode_js/article/details/125913485)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值