ECharts 样式设置

ECharts 提供了丰富的样式自定义功能，包括 颜色、字体、阴影、背景、渐变色、动画等，可以让图表更具美观性和可读性。

1. 颜色设置

1.1 统一设置颜色

var option = {
    color: ['#5470C6', '#91CC75', '#EE6666', '#FAC858'], // 设置全局颜色
    series: [{
        type: 'bar',
        data: [10, 20, 30, 40]
    }]
};

📌 说明：

  • color 选项控制整个图表的数据颜色。

1.2 单个系列颜色

series: [{
    type: 'bar',
    data: [10, 20, 30, 40],
    itemStyle: { color: '#FF5733' } // 单独设置颜色
}]

1.3 使用渐变色

itemStyle: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        { offset: 0, color: '#FF5733' }, 
        { offset: 1, color: '#FFC300' }
    ])
}

📌 说明：

  • LinearGradient(x1, y1, x2, y2, colorStops)：
    • (0,0,0,1) 表示从上到下渐变
    • offset: 0 是起始颜色，offset: 1 是结束颜色

2. 文字样式

2.1 标题文字

title: {
    text: '销售数据',
    textStyle: {
        color: '#333',
        fontSize: 18,
        fontWeight: 'bold'
    }
}

📌 说明：

  • color：颜色
  • fontSize：字体大小
  • fontWeight：加粗

2.2 坐标轴文字

xAxis: {
    axisLabel: {
        color: '#666',
        fontSize: 14,
        rotate: 30  // 旋转角度
    }
}

2.3 数据标签

series: [{
    type: 'bar',
    data: [10, 20, 30],
    label: {
        show: true,
        color: '#fff',
        fontSize: 12,
        position: 'top' // 标签位置
    }
}]

3. 线条样式

3.1 坐标轴样式

xAxis: {
    axisLine: { lineStyle: { color: '#999', width: 2 } }, // 轴线
    splitLine: { show: true, lineStyle: { color: '#ddd', type: 'dashed' } } // 分割线
}

3.2 折线图线条

series: [{
    type: 'line',
    data: [10, 15, 20, 25],
    lineStyle: { width: 2, color: '#FF5733' }, // 线条宽度和颜色
    smooth: true // 平滑曲线
}]

4. 背景样式

4.1 设置全局背景

backgroundColor: '#F5F5F5'  // 背景色

4.2 设置图表区域背景

grid: {
    backgroundColor: '#FFF',
    borderWidth: 1,
    borderColor: '#DDD'
}

5. 阴影效果

itemStyle: {
    shadowColor: 'rgba(0, 0, 0, 0.3)',
    shadowBlur: 10,
    shadowOffsetX: 5,
    shadowOffsetY: 5
}

📌 说明：

  • shadowColor：阴影颜色
  • shadowBlur：阴影模糊度
  • shadowOffsetX/Y：阴影偏移

6. 动画效果

6.1 进入动画

animationDuration: 2000, // 动画时间
animationEasing: 'elasticOut' // 动画缓动效果

📌 常见缓动函数：

  • linear：匀速
  • easeIn：加速
  • easeOut：减速
  • elasticOut：弹性缓冲

6.2 数据更新动画

series: [{
    type: 'bar',
    data: [10, 20, 30],
    animationDurationUpdate: 1000, // 更新动画时间
    animationEasingUpdate: 'bounceOut' // 更新动画缓动
}]

7. 交互样式

7.1 悬停高亮

emphasis: {
    itemStyle: {
        color: 'yellow',
        borderColor: '#333',
        borderWidth: 2
    }
}

7.2 鼠标悬停放大效果

emphasis: {
    scale: true, // 鼠标悬停时放大
    focus: 'series' // 仅高亮当前系列
}

8. 综合示例

var option = {
    backgroundColor: '#F5F5F5', // 设置背景
    title: {
        text: '销售数据分析',
        textStyle: { color: '#333', fontSize: 18, fontWeight: 'bold' },
        left: 'center'
    },
    tooltip: { trigger: 'axis' },
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D'],
        axisLabel: { color: '#666', fontSize: 14 },
        axisLine: { lineStyle: { color: '#333' } }
    },
    yAxis: {
        type: 'value',
        splitLine: { lineStyle: { type: 'dashed', color: '#ddd' } }
    },
    series: [{
        type: 'bar',
        data: [100, 200, 150, 300],
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FF5733' },
                { offset: 1, color: '#FFC300' }
            ]),
            shadowColor: 'rgba(0, 0, 0, 0.3)',
            shadowBlur: 10
        },
        emphasis: {
            itemStyle: { color: 'yellow' }
        }
    }],
    animationDuration: 2000
};
chart.setOption(option);

9. 总结

设定项关键参数说明
颜色color / itemStyle.color统一颜色或单个系列颜色
文字textStyle / axisLabel标题、坐标轴、数据标签
线条lineStyle / borderWidth坐标轴、折线、柱子边框
背景backgroundColor / grid.backgroundColor整体背景、图表背景
阴影shadowColor / shadowBlur数据元素的阴影
动画animationDuration / animationEasing初始和更新动画
交互emphasis鼠标悬停效果

你需要实现什么具体样式？🚀