Customization of graphic styles

Graphic Style Customization

ECharts provides rich capabilities for graphic style customization, from basic line colors to complex gradient fills, allowing developers to precisely control the visual presentation of each element. Through the combination of configuration options, highly personalized chart effects can be achieved.

Basic Style Configuration

The most basic style configurations include properties such as color, line width, and transparency. Taking a line chart as an example:

option = {
  series: [{
    type: 'line',
    itemStyle: {
      color: '#c23531',
      borderWidth: 2,
      borderType: 'dashed'
    },
    lineStyle: {
      width: 3,
      color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: '#c23531' },
        { offset: 1, color: '#2f4554' }
      ])
    }
  }]
}

Styling for bar charts is equally intuitive:

series: [{
  type: 'bar',
  itemStyle: {
    color: function(params) {
      // Return different colors based on values  
      return params.value > 0 ? '#3398DB' : '#EF6567';
    },
    borderRadius: [5, 5, 0, 0],
    opacity: 0.8
  }
}]

Advanced Styling Techniques

Implementing Gradient Effects

ECharts supports both linear and radial gradients:

// Linear gradient  
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
  { offset: 0, color: 'rgba(58,77,233,0.8)' },
  { offset: 1, color: 'rgba(58,77,233,0.1)' }
])

// Radial gradient  
color: new echarts.graphic.RadialGradient(0.5, 0.5, 0.5, [
  { offset: 0, color: '#5AF' },
  { offset: 1, color: '#006' }
])

Texture Filling

Achieve special texture effects using pattern:

itemStyle: {
  color: {
    image: document.getElementById('texture'),
    repeat: 'repeat'
  }
}

State Style Control

ECharts allows styling for different interaction states:

series: [{
  type: 'pie',
  emphasis: {
    itemStyle: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(0, 0, 0, 0.5)'
    },
    label: {
      show: true,
      fontSize: '18',
      fontWeight: 'bold'
    }
  },
  select: {
    itemStyle: {
      borderColor: '#000',
      borderWidth: 2
    }
  }
}]

Custom Graphic Rendering

Fully custom graphics can be achieved using the custom series:

option = {
  series: [{
    type: 'custom',
    renderItem: function(params, api) {
      return {
        type: 'group',
        children: [{
          type: 'circle',
          shape: {
            cx: api.value(0),
            cy: api.value(1),
            r: api.value(2)
          },
          style: {
            fill: api.visual('color'),
            stroke: '#333',
            lineWidth: 1
          }
        }, {
          type: 'text',
          position: [api.value(0), api.value(1)],
          style: {
            text: api.value(3),
            fill: '#fff',
            fontSize: 12,
            textAlign: 'center',
            textVerticalAlign: 'middle'
          }
        }]
      };
    },
    data: [
      [100, 100, 30, 'A'],
      [200, 200, 40, 'B']
    ]
  }]
}

Theme Style Extension

Register custom themes using the registerTheme method:

echarts.registerTheme('myTheme', {
  color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53'],
  backgroundColor: '#f8f8f8',
  textStyle: {
    fontFamily: 'Microsoft YaHei'
  },
  title: {
    textStyle: {
      color: '#333'
    }
  }
});

// Apply the theme  
var chart = echarts.init(dom, 'myTheme');

Dynamic Style Updates

Update styles dynamically using the setOption method:

// Initial setup  
chart.setOption({
  series: [{
    type: 'line',
    lineStyle: {
      width: 1
    }
  }]
});

// Dynamic update  
setInterval(function() {
  chart.setOption({
    series: [{
      lineStyle: {
        width: Math.random() * 5 + 1
      }
    }]
  });
}, 1000);

Responsive Style Adjustments

Combine with the resize event for responsive styling:

window.addEventListener('resize', function() {
  const width = window.innerWidth;
  chart.setOption({
    textStyle: {
      fontSize: width < 600 ? 12 : 14
    },
    series: [{
      label: {
        fontSize: width < 600 ? 10 : 12
      }
    }]
  });
});

Mixed Style Applications

Combine multiple style effects to create complex visualizations:

option = {
  series: [{
    type: 'scatter',
    symbolSize: function(data) {
      return Math.sqrt(data[2]) * 5;
    },
    itemStyle: {
      color: function(params) {
        const value = params.value[2];
        return value > 60 ? '#FF4500' :
               value > 30 ? '#FF8C00' :
               '#FFD700';
      },
      shadowBlur: 10,
      shadowColor: 'rgba(120, 36, 50, 0.5)',
      shadowOffsetY: 5
    },
    emphasis: {
      itemStyle: {
        shadowBlur: 20,
        shadowColor: 'rgba(120, 36, 50, 0.8)'
      }
    }
  }]
}