echarts属性tooltip,echarts自定义图形案例,echarts tooltip formatter自定义,echarts自定义图表,echarts areastyle属性,echarts自定义图形
ECharts自定义系列属性是指在ECharts图表中，用户可以自定义一些与默认系列属性不同的数据项属性，以便更好地展示数据。这些自定义属性可以用于指定数据项的样式、标签、提示等信息。

例如，假设我们有一个饼图，要展示不同种类的水果销售情况。默认情况下，ECharts会根据数据项的值自动生成扇形的大小和颜色。但是，我们希望在扇形上显示每个水果种类的名称和销售量，同时为每个水果种类设置不同的颜色。

为了实现这个需求，我们可以通过在数据项中添加自定义属性来完成。具体步骤如下：

1. 在数据项中添加name和value属性，分别表示水果种类名称和销售数量。
2. 在数据项中添加itemStyle属性，用于设置扇形的样式。其中，normal属性用于设置未选中状态的样式，emphasis属性用于设置选中状态的样式。
3. 在itemStyle.normal和itemStyle.emphasis中分别添加label和color属性，分别用于设置文本和颜色。

以下是示例代码：

javascript
// 数据项
var data = [
{value: 335, name: '苹果'},
{value: 310, name: '橘子'},
{value: 234, name: '香蕉'},
{value: 135, name: '梨'},
{value: 1548, name: '西瓜'}
];

// 饼图配置项
var option = {
series : [
{
type: 'pie',
radius : '55%',
center: ['50%', '50%'],
data: data,
itemStyle: {
normal: {
label: {
show: true,
formatter: '{b}({d}%)'
},
color: function(params) {
// 根据不同的水果种类设置不同的颜色
var colors = ['#c23531','#2f4554','#d48265','#91c7ae','#749f83'];
return colors[params.dataIndex];
}
},
emphasis: {
label: {
show: true,
fontSize: '16',
fontWeight: 'bold'
}
}
}
}
]
};

// 初始化图表
var myChart = echarts.init(document.getElementById('myChart'));
myChart.setOption(option);


在上述示例中，我们通过添加name和value属性来指定每个数据项的名称和销售数量，通过添加itemStyle.normal.label属性来设置默认状态下扇形上的文本，通过添加itemStyle.normal.color属性来根据不同的水果种类设置不同的颜色。