图形样式定制

图形样式定制

ECharts 提供了丰富的图形样式定制能力，从基础的线条颜色到复杂的渐变效果，开发者可以通过配置项精确控制每个元素的视觉表现。这种灵活性让数据可视化不仅清晰准确，还能与产品设计风格完美融合。

基础样式配置

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

option = {
  series: [{
    type: 'line',
    data: [120, 200, 150, 80, 70, 110, 130],
    itemStyle: {
      color: '#c23531',  // 数据点颜色
      borderColor: '#444',  // 边框色
      borderWidth: 2,  // 边框宽度
      opacity: 0.8  // 透明度
    },
    lineStyle: {
      color: '#61a0a8',
      width: 3,
      type: 'dashed'  // 还可以是'solid'或'dotted'
    }
  }]
};

柱状图的样式定制略有不同：

series: [{
  type: 'bar',
  itemStyle: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#83bff6' },
      { offset: 0.5, color: '#188df0' },
      { offset: 1, color: '#188df0' }
    ]),
    borderRadius: [5, 5, 0, 0]  // 圆角效果
  }
}]

高级视觉映射

ECharts 的 visualMap 组件可以将数据维度映射到视觉元素：

option = {
  visualMap: {
    type: 'continuous',
    min: 0,
    max: 100,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d'],  // 渐变颜色范围
      symbolSize: [10, 30]  // 符号大小范围
    },
    seriesIndex: 0  // 指定作用的series
  },
  series: [{
    type: 'scatter',
    data: [[10,20,30], [20,30,40], [30,40,90]]
  }]
};

这种映射特别适合热力图：

visualMap: {
  min: 0,
  max: 10,
  calculable: true,
  inRange: {
    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
  }
}

自定义图形元素

通过 graphic 组件可以添加任意 SVG 元素：

option = {
  graphic: [{
    type: 'circle',
    shape: { r: 50 },
    position: ['50%', '50%'],
    style: {
      fill: 'rgba(0,0,0,0.3)',
      stroke: '#ff4500',
      lineWidth: 4
    },
    z: 100
  }],
  series: [{...}]
};

更复杂的组合图形示例：

graphic: {
  elements: [{
    type: 'group',
    left: 'center',
    top: 'center',
    children: [
      { type: 'rect', shape: { width: 100, height: 40 }, style: { fill: '#5470c6' }},
      { type: 'text', style: { text: '重要数据', fill: '#fff', fontSize: 16 }, left: 20, top: 10 }
    ]
  }]
}

动态样式更新

通过 setOption 方法可以实时更新样式：

// 初始配置
const chart = echarts.init(document.getElementById('main'));
chart.setOption({
  series: [{
    type: 'pie',
    radius: '50%',
    data: [
      { value: 1048, name: '搜索引擎' },
      { value: 735, name: '直接访问' }
    ]
  }]
});

// 动态更新
setTimeout(() => {
  chart.setOption({
    series: [{
      itemStyle: {
        color: ({ dataIndex }) => 
          dataIndex === 0 ? '#ee6666' : '#91cc75'
      },
      label: { show: true, fontSize: 18 }
    }]
  });
}, 1000);

主题样式扩展

创建自定义主题：

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

// 使用主题
const chart = echarts.init(document.getElementById('main'), 'myTheme');

响应式样式调整

针对不同屏幕尺寸调整样式：

const option = {
  // 基础配置...
  media: [
    {
      query: { maxWidth: 768 },  // 移动端
      option: {
        series: [{
          itemStyle: { borderRadius: 2 },
          label: { fontSize: 10 }
        }]
      }
    },
    {
      query: { minWidth: 769 },  // PC端
      option: {
        series: [{
          itemStyle: { borderRadius: 8 },
          label: { fontSize: 14 }
        }]
      }
    }
  ]
};

动画效果定制

调整动画参数：

series: [{
  type: 'bar',
  animationDuration: 2000,  // 初始动画时长
  animationEasing: 'elasticOut',  // 缓动效果
  animationDelay: function (idx) {
    return idx * 100;  // 按数据索引延迟
  }
}]

自定义动画回调：

series: [{
  type: 'line',
  animationDurationUpdate: 1500,
  animationEasingUpdate: 'quarticInOut',
  emphasis: {
    scale: true,  // 悬停放大效果
    itemStyle: {
      color: '#c23531',
      shadowBlur: 20
    }
  }
}]

混合样式策略

结合多种样式配置方式：

option = {
  dataset: {
    source: [
      ['product', 'sales', 'profit'],
      ['Matcha', 41.1, 30.4],
      ['Milk', 86.5, 92.1]
    ]
  },
  series: [{
    type: 'bar',
    encode: { x: 'product', y: 'sales' },
    itemStyle: {
      color: function(params) {
        const profit = params.data[2];
        return profit > 50 ? '#91cc75' : '#ee6666';
      }
    }
  }]
};

特殊场景样式处理

处理大数据量时的样式优化：

series: [{
  type: 'scatter',
  large: true,  // 开启大数据优化
  largeThreshold: 2000,  // 数据量阈值
  itemStyle: {
    opacity: 0.8,
    borderWidth: 0.5
  },
  progressive: 400,  // 渐进渲染
  progressiveThreshold: 3000
}]

空数据状态样式：

series: [{
  type: 'pie',
  data: [],
  silent: true,  // 禁用交互
  itemStyle: { color: '#eee' },
  label: { show: false },
  emphasis: { scale: false }
}]