精华内容
下载资源
问答
  • echarts 两个x轴只显示一个tooltip

    千次阅读 2019-12-20 16:03:26
    两个x轴,且本应有两个tooltip,通过以下修改可以是一个tootip,且修改tooltip样式。 问题一:只保留一个tooltip tooltip直接设置是全局模式,有几个x轴显示几个x轴的tooltip,可以通过设置axisPointer进行去除。 ...

    先上图

    两个x轴,且本应有两个tooltip,通过以下修改可以是一个tootip,且修改tooltip样式。

    在这里插入图片描述

    问题一:只保留一个tooltip

    tooltip直接设置是全局模式,有几个x轴显示几个x轴的tooltip,可以通过设置axisPointer进行去除。
    代码展现:

    	xAxis:[{
    		},{
    		//去除第二个x轴的tooltip
    			axisPointer: {
                            	type: 'none'
                            },
    		}
    	]
    

    问题二:修改tooltip样式

                        tooltip: {
                            trigger: 'axis',
                            formatter: function (params) {
                                // return echarts.format.truncateText(name[0].axisValue, 40, '14px Microsoft Yahei', '…');
                                return  params[0].axisValue+'\n'+
                                        params[0].marker+params[0].seriesName+" : "+params[0].data+'\n'+
                                        params[1].marker+params[1].seriesName+" : "+params[1].data+'\n'+
                                        params[2].marker+params[2].seriesName+" : "+params[2].data+'\n'+
                                        params[3].marker+params[2].seriesName+" : "+params[3].data+'\n';
                            },
                            //使'\n'起作用
                            extraCssText:'white-space:pre-wrap'
                        },
    

    问题三:不同数据对应不同x轴

    通过xAxisIndex进行修改,
    xAxisIndex: 0,//选择第一个x轴

    展开全文
  • 想了天终于想到了办法,那就是添加多个X轴的数据就可以,在这记录一下,如果哪位有更好的办法,请告知: 效果图: 代码: app.configParameters = { rotate: { min: -90, max: 90 }, align: { ...

    echarts 柱状图 x轴多维度显示不同数据源

    在这里插入图片描述
    echarts 柱状图 x轴数据某个值为空时就会出现柱状图不显示并且占位现象,如上图,那怎么解决呢?

    想了两天终于想到了办法,那就是添加多个X轴的数据就可以,在这记录一下,如果哪位有更好的办法,请告知:
    效果图:
    在这里插入图片描述
    代码:

    <!DOCTYPE html>
    <html style="height: 100%">
       <head>
           <meta charset="utf-8">
       </head>
       <body style="height: 100%; margin: 0">
           <div id="container" style="height: 100%"></div>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
           <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
           <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
           <script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];
    
    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: echarts.util.reduce(posList, function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };
    
    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            var labelOption = {
                normal: {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                }
            };
            myChart.setOption({
                series: [{
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }]
            });
        }
    };
    
    
    var labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 16,
        rich: {
            name: {
                textBorderColor: '#fff'
            }
        }
    };
    
    option = {
        color: ['#003366', '#006699', '#4cabce', '#e5323e'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
             // 进行数据处理
            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: {
            data: ['Forest', 'Steppe', 'Desert', 'Wetland', 'www']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                position: 'bottom',
                data: ['2012', '', '', '', '']
            },
            {
                type: 'category',
                axisTick: {show: false},
                position: 'bottom',
                data: ['', '2013', '', '', '']
            },
            {
                type: 'category',
                axisTick: {show: false},
                position: 'bottom',
                data: ['', '', '2014', '', '']
            },
            {
                type: 'category',
                axisTick: {show: false},
                position: 'bottom',
                data: ['', '', '', '2015', '']
            },
            {
                type: 'category',
                axisTick: {show: false},
                position: 'bottom',
                data: ['', '', '', '', '2016']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 0,data: [320]},
            {name: 'Steppe',type: 'bar',label: labelOption,xAxisIndex: 0,data: [220]},
            {name: 'Desert',type: 'bar',label: labelOption,xAxisIndex: 0,data: [332]},
            {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 0,data: [98]},
            {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 1,data: ['',320]},
            {name: 'Steppe',type: 'bar',label: labelOption,xAxisIndex: 1,data: ['',220]},
            {name: 'Desert',type: 'bar',label: labelOption,xAxisIndex: 1,data: ['',232]},
            {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 1,data: ['',98]},
            {name: 'www',type: 'bar',label: labelOption,xAxisIndex: 1,data: ['',345]},
            {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 2,data: ['','',320]},
            {name: 'Steppe',type: 'bar',label: labelOption,xAxisIndex: 2,data: ['','',420]},
            {name: 'Desert',type: 'bar',label: labelOption,xAxisIndex: 2,data: ['','',232]},
            {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 2,data: ['','',98]},
            {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 3,data: ['','','',320]},
            {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 3,data: ['','','',98]},
            {name: 'Forest',type: 'bar',barGap: 0,label: labelOption,xAxisIndex: 4,data: ['','','','',620]},
            {name: 'Steppe',type: 'bar',label: labelOption,xAxisIndex: 4,data: ['','','','',290]},
            {name: 'Wetland',type: 'bar',label: labelOption,xAxisIndex: 4,data: ['','','','',98]}   
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
           </script>
       </body>
    </html>
    
    展开全文
  • 公司业务需要需要做一双X双Y的图形报表,之前研究过很多例子结合把双X轴不等分显示; 1、有曲线图、有柱状图 2、X轴分组合并显示 3、可自行修改显示数值和比例在一图上
  • Echarts 实现双X轴标签不等分对应

    千次阅读 2020-03-23 17:56:21
    Echarts 默认双X轴实现的效果是等分在X轴的,没有对应关系,这里’伪’实现了不等分的情况。 实现思路: 两个网格 grid; 底部网格也是柱状图,计算要包含的柱条所占总数的百分比,设置 barWidth再加些样式,即可...

    Echarts 默认双X轴实现的效果是等分在X轴的,没有对应关系,这里’伪’实现了不等分的情况。

    在这里插入图片描述

    实现思路:

    1. 两个网格 grid
    2. 底部标签网格也是柱状图,计算要包含的柱条所占总数的百分比,设置 barWidth再加些样式,即可实现似包含关系的效果。
    let data = {
        xData: ['花溪区', '南明区', '观山湖区', '钟山区', '六枝特区', '红花岗区', '汇川区', '遵义县', '西秀区', '平坝县', '玉屏县'],
        yData: [0.1, 0.15, 0.18, 0.25, 0.23, 0.32, 0.33, 0.36, 0.57, 0.72, 0.45]
    }
    /**
        双X轴标签对应,伪实现思路:
        底部的标签也是柱状图,对应包含的区域为上方X轴条数占总数的比例,设为宽度即可
    */
    option = {
        tooltip: {},
        grid: [
            {
                bottom: 61
            },
            {
                height: 60,
                bottom: 0
            }
        ],
        xAxis: [{
            type: 'category',
            data: data.xData,
            gridIndex: 0,
            axisLabel: {
                color: '#333'
            },
            axisLine: {
                lineStyle: {
                    color: '#e7e7e7'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#e7e7e7'
                }
            },
            zlevel: 2
        }, {
            type: 'category',
            gridIndex: 1,
            axisLine: {
                show: false
            },
            zlevel: 1
        }],
        yAxis: [{
            type: 'value',
            gridIndex: 0,
            axisLabel: {
                color: '#333'
            },
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#ccc'
                }
            }
        },{
            type: 'value',
            gridIndex: 1,
            axisLabel: {
                show: false
            },
            axisLine: {
                show: false
            },
            splitLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        }],
        series: [{
            data: data.yData,
            type: 'bar',
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#555'
                }
            },
            itemStyle: {
                normal: {
                    color: (params) => {
                        let colors = ['#4150d8', '#28bf7e', '#ed7c2f', '#f2a93b', '#f9cf36', '#4a5bdc', '#4cd698', '#f4914e', '#fcb75b', '#ffe180', '#b6c2ff', '#96edc1']
                        return colors[params.dataIndex]
                    }
                }
            },
            xAxisIndex: 0,
            yAxisIndex: 0
        },{
            data: [{
                name: '贵阳市',
                value: 1
            }],
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
                offset: [0, 10],
                textStyle: {
                    color: '#777'
                }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '27.2727%',
            itemStyle: {
                normal: {
                    color: 'rgba(134,176,237, .5)'
                }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
        },{
            data: [{
                name: '六盘水市',
                value: 1
            }],
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
                offset: [0, 10],
                textStyle: {
                    color: '#777'
                }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '18.1818%',
            itemStyle: {
                normal: {
                    color: 'rgba(40,191,126, .5)'
                }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
        },{
            data: [{
                name: '遵义市',
                value: 1
            }],
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
                offset: [0, 10],
                textStyle: {
                    color: '#777'
                }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '27.2727%',
            itemStyle: {
                normal: {
                    color: 'rgba(237,124,47, .5)'
                }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
        },{
            data: [{
                name: '安顺市',
                value: 1
            }],
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
                offset: [0, 10],
                textStyle: {
                    color: '#777'
                }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '18.1818%',
            itemStyle: {
                normal: {
                    color: 'rgba(242,169,59, .5)'
                }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
        },{
            data: [{
                name: '铜仁市',
                value: 1
            }],
            label: {
                show: true,
                position: 'inside',
                formatter: '{b}',
                offset: [0, 10],
                textStyle: {
                    color: '#777'
                }
            },
            type: 'bar',
            barGap: 0,
            barWidth: '9.0909%',
            itemStyle: {
                normal: {
                    color: 'rgba(249,207,54, .5)'
                }
            },
            xAxisIndex: 1,
            yAxisIndex: 1
        }]
    };
    

    查看 demo

    查看更多Echarts作品

    展开全文
  • ECharts折线从x轴原点(0点)开始

    千次阅读 2020-09-20 10:50:55
    非类目,包括时间,数值,对数,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效。 示例: boundaryGap: [‘20%’, ‘20%.

    在这里插入图片描述

    xAxis. boundaryGap
    坐标轴两边留白策略,类目轴和非类目轴的设置和表现不一样。

    类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true,这时候刻度只是作为分隔线,标签和数据点都会在两个刻度之间的带(band)中间。

    非类目轴,包括时间,数值,对数轴,boundaryGap是一个两个值的数组,分别表示数据最小值和最大值的延伸范围,可以直接设置数值或者相对的百分比,在设置 min 和 max 后无效。 示例:

    boundaryGap: [‘20%’, ‘20%’]

    option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        	boundaryGap: false // 不留白,从原点开始
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line'
        }]
    };
    
    展开全文
  • 由于数据前一段对应的Y值变化比较大,后一段对应Y值变化比较小,客户只关注前一段的Y值变化,于是想到分段设置X轴间隔,由于官方没有直接支持,于是通过组合两个坐标系方式实现。 需求效果: html代码: <!...
  • 由于X轴下标和柱形图实际上是一对一的,正常情况如下图 最初的想法是通过官方文档提供的对外参数,来修改X轴下标的位置,试了很多参数,很无奈,都不行 solution 使用两个坐标轴,原坐标轴放在上面,不显示;下面一...
  • -- 为ECharts准备一具备大小(宽高)的Dom --> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main'));  // 指定图表的配置项和数据 var option = { ...
  • 说明:直角坐标系 grid 中的 x ,一般情况下单个 grid 组件最多只能放上下两个 x ,多于两个 x 需要通过配置offset属性防止同个位置多个 x 的重叠。 1 xAxis.show 说明:是否显示 x 。 默认值:true。 ...
  • 问题:这两组数据我想在一个图表上显示出来,他们的x轴都是时间点,但是时间点的数据是不统一的,请问echart能否实现固定一个x轴,数据自动对应到相应的时间轴上的点 解决方法: 整理数据 把时间x轴合并 x轴:['1:...
  • 有时我们需要统计自定义echarts图,统计x轴区间的y轴数量。 思路是利用echarts的自定义配置:option.series[i].type='custom'中的renderItem(params, api)函数进行处理,这里包括了两个参数:params是对应每一个data...
  • echarts统计x轴区间的数值

    千次阅读 2019-07-06 09:37:00
    有时我们需要统计自定义echarts图,统计x轴区间的y轴数量。 思路是利用echarts的自定义配置:option.series[i].type='custom'中的renderItem(params, api)函数进行处理,这里包括了两个参数:params是对应每一个data...
  • echarts x轴位置固定

    2017-08-08 09:44:07
    我想做一个这样坐标轴对称的图,并且x轴的位置是固定的,但是实际上数值一变X轴的位置就变了,看了Echarts官方文档,x轴位置只有两个选项,一个top,一个bottom,不能自己设置位置,请问大神有没有好的方法?
  • Echarts曲线设置多条X轴和Y轴

    千次阅读 2019-06-27 15:04:00
    Echarts曲线设置多条X轴和Y轴效果图如下: 1. 2. xAxis 是一个数组,当横坐标数量小于等于2的时候,默认显示下上两个坐标轴,如果大于2,则可以指定位置,并使用 offset ... 但是我只希望其中一个x轴触发toolti...
  • 我们项目需要实现一这样的效果: 第一种方法: 原文地址:https://blog.csdn.net/u013270065/article/details/105073901/ 代码: option = { xAxis: [ { type: 'category', data: ['Mon', 'Tue', 'Wed'...
  • echartsx轴 设置步长,间隔的距离

    千次阅读 2020-11-05 21:31:06
    如果你已经使用了 echarts xAxis: { axisLabel: { interval:5 }, }, 在 xAxis 下面 axisLabel ...interval 为 0 时,所有的标签都显示出来, interval 表示步长,两个标签之间的间隔。 ...
  • echarts X轴像直尺一样设置刻度

    千次阅读 2020-11-19 16:26:00
    在做老师的项目的时候,老师让我们实现X轴...对echarts的xAxis,yAxis这两个属性进行修改即可实现。 xAxis: [ { //第一个{}是原X轴配置参数 type: 'category', axisTick: { alignWithLabel: false }, "axisL...
  • Y轴设置为数组,设置两个,其中小类的Y轴进行隐藏(注意隐藏时要设置X轴的文字大小,不然虽然显示了,但是文字依然会占据位置),然后将大类的轴线定位到左边来。 series中小类类目数据放在一起。剩下的大类通过...
  • X轴显示不全: xAxis.axisLabel.intervalnumber, Function [ default: 'auto' ] 坐标轴刻度标签的显示间隔,在类目轴中有效。 默认会采用标签不重叠的策略间隔显示标签。 可以设置成 0 强制显示所有...
  • interval:0,//如果设置为1,表示『隔一个标签显示一个标签』,如果值为2,表示隔两个标签显示一个标签,以此类推。 rotate:'45',//刻度标签旋转的角度,在类目的类目标签显示不下的时候可以通过旋转防止标签之间...
  • 这里有一统计不同时间段的折线图对比需求,起初的想法是给EchartsX轴同一刻度赋予不同的数值,并且在其上面显示条数据,达到对比的功能(在别的插件上面可能有这样的功能,因为我看到过这样的图)。后来翻了不少...
  • 在做柱状图的时候,X轴名称显示不全,设置X轴的rotate角度还是不行,后来加了一行 axisLabel:{ interval:0, rotate:10 } 就好了,如以下两个图,上图是加了的,下图没加。 interval属性是设置坐标轴刻度标签...
  • 今天做公司的项目使用了Echarts制作表格,前端使用了vue框架来写,在使用其中一个表格的时候将xAxis设置为动态获取的,但是在网页上一直不显示,而将数据写死的话则可以,对比过动态数据和写死的数据,两个格式是...
  • echarts图表的Y不能显示e-10之下的数值问题 function round$1(x, precision, returnStr) { if (precision == null) ... // 指数数值范围,取得precision与20之间的最小值,通过修改这两个数值可以实现显示e-20等数值
  • 无非就是 省略(间隔显示)、旋转文字方向、竖排展示前面两种解决方案,就是echarts暴露的:{axisLabel:{interval:0,//如果设置为1,表示『隔一个标签显示一个标签』,如果值为2,表示隔两个标签显示一个标签,...
  • echarts图表的横轴文字分行显示

    千次阅读 2019-09-19 15:14:26
    X轴的数据那块追加map()函数,往里面写功能: data: ['09/19 周一', '09/20 周二', '09/21 周三', '09/22 周四', '09/23 周五', '09/24 周六', '09/25 周日'].map(function (str) { return str.replace('...

空空如也

空空如也

1 2 3 4 5 ... 7
收藏数 125
精华内容 50
关键字:

echarts两个x轴