摘要 ]: ECharts图表组件当我们xAxis的data数据过多的情况下你会发现原本连续的坐标刻度出现了断层(间隔)的现象,为什么呢?其实这种现象是很正常的,它是怎么产生的呢? 原来ECharts图表组件内部有一个机制,用于统计xAxis坐标刻度的个数和图表宽度,从而会自动调整刻度间隔个数以此达到刻度相互之间不致于很拥挤而影响图表欣赏性。刻度间隔的相关属性就是:interval。 {string | number}interval 'auto' 类目型 标签显示挑选间隔,默认为'auto',可选为:'auto'(自动隐藏显示不下的) | 0(全部显示) |{number}(用户指定选择间隔) ...

ECharts图表组件当我们xAxis的data数据过多的情况下你会发现原本连续的坐标刻度出现了断层(间隔)的现象,为什么呢?其实这种现象是很正常的,它是怎么产生的呢?

原来ECharts图表组件内部有一个机制,用于统计xAxis坐标刻度的个数和图表宽度,从而会自动调整刻度间隔个数以此达到刻度相互之间不致于很拥挤而影响图表欣赏性。刻度间隔的相关属性就是: interval

{string | number} interval 'auto' 类目型 标签显示挑选间隔,默认为'auto',可选为:'auto'(自动隐藏显示不下的) | 0(全部显示) | {number} (用户指定选择间隔)

默认情况下此属性值为” auto “,会自动根据刻度个数进行调整。

如果你想要设置所有刻度均显示出来,则只需要设置当前属性值为0即可,示例代码形如:

xAxis : [
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日'],
            axisLabel:{
                 //X轴刻度配置
                 interval:0 //0:表示全部显示不间隔;auto:表示自动根据刻度个数和宽度自动设置间隔个数
 

想要间隔多少个这里就可以配置多少的数值即可,根据个人需要作出相应配置。

完整示例代码如下所示:

option = {
    tooltip : {
        trigger: 'axis'
    legend: {
        data:['邮件营销']
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
    calculable : true,
    xAxis : [
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日','周一','周二','周三','周四','周五','周六','周日'],
            axisLabel:{
                 //X轴刻度配置
                 interval:3 //0:表示全部显示不间隔;auto:表示自动根据刻度个数和宽度自动设置间隔个数
    yAxis : [
            type : 'value',
            splitArea : {show : true}
    series : [
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210]
 

效果如下所示:

图1:刻度间隔为3的效果图

图2:刻度间隔为0的效果图

ECharts,图表,组件,中级,入门,Axis,axisLabel,坐标,刻度,间隔,interval    本文为原创型文章转载请尊重他人劳动成果并注明出处:  http://www.stepday.com/topic/?883 MVC模式 Axis可帮助您在开发WordPress插件和模板时轻松地引入MVC模式。 加载速度是一个非常重要的问题。 实际上,WordPress插件确实会导致WordPress变慢。 因此,建议尽可能禁用或删除不使用的插件。 因此,Axis是一个非常小巧的轻量级框架,但是我们希望提供最少的东西来使用MVC模式进行插件开发。 创建插件时,几乎需要做的基本事情。 例如,创建菜单或定义AJAX回调函数。 对于很小但必须处理的繁琐任务,Axis会提前提供骨架代码。 例如,当 interval 设置为 2 时,假设 x 轴上有 6 个标签,那么只有第 1、3、5 个标签会显示,第 2、4、6 个标签会被隐藏。在 Echarts 的 barChart 中,xAxisaxisLabel 中的 interval 参数表示坐标刻度标签的显示间隔,默认值为 0,表示所有标签都会显示。以上代码中,x 轴上共有 6 个标签,通过设置 interval 参数为 2,表示每隔 2 个标签显示一个标签,结果只显示了标签1、标签3、标签5。 <charts/> 基础组件,主要用于生成布局和图表。 <charts-legend/> 图例组件,主要用于生成图表的图例, 配置项 。 <charts-series/> 图表类型组件,主要用于生成各种不同的图表配置项 。 <charts-title/> 标题组件,主要用于生成图表标题,配置项 。 <charts-tooltip/> 提示框组件,主要用于生成图表的提示框,配置项 。 <charts-x-axis/> x轴组件,主要用于生成直角坐标图表的x轴,配置项 。 <charts-y-axis/> y轴组件,主要用于生成直角坐标图表的y轴,配置项 。 一个用于在WordPress中创建基于花式D3的交互式图表的插件。 Axis是一个插件,可使用 (一种基于Angular的框架,用于简化图表创建)在WordPress中创建基于D3的精美图表。 它基于 ,由创建。 请注意,这是一项正在进行中的工作,目前正在积极开发中。 注意:我们不检查WordPress支持论坛。 请将任何支持查询定向到。 实际的图表创建面板是一个单独的项目,名为 。 有关此问题的任何信息,请使用其自己的单独的。 解压缩Axis目录并将其上传到/wp-content/plugins/ 。 通过WordPress中的“插件”菜单激活插件 通过单击TinyMCE中的“图表 4轴微操纵台 背景:该存储库包含我在弗朗索瓦·阿梅特(Francois Amet)博士在阿巴拉契亚州立大学研究期间从事的项目的信息。 这项研究包括石墨烯和其他新型二维材料的超导性。 我们研究中使用的显微镜​​设备最初是在多轴平台上的光学显微镜下组装的。 石墨烯器件可以在露天环境中生成,因为它们不会很快氧化。 二Selenium化铌(NbSe2)氧化非常Swift,因此在我们的研究中需要使用真空手套箱进行设备组装。 当手套使用得越少越好,手套箱就可以保持更好的真空度,因此该项目的目标是创建一个四轴微操纵平台,该平台可以由计算机而不是手动进行控制。 所用材料: 四轴位移台 步进电机(4)*使用的型号:42BYGHM809 Big Easy驱动程序(4)*或1个驱动程序,并多路复用电动机或移位寄存器 Arduino Mega *如果您将一个驱动器与多个电机多路复用,则可能会使用Uno 要求描述:让图标的最大值和最小值是动态的,中间间隔也必须动态控制的。 遇到的问题:使用echarts里面的散点图做标示点。但是散点图只会出现在xAxis下data明确设置的值上。假设:x为标示点,x=3,xAxis={data:[0,2,4,6]},那么x会出现在4上。 解决方法:使用echartsinterval来控制间隔,我这边直接使用interval没有用,我是设置axisTick: {interval:2}中,但是data的值是直接从最小值到最大值,... var myChart12 = echarts.init(document.getElementById('chart12')); option12 = { color: ['#63AFF9'], xAxis: { type: 'category', data:["示范区", "禹王台区", "龙亭区", "顺河回族区", "鼓楼区", "祥符区", "杞县", "通许县", "... 1.stack: 'total', // 堆叠在一根柱子上展示 2.stack: 'Ad', // 同个类目轴上系列配置相同的stack值后,后一个系列的值会在前一个系列的值上相加。 2.柱子上的数据问题