饼图高亮示例:
var option = {
series: [{
type: 'pie',
data: [
{value: 335, name: 'Category 1'},
{value: 310, name: 'Category 2'},
{value: 234, name: 'Category 3'},
{value: 135, name: 'Category 4'},
{value: 1548, name: 'Category 5'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
在这个例子中,当你将鼠标悬停在饼图的扇形上时,emphasis 配置项中的样式会生效,添加了阴影效果。
折线图高亮示例:
var option = {
series: [{
type: 'line',
data: [10, 20, 30, 40, 50],
emphasis: {
lineStyle: {
color: 'red',
width: 2
},
label: {
show: true,
position: 'top',
color: 'red'
}
}
}]
};
在折线图中,可以使用 emphasis 配置项来修改线条的颜色和宽度,以及突出显示标签的样式。
平行坐标轴高亮示例:
var option = {
parallelAxis: [
{dim: 0, name: 'Axis 1'},
{dim: 1, name: 'Axis 2'},
{dim: 2, name: 'Axis 3'}
// 其他坐标轴...
],
parallel: {
lineStyle: {
width: 1,
opacity: 0.5
},
emphasis: {
lineStyle: {
width: 3,
opacity: 1
}
},
},
series: [
{
type: 'parallel',
lineStyle: {
width: 1,
opacity: 0.5
},
emphasis: {
lineStyle: {
width: 3,
opacity: 1
}
},
data: [
[1, 2, 3],
[5, 4, 3],
[3, 2, 5],
// 其他数据...
]
}
]
};
在平行坐标轴中,可以通过设置 emphasis 配置项来修改高亮时的线条样式。
这只是一些简单的示例,具体的配置取决于图表类型和你想要达到的效果。你可以查阅 ECharts 文档中与相应图表类型相关的 emphasis 配置项来获得更详细的信息:[ECharts Emphasis](https://echarts.apache.org/zh/option.html#series-line.emphasis)
转载请注明出处:http://www.zyzy.cn/article/detail/5100/ECharts