正文

如何用ECharts设置图表图例为自定义路径样式？

/0 浏览量
0331

在ECharts中，图例是图表中用来标识不同系列或数据项的组件。默认情况下，图例的样式是文本形式的，但你可以通过自定义路径（SVG路径）来创建更加丰富和个性化的图例样式。

以下是如何使用ECharts设置图例为自定义路径样式的详细步骤：

1. 准备工作

首先，确保你已经引入了ECharts库。你可以从ECharts的官方网站下载并引入，或者使用CDN链接。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>

2. 创建基本的图表配置

创建一个基本的ECharts图表配置，并设置类型为'legendtype'为'custom'，这样就可以自定义图例的样式。

var myChart = echarts.init(document.getElementById('main'));

var option = {
    legend: {
        type: 'custom',
        orient: 'vertical',
        left: 'left',
        data: ['系列1', '系列2'],
        itemStyle: {
            normal: {
                // 这里可以设置自定义路径的样式
                borderColor: '#fff',
                borderWidth: 1
            }
        },
        formatter: function (name) {
            // 返回自定义的SVG路径字符串
            return `<svg t="1608609316353" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2496" width="20" height="20"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 832c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="2497" fill="#515a6e"></path></svg>` + name;
        }
    },
    series: [{
        name: '系列1',
        type: 'bar',
        data: [10, 20, 30, 40, 50]
    }, {
        name: '系列2',
        type: 'bar',
        data: [50, 40, 30, 20, 10]
    }]
};

myChart.setOption(option);

3. 自定义图例的SVG路径

在上面的代码中，formatter 函数用于生成图例的文本部分。你需要在这个函数中返回一个SVG路径字符串，这个字符串定义了图例的形状。

在formatter函数中，你可以使用任何有效的SVG路径字符串。以下是一个示例，它创建了一个简单的圆形：

formatter: function (name) {
    return `<svg t="1608609316353" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2496" width="20" height="20"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 832c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="2497" fill="#515a6e"></path></svg>` + name;
}

在这个例子中，SVG路径定义了一个圆形，并且填充了颜色#515a6e。

4. 总结

通过以上步骤，你可以使用ECharts创建具有自定义路径样式的图例。你可以根据需要调整SVG路径和样式，以实现个性化的图例设计。

-- 展开阅读全文 --