1. 标题(title):
标题组件用于显示图表的主标题和副标题。
var option = {
title: {
text: '标题示例',
subtext: '副标题示例'
},
// 其他配置...
};
2. 图例(legend):
图例组件用于展示不同系列的标识,用户可以通过点击图例项来显示或隐藏相应的系列。
var option = {
legend: {
data: ['系列1', '系列2', '系列3']
},
// 其他配置...
};
3. 提示框(tooltip):
提示框组件用于显示鼠标悬停时的信息,可根据需要自定义显示的内容和样式。
var option = {
tooltip: {
trigger: 'axis', // 触发类型,可选值:"item", "axis"
formatter: '{a} <br/>{b}: {c}'
},
// 其他配置...
};
4. 工具箱(toolbox):
工具箱组件提供了一系列工具按钮,如导出图片、数据视图、刷新等,用户可以根据需要启用或禁用这些工具。
var option = {
toolbox: {
feature: {
saveAsImage: {},
dataView: {},
dataZoom: {}
}
},
// 其他配置...
};
5. 数据区域缩放(dataZoom):
数据区域缩放组件允许用户通过拖拽选择、滚轮缩放等方式调整图表的显示区域。
var option = {
dataZoom: [
{
type: 'slider',
start: 0,
end: 100
},
{
type: 'inside',
start: 0,
end: 100
}
],
// 其他配置...
};
6. 视觉映射(visualMap):
视觉映射组件用于根据数据的大小,通过颜色或大小的变化来呈现数据的差异。
var option = {
visualMap: {
min: 0,
max: 1000,
calculable: true,
inRange: {
color: ['#50a3ba', '#eac736', '#d94e5d']
}
},
// 其他配置...
};
以上是一些常见的交互组件配置示例,你可以根据实际需求选择性地启用和配置这些组件。详细的配置选项和示例可以在 [ECharts 文档](https://echarts.apache.org/zh/index.html) 中找到。
转载请注明出处:http://www.zyzy.cn/article/detail/13206/ECharts