echartsカスタムtooltip描画軌跡
11687 ワード
この前、echartsを使ってAPPのトレンド図を作りました.ソースを修正して、いくつかのカスタム効果を実現しました.そして、いくつかのecharts-m.jsの隠しセットを設置して、ここでMarkは忘れないようにします.
1.カスタムtooltipで軌跡を描く.
echartsが提供するtooltipは、直線を描く時、実線、破線、シャドウ線のみを提供します.直線に基づいて、いくつかの機能を追加するには、例えば線が図の境界を超えて(formaterイベントで注入すれば、遅延効果があります)、ソースを変更する必要があります.内部の描画経路を指導します.echarts自体はcanvasでtootipを描いています.余計なことを言わない
A.Config属性を追加します.
'echard/component/tooltip'モジュールの下で、ecConfig.tooltipの定義の中で、axis Pointを拡張して、self Defineの属性を追加して、デフォルトはSteringで、有効にしません.着信functionは上書きして使用できます.
修正が完了したら、以下のように構成されます.YStart-26を設定することで、tooltip線がechartsのグリッドエリアを超えます.
echartsはmバージョンを提供しています.多くのPCイベントを削除して、APPに適用しますが、APIとPC版はいくつかの違いがあります.特にY軸の座標値は右側にデフォルトであり、卵が痛いです.ソースコードを確認することにより、これらのデフォルトの設定が見つかりました.記録は以下の通りです
1.Y軸座標値水平位置
yAxis> axisLabel>marginは、35に設定されています.調整できます.
アニメーションの設定:false
最後に、問題があったら、交流を歓迎します.
1.カスタムtooltipで軌跡を描く.
echartsが提供するtooltipは、直線を描く時、実線、破線、シャドウ線のみを提供します.直線に基づいて、いくつかの機能を追加するには、例えば線が図の境界を超えて(formaterイベントで注入すれば、遅延効果があります)、ソースを変更する必要があります.内部の描画経路を指導します.echarts自体はcanvasでtootipを描いています.余計なことを言わない
A.Config属性を追加します.
'echard/component/tooltip'モジュールの下で、ecConfig.tooltipの定義の中で、axis Pointを拡張して、self Defineの属性を追加して、デフォルトはSteringで、有効にしません.着信functionは上書きして使用できます.
axisPointer: {
type: 'line',
lineStyle: {
color: '#48b',
width: 2,
type: 'solid',
selfDefine : 'self defined function to help draw tip panel' //modify, new add
},
crossStyle: {
color: '#1e90ff',
width: 1,
type: 'dashed',
selfDefine : 'self defined function to help draw tip panel' //modify, new add
},
shadowStyle: {
color: 'rgba(150,150,150,0.3)',
width: 'auto',
type: 'default',
selfDefine : 'self defined function to help draw tip panel' //modify, new add
}
},_styleAxisPointer: function (seriesArray, xStart, yStart, xEnd, yEnd, gap, x, y) {
if (seriesArray.length > 0) {
var queryTarget;
var curType;
var axisPointer = this.option.tooltip.axisPointer;
var pointType = axisPointer.type;
var appendStyle = this.option.tooltip.appendStyle;
var style = {
line: {},
cross: {},
shadow: {}
};
for (var pType in style) {
style[pType].color = axisPointer[pType + 'Style'].color;
style[pType].width = axisPointer[pType + 'Style'].width;
style[pType].type = axisPointer[pType + 'Style'].type;
style[pType].selfDefine = axisPointer[pType + 'Style'].selfDefine; // new add
}
for (var i = 0, l = seriesArray.length; i < l; i++) {
queryTarget = seriesArray[i];
curType = this.query(queryTarget, 'tooltip.axisPointer.type');
pointType = curType || pointType;
if (curType) {
style[curType].color = this.query(queryTarget, 'tooltip.axisPointer.' + curType + 'Style.color') || style[curType].color;
style[curType].width = this.query(queryTarget, 'tooltip.axisPointer.' + curType + 'Style.width') || style[curType].width;
style[curType].type = this.query(queryTarget, 'tooltip.axisPointer.' + curType + 'Style.type') || style[curType].type;
style[curType].selfDefine = style[curType].selfDefine; //new add
}
}
if (pointType === 'line') {
var lineWidth = style.line.width;
var isVertical = xStart == xEnd;
this._axisLineShape.style = {
xStart: isVertical ? this.subPixelOptimize(xStart, lineWidth) : xStart,
yStart: isVertical ? yStart : this.subPixelOptimize(yStart, lineWidth),
xEnd: isVertical ? this.subPixelOptimize(xEnd, lineWidth) : xEnd,
yEnd: isVertical ? yEnd : this.subPixelOptimize(yEnd, lineWidth),
strokeColor: style.line.color,
lineWidth: lineWidth,
lineType: style.line.type,
selfDefine : style.line.selfDefine //new add
};
this._axisLineShape.invisible = false;
this.zr.modShape(this._axisLineShape.id);
} else if (pointType === 'cross') {
var crossWidth = style.cross.width;
this._axisCrossShape.style = {
brushType: 'stroke',
rect: this.component.grid.getArea(),
x: this.subPixelOptimize(x, crossWidth),
y: this.subPixelOptimize(y, crossWidth),
text: ('( ' + this.component.xAxis.getAxis(0).getValueFromCoord(x) + ' , ' + this.component.yAxis.getAxis(0).getValueFromCoord(y) + ' )').replace(' , ', ' ').replace(' , ', ' '),
textPosition: 'specific',
strokeColor: style.cross.color,
lineWidth: crossWidth,
lineType: style.cross.type
};
if (this.component.grid.getXend() - x > 100) {
this._axisCrossShape.style.textAlign = 'left';
this._axisCrossShape.style.textX = x + 10;
} else {
this._axisCrossShape.style.textAlign = 'right';
this._axisCrossShape.style.textX = x - 10;
}
if (y - this.component.grid.getY() > 50) {
this._axisCrossShape.style.textBaseline = 'bottom';
this._axisCrossShape.style.textY = y - 10;
} else {
this._axisCrossShape.style.textBaseline = 'top';
this._axisCrossShape.style.textY = y + 10;
}
this._axisCrossShape.invisible = false;
this.zr.modShape(this._axisCrossShape.id);
} else if (pointType === 'shadow') {
if (style.shadow.width == null || style.shadow.width === 'auto' || isNaN(style.shadow.width)) {
style.shadow.width = gap;
}
if (xStart === xEnd) {
if (Math.abs(this.component.grid.getX() - xStart) < 2) {
style.shadow.width /= 2;
xStart = xEnd = xEnd + style.shadow.width / 2;
} else if (Math.abs(this.component.grid.getXend() - xStart) < 2) {
style.shadow.width /= 2;
xStart = xEnd = xEnd - style.shadow.width / 2;
}
} else if (yStart === yEnd) {
if (Math.abs(this.component.grid.getY() - yStart) < 2) {
style.shadow.width /= 2;
yStart = yEnd = yEnd + style.shadow.width / 2;
} else if (Math.abs(this.component.grid.getYend() - yStart) < 2) {
style.shadow.width /= 2;
yStart = yEnd = yEnd - style.shadow.width / 2;
}
}
this._axisShadowShape.style = {
xStart: xStart,
yStart: yStart,
xEnd: xEnd,
yEnd: yEnd,
strokeColor: style.shadow.color,
lineWidth: style.shadow.width
};
this._axisShadowShape.invisible = false;
this.zr.modShape(this._axisShadowShape.id);
}
this.zr.refreshNextFrame();
if(appendStyle && (typeof appendStyle === 'function')){ //new add
appendStyle.call(this, x, y);
}
}
},Line.prototype = {
type: 'line',
buildPath: function (ctx, style) {
if(style.selfDefine && (typeof style.selfDefine === 'function')){
// console.log(style.xStart+" "+style.yStart+" "+style.xEnd+" "+style.yEnd);
var selfDefine = style.selfDefine;
selfDefine.call(this,ctx,style.xStart,style.yStart,style.xEnd,style.yEnd);
return;
}else if (!style.lineType || style.lineType == 'solid') {
// console.log('solid line');
ctx.moveTo(style.xStart, style.yStart);
ctx.lineTo(style.xEnd, style.yEnd);
} else if (style.lineType == 'dashed' || style.lineType == 'dotted') {
// console.log('dash line');
var dashLength = (style.lineWidth || 1) * (style.lineType == 'dashed' ? 5 : 1);
dashedLineTo(ctx, style.xStart, style.yStart, style.xEnd, style.yEnd, dashLength);
}
},
getRect: function (style) {
if (style.__rect) {
return style.__rect;
}
var lineWidth = style.lineWidth || 1;
style.__rect = {
x: Math.min(style.xStart, style.xEnd) - lineWidth,
y: Math.min(style.yStart, style.yEnd) - lineWidth,
width: Math.abs(style.xStart - style.xEnd) + lineWidth,
height: Math.abs(style.yStart - style.yEnd) + lineWidth
};
return style.__rect;
}
};修正が完了したら、以下のように構成されます.YStart-26を設定することで、tooltip線がechartsのグリッドエリアを超えます.
tooltip: {
showDelay:0,
transitionDuration:0,
backgroundColor: "#a6afb6",
borderColor: "yellow",
borderWidth: 2,
padding: 0,
showContent: false,
trigger: 'axis', //item,axis
position: function() {
return [0, 0];
},
formatter: function(params) {
},
axisPointer: {
type: 'line',
lineStyle: {
width: 2,
color :"#a6afb6",
selfDefine: function(ctx,xStart,yStart,xEnd,yEnd){
ctx.moveTo(xStart, yStart-26);
ctx.lineTo(xEnd, yEnd);
}
}
}
},echartsはmバージョンを提供しています.多くのPCイベントを削除して、APPに適用しますが、APIとPC版はいくつかの違いがあります.特にY軸の座標値は右側にデフォルトであり、卵が痛いです.ソースコードを確認することにより、これらのデフォルトの設定が見つかりました.記録は以下の通りです
1.Y軸座標値水平位置
yAxis> axisLabel>marginは、35に設定されています.調整できます.
yAxis: [{
type: 'value',
lineStyle: {
color: '#a6afb6',
width: 1,
type: 'solid'
},
axisLine: {
lineStyle: {
color: '#a6afb6',
width: 1,
type: 'solid'
}
},
axisLabel: {
textStyle: {
color: '#a6afb6'
},
margin: 35, //modify for ehcarts-m
align: 'right',
formatter: function(value){
if(value >= 10000000){
value = value/1000000;
value = value+"M";
}else if(value >= 10000){
value = value/1000;
value = value+"K";
}else{
value = value+"";
}
for(var i = value.length ; i < 5;i++){
value = " "+value;
}
return value;
}
}
}],アニメーションの設定:false
最後に、問題があったら、交流を歓迎します.