如何设置 Echarts 图例（legend）中的符号（symbol）颜色

要设置 Echarts 图例（legend）中的符号（symbol）颜色，可以使用 Echarts 的 legend.textStyle.color 属性来设置图例文本的颜色，同时使用 series.itemStyle.normal.color 属性来设置数据项符号的颜色。具体的实现方法如下：

option = {
    ...
    legend: {
        ...
        textStyle: {
            color: 'red' // 设置图例文本颜色为红色
        }
    },
    series: [{
        ...
        itemStyle: {
            normal: {
                color: 'blue' // 设置数据项符号的颜色为蓝色
            }
        }
    }]
}

其中，'red' 和 'blue' 可以替换为任何你想要的颜色。需要注意的是，如果你的数据项符号颜色需要根据数据动态变化，可以使用 Echarts 的数据驱动（Data Driven）功能来实现。

相关问题

要设置 Echarts 图例（legend）中的符号（symbol）颜色为什么固定为红色

抱歉，我的前面的回答有误，我理解错了您的问题。Echarts 图例（legend）中的符号（symbol）颜色默认是根据所对应的数据项的颜色自动调整的，而不是固定为红色。因此，如果您希望数据项符号固定为红色，需要对所有数据项的 itemStyle.normal.color 属性设置为红色，例如：

option = {
    ...
    series: [
        {
            name: '数据1',
            type: 'line',
            data: [10, 20, 30, 40],
            itemStyle: {
                normal: {
                    color: 'red' // 设置数据项符号的颜色为红色
                }
            }
        },
        {
            name: '数据2',
            type: 'line',
            data: [20, 30, 40, 50],
            itemStyle: {
                normal: {
                    color: 'red' // 设置数据项符号的颜色为红色
                }
            }
        }
        ...
    ]
    ...
};

这样设置后，图例（legend）中所有数据项的符号颜色都会是红色。需要注意的是，如果您的数据项符号颜色需要根据数据动态变化，可以使用 Echarts 的数据驱动（Data Driven）功能来实现，具体实现方法请参考上一个回答。

echarts 图例legend添加景

要 Echarts 中添加图例（legend），可以通过以下步骤完成：

1. 在 Echarts 中定义图例的样式和位置。例如：

legend: {
    data: ['销量'],
    align: 'left',
    left: 10
},

上述代码中，我们定义了一个图例，它的数据为 `"销量"`，位置在左侧，距离左边界为 `10`。

2. 在 Echarts 中定义数据系列（series）的名称和类型，并将它们与图例关联起来。例如：

series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
}]

上述代码中，我们定义了一个数据系列，它的名称为 `"销量"`，类型为 `bar`，数据为 `[5, 20, 36, 10, 10, 20]`。这个数据系列与图例中的 `"销量"` 关联起来。

3. 在 HTML 页面中定义 Echarts 的容器，并引入 Echarts 库和需要的主题。例如：

<div id="chart" style="width: 600px; height: 400px;"></div>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/theme/light.min.js"></script>

上述代码中，我们定义了一个大小为 `600px` x `400px` 的 Echarts 容器，并引入了 Echarts 库和 `light` 主题。

4. 在 JavaScript 中初始化 Echarts 并将数据系列和图例添加到图表中。例如：

var myChart = echarts.init(document.getElementById('chart'), 'light');

var option = {
    legend: {
        data: ['销量'],
        align: 'left',
        left: 10
    },
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
};

myChart.setOption(option);

上述代码中，我们通过 `echarts.init()` 方法初始化了 Echarts，并将图表渲染到了指定的容器中。然后，我们定义了一个 `option` 对象，其中包含了图例和数据系列的配置信息。最后，我们通过 `myChart.setOption()` 方法将 `option` 对象应用到图表中。

这样，就可以在 Echarts 中添加图例了。如果需要进一步调整图例的样式和位置，可以在 `legend` 对象中修改相应的配置信息。