图形样式定制

图形样式定制

ECharts提供了丰富的图形样式定制能力，从基础的线条颜色到复杂的渐变填充，开发者可以精确控制每个元素的视觉表现。通过配置项的组合，能够实现高度个性化的图表效果。

基础样式配置

最基本的样式配置包括颜色、线宽、透明度等属性。以折线图为例：

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' }
      ])
    }
  }]
}

柱状图的样式定制同样直观：

series: [{
  type: 'bar',
  itemStyle: {
    color: function(params) {
      // 根据数值返回不同颜色
      return params.value > 0 ? '#3398DB' : '#EF6567';
    },
    borderRadius: [5, 5, 0, 0],
    opacity: 0.8
  }
}]

高级样式技巧

渐变效果实现

ECharts支持线性渐变和径向渐变两种方式：

// 线性渐变
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)' }
])

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

纹理填充

通过pattern实现特殊纹理效果：

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

状态样式控制

ECharts支持为不同交互状态设置样式：

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系列可以实现完全自定义的图形：

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']
    ]
  }]
}

主题样式扩展

通过registerTheme方法注册自定义主题：

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

// 使用主题
var chart = echarts.init(dom, 'myTheme');

动态样式更新

通过setOption方法实现样式的动态更新：

// 初始设置
chart.setOption({
  series: [{
    type: 'line',
    lineStyle: {
      width: 1
    }
  }]
});

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

响应式样式调整

结合resize事件实现响应式样式：

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

混合样式应用

组合多种样式效果创建复杂可视化：

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)'
      }
    }
  }]
}