echarts多级X轴

最新推荐文章于 2024-05-28 19:29:15 发布
最新推荐文章于 2024-05-28 19:29:15 发布
阅读量2.9k 收藏 10
点赞数 3
分类专栏： echarts 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36646345/article/details/108435364
版权

echarts多级X轴

基本思路是通过使用多个柱状图重叠在X轴 实现效果:
在这里插入图片描述HTML代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="echarts.min.js"></script>
    <script src="JavaScript.js"></script>
</head>
<body>
    <div id="main" style="width: 100%;height:500px"></div>
</body>
</html>

JS代码 引用了JQ和echarts 并写了方法对数据进行处理

$(function () {

    let date = [
        { date1: 0.7, date2: '1231', date3: '第二层1', date4: '第三层1', date5: '第四层1', date6: '第五层1' },
        { date1: 0.5, date2: '8902422', date3: '第二层2', date4: '第三层1', date5: '第四层1', date6: '第五层1' },
        { date1: 0.6, date2: '2342343', date3: '第二层1', date4: '第三层2', date5: '第四层1', date6: '第五层1' },
        { date1: 0.8, date2: '2344', date3: '第二层1', date4: '第三层2', date5: '第四层1', date6: '第五层1' },
        { date1: 0.1, date2: '2345', date3: '第二层1', date4: '第三层1', date5: '第四层2', date6: '第五层1' },
        { date1: 0.6, date2: '4352', date3: '第二层1', date4: '第三层1', date5: '第四层2', date6: '第五层1' },
        { date1: 0.6, date2: '87687', date3: '第二层1', date4: '第三层1', date5: '第四层2', date6: '第五层1' },
        { date1: 0.6, date2: '5672', date3: '第二层1', date4: '第三层2', date5: '第四层2', date6: '第五层1' },
        { date1: 0.6, date2: '4562', date3: '第二层2', date4: '第三层2', date5: '第四层2', date6: '第五层1' },
        { date1: 0.6, date2: '344452', date3: '第二层1', date4: '第三层2', date5: '第四层2', date6: '第五层1' },
        { date1: 0.6, date2: '792', date3: '第二层1', date4: '第三层1', date5: '第四层1', date6: '第五层2' },
        { date1: 0.6, date2: '2342', date3: '第二层1', date4: '第三层1', date5: '第四层1', date6: '第五层2' },
        { date1: 0.6, date2: '456', date3: '第二层1', date4: '第三层2', date5: '第四层1', date6: '第五层2' },
        { date1: 0.6, date2: '456546', date3: '第二层2', date4: '第三层2', date5: '第四层1', date6: '第五层2' },
        { date1: 0.6, date2: '332', date3: '第二层1', date4: '第三层1', date5: '第四层2', date6: '第五层2' },
        { date1: 0.6, date2: '3452', date3: '第二层1', date4: '第三层1', date5: '第四层2', date6: '第五层2' },
        { date1: 0.6, date2: '7845692', date3: '第二层1', date4: '第三层1', date5: '第四层2', date6: '第五层2' },
        { date1: 0.6, date2: '4756', date3: '第二层3', date4: '第三层2', date5: '第四层2', date6: '第五层2' },
        { date1: 0.6, date2: '7856792', date3: '第二层1', date4: '第三层2', date5: '第四层2', date6: '第五层2' },
        { date1: 0.6, date2: '78979', date3: '第二层1', date4: '第三层2', date5: '第四层2', date6: '第五层2' }]

    date = ListOrder(date, ['date1', 'date2', 'date3', 'date4', 'date5', 'date6']);

    let series = [{
        data: date[0],
        type: 'scatter',
        xAxisIndex: 0,
        yAxisIndex: 0
    }];

    //第五层
    $.each(date[5], function (nub, d) {
        series.push(
            {
                data: [{
                    name: date[5][d].value,
                    value: 1
                }],
                tooltip: {
                    show: false
                },
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{b}',
                    offset: [0, 40],
                    textStyle: {
                        color: '#000'
                    }
                },
                type: 'bar',
                barGap: 0,
                barWidth: date[5][d].nub / date[0].length * 100 + '%',
                itemStyle: {
                    normal: {
                        color: 'rgba(40,191,126, 0)',
                        borderColor: '#000',
                        borderWidth: 0.5,
                    }
                },
                xAxisIndex: 4,
                yAxisIndex: 4
            });
    });
    //第四层
    $.each(date[4], function (nub, d) {
        series.push(
            {
                data: [{
                    name: date[4][d].value,
                    value: 1
                }],
                tooltip: {
                    show: false
                },
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{b}',
                    offset: [0, 30],
                    textStyle: {
                        color: '#000'
                    }
                },
                type: 'bar',
                barGap: 0,
                barWidth: date[4][d].nub / date[0].length * 100 + '%',
                itemStyle: {
                    normal: {
                        color: 'rgba(40,191,126, 0)',
                        borderColor: '#000',
                        borderWidth: 0.5,
                    }
                },
                xAxisIndex: 3,
                yAxisIndex: 3
            });
    });
    //第三层
    $.each(date[3], function (nub, d) {
        series.push(
            {
                data: [{
                    name: date[3][d].value,
                    value: 1
                }],
                tooltip: {
                    show: false
                },
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{b}',
                    offset: [0, 20],
                    textStyle: {
                        color: '#000'
                    }
                },
                type: 'bar',
                barGap: 0,
                barWidth: date[3][d].nub / date[0].length * 100 + '%',
                itemStyle: {
                    normal: {
                        color: 'rgba(40,191,126, 0)',
                        borderColor: '#000',
                        borderWidth: 0.5,
                    }
                },
                xAxisIndex: 2,
                yAxisIndex: 2
            });
    });
    //第二层
    $.each(date[2], function (nub, d) {
        series.push({
                data: [{
                    name: date[2][d].value,
                    value: 1
                }],
                tooltip: {
                    show: false
                },
                label: {
                    show: true,
                    position: 'inside',
                    formatter: '{b}',
                    offset: [0, 10],
                    textStyle: {
                        color: '#000'
                    }
                },
                type: 'bar',
                barGap: 0,
            barWidth: date[2][d].nub / date[0].length * 100 + '%',
                itemStyle: {
                    normal: {
                        color: 'rgba(134,176,237, 0)',
                        borderColor: '#000',
                        borderWidth: 0.5,
                    },

                },
                xAxisIndex: 1,
                yAxisIndex: 1
            });
    });

    option = {
        title: {
            text: '名称',
            left: 'center',
            top: 0
        },
        tooltip: {

        },
        grid: [
            {
                top: 100,
                bottom: 101
            },
            {
                height: 40,
                bottom: 60
            },
            {
                height: 60,
                bottom: 40
            },
            {
                height: 80,
                bottom: 20
            },
            {
                height: 100,
                bottom: 0
            },
            {
                height: 100,
                bottom: 0
            }
        ],
        xAxis: [{
            type: 'category',
            data: date[1],
            gridIndex: 0,
            zlevel: 5,
            axisLabel: {
                interval: 0
            }
        }, {
            type: 'category',
            gridIndex: 1,
            axisLine: {
                show: false,
            },
            zlevel: 4
        }, {
            type: 'category',
            gridIndex: 2,
            axisLine: {
                show: false,
            },
            zlevel: 3
        }, {
            type: 'category',
            gridIndex: 3,
            axisLine: {
                show: false,
            },
            zlevel: 2
        }, {
            type: 'category',
            gridIndex: 4,
            axisLine: {
                show: false,
            },
            zlevel: 5
        }, {
            type: 'category',
            gridIndex: 5,
            axisLine: {
                show: false,
            },
            zlevel: 1
        }],
        yAxis: [{
            type: 'value',
            gridIndex: 0,
            name: '值',
            axisLabel: {
                color: '#333'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            }
        }, {
            type: 'value',
            gridIndex: 1,
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }, {
            type: 'value',
            gridIndex: 2,
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }, {
            type: 'value',
            gridIndex: 3,
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }, {
            type: 'value',
            gridIndex: 4,
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }, {
            data: ['第五层', '第四层', '第三层', '第二层', '第一层'],
            type: 'category',
            gridIndex: 5,
            axisLabel: {
                // show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }],
        series: series
    };


    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(option);
});

function ListOrder(data, name) {
    let order = [];
    if (name.length == 6) {
        let yData = [];
        let xData1 = [];
        let xData2 = [];
        let xData3 = [];
        let xData4 = [];
        let xData5 = [];

        $.each(data, function (nub, d) {
            //值
            yData.push(d[name[0]]);
            //第一层
            xData1.push(d[name[1]]);
            //第五层
            if (!xData5[d[name[5]]]) {
                let nubs = [value = '', nub = ''];
                nubs.value = d[name[5]];
                nubs.nub = 1;
                xData5[d[name[5]]] = nubs;
                xData5.push(d[name[5]]);
            } else {
                xData5[d[name[5]]].nub++;
            }

            //第四层
            if (!xData4[d[name[4]] + d[name[5]]]) {
                let nubs = [value = '', nub = ''];
                nubs.value = d[name[4]];
                nubs.nub = 1;
                xData4[d[name[4]] + d[name[5]]] = nubs;
                xData4.push(d[name[4]] + d[name[5]]);
            } else {
                xData4[d[name[4]] + d[name[5]]].nub++;
            }

            //第三层
            if (!xData3[d[name[3]] + d[name[4]] + d[name[5]]]) {
                let nubs = [value = '', nub = ''];
                nubs.value = d[name[3]];
                nubs.nub = 1;
                xData3[d[name[3]] + d[name[4]] + d[name[5]]] = nubs;
                xData3.push(d[name[3]] + d[name[4]] + d[name[5]]);
            } else {
                xData3[d[name[3]] + d[name[4]] + d[name[5]]].nub++;
            }

            //第二层
            if (!xData2[d[name[2]] + d[name[3]] + d[name[4]] + d[name[5]]]) {
                let nubs = [value = '', nub = ''];
                nubs.value = d[name[2]];
                nubs.nub = 1;
                xData2[d[name[2]] + d[name[3]] + d[name[4]] + d[name[5]]] = nubs;
                xData2.push(d[name[2]] + d[name[3]] + d[name[4]] + d[name[5]]);
            } else {
                xData2[d[name[2]] + d[name[3]] + d[name[4]] + d[name[5]]].nub++;
            }
        });

        order.push(yData);
        order.push(xData1);
        order.push(xData2);
        order.push(xData3);
        order.push(xData4);
        order.push(xData5);
    }
    return order;
}
提督八
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Echarts实现多个x轴或y轴曲线图
MCWJ007的博客
10-30 1万+
Echart实现多个x轴或y轴曲线图 效果图如下： 1.1 配置option对象 option:{ // 设置 x 轴的样式 xAxis:{}, // 设置 y 轴的样式 yAxis:[], // 设置每条曲线的数据和样式 series:[], // 设置鼠标hover时的提示信息 tooltip:{}, // 调整表格两边的空白的区域 grid:{}, // 调整图样的名称 legend:{} //
echarts多y轴
silivia的博客
08-20 373
grid设置： grid: [ { left: '15%', right: '15%', top: '30%', height: '40%' }, { left: '10%', right: '8%', top: '30%', height...
echarts折线图多条折线x轴不同，以及vue中引用
热门推荐
Y丶小琪
06-05 2万+
需求：echarts绘制多条折线，x轴间隔不同。效果图：   数据格式分析：因为每条线的x轴不同，所以普通的渲染方式无法实现。解决办法是series的数据格式 -- [ [x,y],[x,y] ].核心代码：1）小技巧--js时间格式化封装    如果没有引es6，可以直接做封装 function(time){}//时间格式化 export const dateconvert = (time) =...
echarts bar 双坐标轴记录
qq_37309987的博客
12-28 554
1、需求场景，使用 echarts bar 多列双坐标轴实现下面效果图，左侧的纵坐标标识金额，左侧的坐标轴表示金额的占比。4、遇到的难点，怎么将蓝色柱状图所对应的数据为右侧的坐标轴一一对应。3、代码测试链接，将链接里面的配置替换成上面代码即可。关键配置：series.yAxisIndex=1。
Echarts x轴坐标二级分组
最新发布
qq_43225508的博客
05-28 935
在使用echarts 封装组件的时候，偶尔会遇到需要x轴坐标进行二层分组的需求。那么如何对echarts 进行二层分组呢，有以下几个步骤：仅介绍二层分组的逻辑。有兴趣的可以进行三层延伸。
echarts自定义分组，x轴分级，支持多级，支持dataZoom
03-31
以柱状图为例，实现echarts自定义分组，x轴分级，支持多级，支持dataZoom
ECharts设置双x轴
庸人方自扰，自在就好
04-06 1万+
下面给大家分享一下ECharts的几种功能，循序渐进地实现一个复杂的曲线图。
echarts设置多级x轴
Clearlove_8的博客
04-13 6244
1.效果图 2.实现的核心代码 设置多个x轴 xAxis:[ { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, { type: 'category', position: 'bottom', offset: 25, axisPointer: { type: 'none'
echarts柱图显示多级x轴及柱条分区显示
苦瓜_小学生的博客
03-11 3155
echarts柱图显示多级x轴文字及柱条分区显示 柱图数值倾斜显示
echarts多图多轴
忽胖忽瘦的博客
01-09 2433
使用echarts插件制作多x轴多y轴图、自定义悬浮窗内容 渲染之后的样子是： echarts的option设置 option = { tooltip: { //鼠标划入的指示器样式 trigger: 'item', axisPointer: { type: 'cross', crossStyle...
双X轴的Echarts图
viviuolo的博客
09-21 3326
双X轴的Echarts图
echarts多个x轴，多个y轴.zip
12-31
通过echarts官网学习后，根据项目的需要，对echarts进行扩充和整理，发现可支持多个x轴，多个y轴，比想象中简单，echarts的确是很强大的资源，希望大家能有启发。
echarts时间轴demo，内含两种实现方式。1.X轴为数值轴(type=value)；2.X轴为时间轴(type=time)
07-11
echarts时间轴demo，内含两种实现方式...1.X轴为数值轴(type=value)； 2.X轴为时间轴(type=time)。 下载后可直接打开看到效果。 如果对demo有疑问，如无法加载，无法使用，报错等，可添加资源中的联系方式，免费解答。
Vue + Echarts 实现中国地图多级钻取功能.zip
08-01
本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能（基本版 未做过多功能拓展和样式优化 便于二次开发）。（更多说明移步：https://blog.csdn.net/ZYS10000/article/details/119298354）
基于Echarts插件的省市区多级地图下钻和返回功能
04-11
特别提醒：由于要获取json文件...）利用echarts插件实现的中国省市区三级地图切换。主要采用单击进入下级地图，双击或者右键点击“返回上一级”地图。资源里面包括详细的实现源码，和全国大多数省市区的json地图文件。
echarts中国地图.rar
11-05
9. **多级下钻**：通过配置，ECharts可以实现地图的多级下钻功能，例如点击省份可以展开展示其下属的城市地图。 10. **地图与图表结合**：ECharts地图不仅可以单独使用，还可以与其他图表类型（如柱状图、饼图）...
【echarts】多条X轴 多条Y轴显示
飘逸者打瞌睡
02-23 1656
【代码】【echarts】多条X轴 多条Y轴显示。
EChart设置多个X轴
milir110的专栏
07-23 1万+
如上图所示，上面有两个X轴的数据，那么在EChart 数据如下： option = { xAxis: [{ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, { type: 'category', position: 'bottom', offset: 25, axisPoint..
echarts 多 x 轴示例
qq_44871531的博客
01-08 712
echarts 多 x 轴示例。
ECharts多级柱状图
08-30
ECharts是一个基于JavaScript的开源可视化库，可以用来创建各种交互式图表。多级柱状图是其中一种常见的图表类型，用于展示不同层级的数据。 要创建多级柱状图，你可以使用ECharts的柱状图系列（bar）以及层级（hierarchy）功能。以下是创建多级柱状图的一般步骤： 1. 引入ECharts库。首先，在你的HTML文件中引入ECharts的JavaScript文件。你可以从官方网站（https://echarts.apache.org/zh/download.html）下载最新版本的ECharts，并将其引入到你的项目中。 2. 准备数据。准备你想要展示的多级数据。每个层级的数据应该包含名称和对应的值。 3. 配置图表选项。创建一个ECharts实例，并通过配置选项指定图表的样式和数据。你可以设置x轴和y轴的标签、柱状图的颜色、柱状图之间的间距等。 4. 绘制图表。将ECharts实例与一个具有指定宽度和高度的HTML元素绑定，并调用绘制方法以显示多级柱状图。 下面是一个简单的例子，展示如何使用ECharts创建一个带有两级数据的多级柱状图： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 多级柱状图</title> <!-- 引入ECharts库 --> <script src="echarts.min.js"></script> </head> <body> <!-- 柱状图容器 --> <div id="chart" style="width: 600px; height: 400px;"></div> <script> // 准备数据 var data = [ { name: '一级分类1', value: [120, 200] // 二级分类数据 }, { name: '一级分类2', value: [150, 180] // 二级分类数据 }, // 可以添加更多的一级分类的数据 ]; // 配置图表选项 var option = { xAxis: { type: 'category', data: ['二级分类1', '二级分类2'] // 二级分类标签 }, yAxis: { type: 'value' }, series: data.map(function (item) { return { type: 'bar', name: item.name, data: item.value }; }) }; // 创建ECharts实例并绘制图表 var chart = echarts.init(document.getElementById('chart')); chart.setOption(option); </script> </body> </html> ``` 在上面的例子中，我们准备了两个一级分类的数据，每个一级分类下有两个二级分类的数据。通过配置选项，我们设置了x轴和y轴的标签，并使用循环将数据转换为ECharts所需的格式。最后，创建ECharts实例并调用setOption方法绘制图表。 你可以根据实际需求，自定义样式和配置选项来创建更复杂的多级柱状图。希望这个例子能帮助到你！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值