echarts中label富文本编辑,echarts tooltip formatter自定义,echarts自定义symbol,echarts字符云,echarts赋值,echarts label富文本
ECharts自定义富文本是指在ECharts图表中使用带有样式和格式的自定义HTML标签，以增强数据可视化效果和呈现方式。ECharts提供了丰富的API来支持自定义富文本，例如通过在tooltip或者series label中使用Rich Text格式，实现对文字的样式、颜色、大小、字体、背景等多方面的控制。

以下是一个简单的例子，展示如何在ECharts图表中使用自定义富文本：

javascript
//echarts配置项
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
// 自定义富文本tooltip
formatter: function(params) {
return '<div style="text-align:center">' + params[0].name + '</div><br/>' +
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#1E90FF"></span>' +
params[0].seriesName + ': ' + params[0].value + '<br/>' +
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#FF69B4"></span>' +
params[1].seriesName + ': ' + params[1].value + '<br/>'
}
},
legend: {
data:['邮件营销','联盟广告']
},
xAxis: [
{
type: 'category',
data: ['周一','周二','周三','周四','周五','周六','周日'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '邮件营销',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '联盟广告',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
}
],
series: [
{
name:'邮件营销',
type:'bar',
data:[120, 132, 101, 134, 90, 230, 210],
label: {
// 自定义富文本series label
show: true,
position: 'top',
formatter: '{b}\n{a}: {c}',
rich: {
b: {
fontSize: 16,
lineHeight: 20
},
a: {
color: '#999',
lineHeight: 20
},
c: {
fontSize: 18,
fontWeight: 'bold',
color: '#333',
lineHeight: 20
}
}
}
},
{
name:'联盟广告',
type:'bar',
yAxisIndex: 1,
data:[220, 182, 191, 234, 290, 330, 310],
label: {
// 自定义富文本series label
show: true,
position: 'top',
formatter: '{b}\n{a}: {c}',
rich: {
b: {
fontSize: 16,
lineHeight: 20
},
a: {
color: '#999',
lineHeight: 20
},
c: {
fontSize: 18,
fontWeight: 'bold',
color: '#333',
lineHeight: 20
}
}
}
}
]
};


在上述例子中，我们通过使用自定义HTML标签和样式来使tooltip和series label更加美观和可读。比如，我们可以设置不同颜色、大小、字体和背景的小圆点来表示不同系列的数据，并使用不同的字号和粗细的文字来呈现数据的名称和数值。所有这些都可以通过使用ECharts提供的丰富API来实现。