echart 图例颜色

ECharts 图例的颜色可以通过 legend.itemStyle.normal.color 属性来设置。例如，可以在 option 中添加以下代码来将图例颜色设置为红色：

legend: {
  data: ['图例1', '图例2'],
  itemStyle: {
    normal: {
      color: 'red'
    }
  }
}

其中，data 属性指定了图例的文字内容，itemStyle.normal.color 属性指定了图例的颜色，这里设置为红色。你可以根据需要修改颜色值。

相关问题

echart图例改颜色

要改变Echart图例的颜色，可以使用Echart的配置项中的legend属性。在legend属性中，可以设置data属性来定义图例的名称，并且可以为每个图例项设置textStyle属性来定义其颜色。

以下是一个示例代码，展示如何使用Echart的配置项来改变图例的颜色：

option = {
    legend: {
        data: \['图例1', '图例2', '图例3'\],
        textStyle: {
            color: 'red' // 设置图例的颜色
        }
    },
    // 其他配置项...
};

在上述示例中，legend的data属性定义了三个图例项，分别是'图例1'、'图例2'和'图例3'。通过设置textStyle属性的color属性为'red'，可以将图例的颜色设置为红色。

你可以根据自己的需求修改示例代码中的图例名称和颜色，以实现你想要的效果。

echart单独设置图例颜色及样式

在 ECharts 中，可以通过 `legend.textStyle` 和 `legend.itemStyle` 分别设置图例文字的样式和图例项的样式。以下是一个示例：

option = {
    // ... 其他配置项
    legend: {
        data: ['图例1', '图例2', '图例3'],
        textStyle: {
            color: '#333', // 设置图例文字颜色
            fontSize: 14, // 设置图例文字大小
            fontWeight: 'bold' // 设置图例文字加粗
        },
        itemWidth: 20, // 设置图例项宽度
        itemHeight: 10, // 设置图例项高度
        itemGap: 20, // 设置图例项之间的间隔
        itemStyle: {
            borderColor: '#ccc', // 设置图例项边框颜色
            borderWidth: 1, // 设置图例项边框宽度
            borderRadius: 5, // 设置图例项边框圆角
            shadowColor: 'rgba(0, 0, 0, 0.5)', // 设置图例项阴影颜色
            shadowBlur: 10, // 设置图例项阴影模糊度
            shadowOffsetX: 0, // 设置图例项阴影 X 方向偏移量
            shadowOffsetY: 0, // 设置图例项阴影 Y 方向偏移量
            color: ['#c23531', '#2f4554', '#61a0a8'] // 设置图例项颜色
        }
    },
    // ... 其他配置项
};

在 `legend.itemStyle` 中，可以使用 `color` 属性设置图例项的颜色，可以传入一个数组来设置每个图例项的颜色。如果需要设置单独的图例项颜色，可以在 `series` 中指定每个数据项的 `itemStyle` 属性，例如：

option = {
    // ... 其他配置项
    series: [{
        name: '图例1',
        type: 'line',
        data: [10, 20, 30, 40, 50],
        itemStyle: {
            color: '#c23531' // 设置该数据项的颜色
        }
    }, {
        name: '图例2',
        type: 'line',
        data: [20, 30, 40, 50, 60],
        itemStyle: {
            color: '#2f4554' // 设置该数据项的颜色
        }
    }, {
        name: '图例3',
        type: 'line',
        data: [30, 40, 50, 60, 70],
        itemStyle: {
            color: '#61a0a8' // 设置该数据项的颜色
        }
    }]
    // ... 其他配置项
};