建站
咨詢
售后
建站咨詢
新聞中心
本節(jié)我們一起來(lái)學(xué)習(xí) ECharts 中 yAxis 是如何設(shè)置其坐標(biāo)軸指示器的文本標(biāo)簽的。首先，需要將文本標(biāo)簽顯示出來(lái)，使用的是 axisPointer.label.show，然后就可以對(duì)坐標(biāo)軸指示器的文本標(biāo)簽進(jìn)行設(shè)置了，詳細(xì)內(nèi)容如下：
yAxis.axisPointer.label | Object
坐標(biāo)軸指示器的文本標(biāo)簽。
yAxis.axisPointer.label.show | boolean
[ default: false ]
是否顯示 y 軸坐標(biāo)軸指示器的文本標(biāo)簽。如果 tooltip.axisPointer.type 設(shè)置為 'cross' 則默認(rèn)顯示標(biāo)簽，否則默認(rèn)不顯示。
yAxis.axisPointer.label.precision | number, string
[ default: 'auto' ]
yAxis 坐標(biāo)軸指示器文本標(biāo)簽中數(shù)值的小數(shù)點(diǎn)精度。默認(rèn)根據(jù)當(dāng)前軸的值自動(dòng)判斷。也可以指定如 2 表示保留兩位小數(shù)。
yAxis.axisPointer.label.formatter | string, Function
[ default: null ]
坐標(biāo)軸指示器文本標(biāo)簽文字的格式化器。
- 如果為 string，可以是例如：
formatter: 'some text {value} some text，其中 {value} 會(huì)被自動(dòng)替換為軸的值。
- 如果為 function，可以是例如：
參數(shù)：
{Object} params: 含有：
{Object} params.value: 軸當(dāng)前值，如果 axis.type 為 'category' 時(shí)，其值為 axis.data 里的數(shù)值。如果 axis.type 為 'time'，其值為時(shí)間戳。
{Array.
{
componentType: 'series',
// 系列類(lèi)型
seriesType: string,
// 系列在傳入的 option.series 中的 index
seriesIndex: number,
// 系列名稱(chēng)
seriesName: string,
// 數(shù)據(jù)名，類(lèi)目名
name: string,
// 數(shù)據(jù)在傳入的 data 數(shù)組中的 index
dataIndex: number,
// 傳入的原始數(shù)據(jù)項(xiàng)
data: Object,
// 傳入的數(shù)據(jù)值
value: number|Array,
// 數(shù)據(jù)圖形的顏色
color: string,
}每項(xiàng)內(nèi)容還包括軸的信息：
{
axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'
axisId: 'xxx',
axisName: 'xxx',
axisIndex: 3,
axisValue: 121, // 當(dāng)前 axisPointer 對(duì)應(yīng)的 value。
axisValueLabel: '文本'
}返回值：
顯示的 string。
例如：
formatter: function (params) {
// 假設(shè)此軸的 type 為 'time'。
return 'some text' + echarts.format.formatTime(params.value);
}yAxis.axisPointer.label.margin | boolean
[ default: 3 ]
yAxis 坐標(biāo)軸指示器的文本標(biāo)簽距離 y 軸的距離。
yAxis.axisPointer.label.backgroundColor | string
[ default: 'auto' ]
yAxis 坐標(biāo)軸指示器文本標(biāo)簽的背景顏色，默認(rèn)是和 axis.axisLine.lineStyle.color 相同。
yAxis.axisPointer.label.borderColor | string
[ default: null ]
yAxis 坐標(biāo)軸指示器文本標(biāo)簽的邊框顏色。
yAxis.axisPointer.label.borderWidth | string
[ default: 0 ]
yAxis 坐標(biāo)軸指示器文本標(biāo)簽的邊框?qū)挾取?/p>
yAxis.axisPointer.label.shadowBlur | number
[ default: 3 ]
yAxis 坐標(biāo)軸指示器圖形陰影的模糊大小。
該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設(shè)置圖形的陰影效果。示例：
{
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}yAxis.axisPointer.label.shadowColor | Color
[ default: #aaa ]
yAxis 坐標(biāo)軸指示器陰影的顏色。支持的格式同color。
yAxis.axisPointer.label.shadowOffsetX | number
[ default: 0 ]
yAxis 坐標(biāo)軸指示器陰影在水平方向上的偏移距離。
yAxis.axisPointer.label.shadowOffsetY | number
[ default: 0 ]
yAxis 坐標(biāo)軸指示器陰影在垂直方向上的偏移距離。
文章題目：創(chuàng)新互聯(lián)ECharts教程：設(shè)置y軸坐標(biāo)軸指示器的文本標(biāo)簽
文章來(lái)源：http://www.dlmjj.cn/article/djoogcj.html
