在数据可视化领域，ECharts 是一款非常流行的 JavaScript 库，它可以帮助我们轻松创建各种图表。而自定义图标样式则是 ECharts 的一大亮点，它允许开发者根据需求定制图表的外观，让图表更加独特和吸引人。本文将带你了解如何学会 ECharts 自定义图标样式，轻松打造独特可视化图表。

一、ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库，它提供丰富的图表类型，包括折线图、柱状图、饼图、散点图、地图等。ECharts 具有以下特点：

• 丰富的图表类型：支持多种图表类型，满足不同场景的需求。
• 高度可定制：支持自定义图表的样式、颜色、标签等。
• 跨平台：支持多种浏览器和操作系统。
• 易于使用：提供简单易用的 API，方便开发者快速上手。

二、自定义图标样式

在 ECharts 中，自定义图标样式可以通过以下几种方式实现：

1. 使用 iconfont

iconfont 是阿里巴巴推出的矢量图标库，它提供了丰富的图标资源。在 ECharts 中，我们可以通过 iconfont 自定义图标样式。

示例代码：

var myChart = echarts.init(document.getElementById('main')); var option = { series: [{ type: 'pie', radius: '55%', center: ['50%', '50%'], data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], label: { normal: { formatter: '{b}: {c} ({d}%)', rich: { a: { color: '#333', lineHeight: 33, align: 'center' }, b: { fontSize: 14, lineHeight: 33, align: 'center' }, c: { color: '#333', lineHeight: 33, align: 'center' }, d: { color: '#333', lineHeight: 33, align: 'center' } } } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, labelLine: { normal: { length: 10, length2: 10 } }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, icon: 'iconfont icon-iconfontzhizuobiaozhun024xuanzhong' }] }; myChart.setOption(option); 

2. 使用 SVG 图标

SVG 图标是一种矢量图形，它可以在 ECharts 中直接使用。通过将 SVG 图标设置为图表的 icon 属性，可以自定义图标样式。

示例代码：

”`javascript var myChart = echarts.init(document.getElementById(‘main’));

var option = {

series: [{ type: 'pie', radius: '55%', center: ['50%', '50%'], data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], label: { normal: { formatter: '{b}: {c} ({d}%)', rich: { a: { color: '#333', lineHeight: 33, align: 'center' }, b: { fontSize: 14, lineHeight: 33, align: 'center' }, c: { color: '#333', lineHeight: 33, align: 'center' }, d: { color: '#333', lineHeight: 33, align: 'center' } } } }, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, labelLine: { normal: { length: 10, length2: 10 } }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, icon: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0zNSAxNCBhLTIyLjE2Yy0zLjE2IDAtMi0yLjE2IDAtMi0yLjE2IDEyLjE2LTIyLjE2IDEyLjE2LTIyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE2LTEyLjE