Axis style

Axis Styling

In ECharts, axis styling is a critical aspect of data visualization, directly impacting the readability and aesthetics of charts. By adjusting properties such as axis lines, ticks, and labels, you can create charts tailored to different scenarios.

Axis Types

ECharts supports multiple axis types, each with its specific styling configurations:

option = {
  xAxis: {
    type: 'category',  // Category axis  
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  
  },  
  yAxis: {  
    type: 'value'  // Value axis  
  },  
  series: [{  
    data: [820, 932, 901, 934, 1290, 1330, 1320],  
    type: 'line'  
  }]  
};  

Other special types include:

• time: Time axis for time-series data
• log: Logarithmic axis for scenarios with large data ranges

Axis Line Styling

The axis line is the foundational component of an axis and can be customized with the following properties:

axisLine: {  
  show: true,  // Whether to display the axis line  
  lineStyle: {  
    color: '#6E7079',  
    width: 2,  
    type: 'solid',  // Options: 'solid'|'dashed'|'dotted'  
    shadowColor: 'rgba(0, 0, 0, 0.5)',  
    shadowBlur: 10,  
    shadowOffsetX: 3,  
    shadowOffsetY: 3  
  },  
  symbol: ['none', 'arrow'],  // Arrow styles at both ends  
  symbolSize: [10, 15],  // Arrow size  
  symbolOffset: [0, 10]  // Arrow offset  
}  

Tick Line Styling

Tick lines are divided into major and minor ticks, which can be configured separately:

axisTick: {  
  show: true,  // Whether to display ticks  
  alignWithLabel: true,  // Align ticks with labels  
  inside: false,  // Whether ticks face inward  
  length: 5,  // Tick length  
  lineStyle: {  
    color: '#FF0000',  
    width: 2,  
    type: 'dashed'  
  }  
},  
minorTick: {  
  show: true,  
  splitNumber: 5,  // Number of segments  
  length: 3  
}  

Tick Label Styling

Tick labels offer rich configuration options:

axisLabel: {  
  show: true,  
  interval: 'auto',  // Label display interval  
  inside: false,  // Whether labels face inward  
  rotate: 45,  // Rotation angle  
  margin: 8,  // Distance from the axis line  
  color: '#666',  
  fontStyle: 'italic',  
  fontWeight: 'bold',  
  fontSize: 12,  
  fontFamily: 'Arial',  
  formatter: function(value, index) {  
    // Custom formatting function  
    return value + '°C';  
  },  
  rich: {  
    // Rich text styling  
    a: { color: 'red' },  
    b: { backgroundColor: 'yellow' }  
  }  
}  

Grid Line Styling

Grid lines extend from axis ticks to enhance readability:

splitLine: {  
  show: true,  
  interval: 'auto',  
  lineStyle: {  
    color: ['#E0E0E0'],  
    width: 1,  
    type: 'dashed',  
    opacity: 0.7  
  }  
},  
minorSplitLine: {  
  show: true,  
  lineStyle: {  
    color: '#F0F0F0',  
    width: 0.5  
  }  
}  

Axis Area Styling

The axis area can be styled with background colors and shadow effects:

axisPointer: {  
  type: 'shadow',  // Shadow indicator  
  shadowStyle: {  
    color: 'rgba(150, 150, 150, 0.3)'  
  }  
},  
areaStyle: {  
  color: ['rgba(250, 250, 250, 0.3)', 'rgba(200, 200, 200, 0.3)'],  
  origin: 'start'  
}  

Multiple Axes Configuration

ECharts supports multiple axes in a single chart:

yAxis: [  
  {  
    type: 'value',  
    name: 'Rainfall',  
    position: 'left',  
    axisLabel: {  
      formatter: '{value} ml'  
    }  
  },  
  {  
    type: 'value',  
    name: 'Temperature',  
    position: 'right',  
    axisLabel: {  
      formatter: '{value} °C'  
    },  
    splitLine: {  
      show: false  // Hide grid lines  
    }  
  }  
]  

Polar Axis Styling

Polar coordinate axes have unique configurations:

angleAxis: {  
  type: 'category',  
  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],  
  startAngle: 90,  
  clockwise: false,  // Counter-clockwise  
  axisLine: {  
    show: true,  
    symbol: ['none', 'arrow'],  
    symbolSize: [10, 15]  
  },  
  splitLine: {  
    show: true,  
    lineStyle: {  
      color: '#ddd',  
      type: 'dashed'  
    }  
  }  
},  
radiusAxis: {  
  type: 'value',  
  min: 0,  
  max: 100,  
  interval: 20,  
  axisLabel: {  
    formatter: '{value}%'  
  }  
}  

Dynamic Axis Styling

Enhance interactivity with animation effects:

animation: true,  
animationDuration: 1000,  
animationEasing: 'elasticOut',  
animationDelay: function(idx) {  
  return idx * 200;  
}  

Responsive Axes

Adjust axis styling for different screen sizes:

media: [  
  {  
    query: { maxWidth: 500 },  
    option: {  
      xAxis: {  
        axisLabel: {  
          fontSize: 8,  
          rotate: 90  
        }  
      },  
      yAxis: {  
        axisLabel: {  
          fontSize: 8  
        }  
      }  
    }  
  }  
]  

Axis Event Interaction

Add interactive event handling for axes:

xAxis: {  
  // ...other configurations  
  axisPointer: {  
    label: {  
      show: true,  
      backgroundColor: '#666',  
      padding: [3, 5, 3, 5],  
      borderRadius: 3  
    }  
  }  
},  
// Event handling  
myChart.on('axisAreaEnter', function(params) {  
  console.log('Mouse entered axis area', params);  
});  
myChart.on('axisAreaLeave', function(params) {  
  console.log('Mouse left axis area', params);  
});  

Advanced Axis Styling Techniques

Combine multiple properties to create special effects:

xAxis: {  
  type: 'category',  
  boundaryGap: false,  
  axisLine: {  
    onZero: false,  
    lineStyle: {  
      color: '#c23531'  
    }  
  },  
  axisLabel: {  
    formatter: function(value) {  
      return '{style|' + value + '}',  
      rich: {  
        style: {  
          color: '#fff',  
          padding: [3, 5],  
          borderRadius: 4,  
          backgroundColor: '#c23531'  
        }  
      }  
    }  
  },  
  splitLine: {  
    show: true,  
    lineStyle: {  
      type: 'dotted'  
    }  
  }  
}