{site_name}

{site_name}

🌜 搜索

ECharts 是一个基于 JavaScript 的开源可视化库,提供了丰富的图表类型和交互功能

前端 𝄐 0
echarts坐标轴标签位置偏移,echarts设置坐标轴间隔,echart坐标轴颜色设置,echarts 坐标轴名称,echarts坐标轴单位,echarts坐标轴设置梯度
ECharts 是一个基于 JavaScript 的开源可视化库,提供了丰富的图表类型和交互功能。ECharts 中的 polar 配置是一种用于绘制极坐标系图表的配置项,而 tooltip 坐标轴指示器配置则是用于设置提示框(tooltip)中的坐标轴指示器的样式和位置。

具体来说,当鼠标悬浮在图表上时,提示框会出现并显示与当前位置相关的信息。而坐标轴指示器是提示框中用来表示当前数据点所处位置的标记,可以帮助用户更直观地理解图表中的数据分布情况。

下面是一个 ECharts polar 图表中 tooltip 坐标轴指示器的配置示例:

js
option = {
tooltip: {
axisPointer: {
type: 'line', // 指示器类型,可选为:'line' | 'shadow'
lineStyle: {
color: '#999',
width: 1,
type: 'solid'
}
},
position: function (pos, params, el, elRect, size) {
var obj = {top: 10};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
return obj;
}
},
polar: {
radius: ['20%', '80%'],
center: ['50%', '50%']
},
angleAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
boundaryGap: false,
axisLine: {
show: false
},
axisLabel: {
interval: 0,
textStyle: {
color: '#999',
fontSize: 14
}
},
axisTick: {
show: false
}
},
radiusAxis: {
min: 0,
max: 100,
interval: 20,
axisLine: {
show: false
},
axisLabel: {
formatter: '{value} %',
textStyle: {
color: '#999',
fontSize: 14
}
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
color: '#eee',
type: 'dashed'
}
}
},
series: [{
name: '数据',
type: 'line',
data: [10, 25, 35, 40, 50, 60, 70],
coordinateSystem: 'polar',
symbolSize: 8,
itemStyle: {
color: '#0077FF'
},
lineStyle: {
width: 2,
color: '#0077FF'
}
}]
};


在上述配置中,我们定义了一个 polar 图表,并设置了一个折线系列。tooltip 坐标轴指示器的样式和位置则通过 tooltip.axixPointer 和 tooltip.position 进行设置。具体来说,

- 在 tooltip.axisPointer 中,我们将指示器类型设为 'line',表示使用直线型的指示器。同时,我们也设置了指示器的样式,包括颜色、宽度和线型等。
- 在 tooltip.position 中,我们通过函数自定义了提示框的位置,使其距离图表左上角向右偏移 30 像素,向下偏移 10 像素。

这样一来,当鼠标悬浮在图表上时,就会出现一个带有坐标轴指示器的提示框,方便用户查看当前数据点的具体信息。