TypeError: Cannot read property 'charAt' of undefinedecharts lines配置项内容和展示
1、创建一个标注 2、放大 3、点击恢复按钮，控制台输出错误信息，曲线图恢复失败
配置项如下
var markLineSymbolSize = 20; //标注点尺寸
var markLineIdIndex = 1; //标注id索引号
var markLineStart = 'start#'; //标注开始符号
var markLineEnd = 'end#'; //标注结束符号
option = {
animation: false,
dataZoom: [
{
type: 'inside',
xAxisIndex: 0,
filterMode: 'none'
},
{
type: 'inside',
yAxisIndex: 0,
filterMode: 'none'
}
],
toolbox: {
show: true,
feature: {
dataZoom: {
//yAxisIndex: 'none'
},
restore: {},
myCallout: {
show: true,
title: '创建标注',
icon: 'path://M285.216356 441.478571l199.164852 199.329005V105.03466a29.371715 29.371715 0 0 1 29.418616-29.430341 29.430341 29.430341 0 0 1 29.453791 29.430341v535.772916l199.106226-199.329005a29.38344 29.38344 0 0 1 41.612861 0 29.313089 29.313089 0 0 1 0 41.612861l-249.454387 249.466112a29.371715 29.371715 0 0 1-20.718491 8.535972 29.207562 29.207562 0 0 1-20.741942-8.535972l-249.407486-249.466112a29.277913 29.277913 0 0 1 0-41.612861 29.313089 29.313089 0 0 1 41.56596 0z M925.250066 650.316742a29.430341 29.430341 0 0 0-29.465517 29.430341v186.571949h-763.96945v-186.571949a29.430341 29.430341 0 0 0-29.465518-29.430341 29.38344 29.38344 0 0 0-29.430341 29.430341v215.873312a29.38344 29.38344 0 0 0 29.430341 29.430342h822.900485a29.38344 29.38344 0 0 0 29.418616-29.430342v-215.873312c0-16.298077-13.143989-29.430341-29.418616-29.430341z',
backgroundColor: "#FAFAFA",
onclick: function () {
createCallout();
}
}
}
},
xAxis: {
type: 'value',
min: -800,
max: 800,
axisPointer: {
show: true,
snap: false
}
},
yAxis: {
type: 'value',
min: -800,
max: 800,
axisPointer: {
show: true,
snap: false
}
},
series: [{
type: 'lines',
id: 'a',
coordinateSystem: 'cartesian2d',
markLine: {
show: true,
symbolSize: markLineSymbolSize,
lineStyle: {
width: 2
},
data: []
}
}],
graphic: [{
elements: []
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//创建标注
function createCallout() {
//获取当前配置信息
var opt = myChart.getOption();
var startID = markLineStart + markLineIdIndex; //起始id
var endID = markLineEnd + markLineIdIndex; //结束id
//创建新标注
var newMardLine = [{
id: startID,
label: {
position: 'start',
formatter: '我是新标注'
},
xAxis: -50,
yAxis: -50
},
{
id: endID,
xAxis: -300,
yAxis: -300
}];
opt.series[0].markLine.data.push(newMardLine);
//创建可拖拽的标注句柄(起始端)
var newDragCircleStart = {
type: 'circle',
id: startID,
position: myChart.convertToPixel('grid', [newMardLine[0].xAxis, newMardLine[0].yAxis]),
shape: {
cx: 0,
cy: 0,
r: markLineSymbolSize / 2
},
invisible: false,
draggable: true,
ondrag: echarts.util.curry(onPointDragging, startID),
z: 100
};
opt.graphic[0].elements.push(newDragCircleStart);
//创建可拖拽的标注句柄(结束端)
var newDragCircleEnd = {
type: 'circle',
id: endID,
position: myChart.convertToPixel('grid', [newMardLine[1].xAxis, newMardLine[1].yAxis]),
shape: {
cx: 0,
cy: 0,
r: markLineSymbolSize / 2
},
invisible: false,
draggable: true,
ondrag: echarts.util.curry(onPointDragging, endID),
z: 100
};
opt.graphic[0].elements.push(newDragCircleEnd);
//设置到echarts
myChart.setOption(opt);
//标注id自增
++markLineIdIndex;
}
//拖拽标注
function onPointDragging(dataIndex) {
var opt = myChart.getOption();
var newValue = myChart.convertFromPixel('grid', this.position);
var markLineData = opt.series[0].markLine.data;
for (var i = 0; i < markLineData.length; ++i) {
if (markLineData[i][0].id === dataIndex) {
markLineData[i][0].xAxis = newValue[0];
markLineData[i][0].yAxis = newValue[1];
break;
}
if (markLineData[i][1].id === dataIndex) {
markLineData[i][1].xAxis = newValue[0];
markLineData[i][1].yAxis = newValue[1];
break;
}
}
//更新数据，必须使用这种方法，否则无法拖拽
myChart.setOption({
series: [{
markLine: {
data: markLineData
}
}]
});
}
//缩放函数1：先更新标注句柄位置
myChart.on('datazoom', function (params) {
var opt = myChart.getOption();
for (var i = 0; i < opt.series[0].markLine.data.length; ++i) {
//更新标注起始点句柄位置
myChart.setOption({
graphic: [
{
id: opt.series[0].markLine.data[i][0].id,
position: myChart.convertToPixel('grid', [opt.series[0].markLine.data[i][0].xAxis, opt.series[0].markLine.data[i][0].yAxis])
}
]
});
//更新标注结束点句柄位置
myChart.setOption({
graphic: [
{
id: opt.series[0].markLine.data[i][1].id,
position: myChart.convertToPixel('grid', [opt.series[0].markLine.data[i][1].xAxis, opt.series[0].markLine.data[i][1].yAxis])
}
]
});
}
})
//缩放函数2：然后更新标注句柄的显示状态
//注意：这两个函数上下位置不能颠倒，否则会出现未知行为
myChart.on('datazoom', function (params) {
var opt = myChart.getOption();
//更新标注句柄显示状态，因为标注句柄是2个一组，并且是挨着放到elements数组中，所以判断的时候需要两个一起判断
if (opt.graphic !== undefined) {
opt.xAxis[0].rangeStart
opt.xAxis[0].rangeEnd
opt.yAxis[0].rangeStart
opt.yAxis[0].rangeEnd
for (var i = 0; i < opt.graphic[0].elements.length; ++i) {
//无缩放，显示全部图元
if (opt.xAxis[0].rangeStart === null ||
opt.xAxis[0].rangeEnd === null ||
opt.yAxis[0].rangeStart === null ||
opt.yAxis[0].rangeEnd === null) {
myChart.setOption({
graphic: [{
id: opt.graphic[0].elements[i].id,
invisible: false, //显示图元
silent: false //响应鼠标触摸事件
}]
});
}
//有缩放判断图元是否在显示范围内
else {
var value1 = myChart.convertFromPixel('grid', opt.graphic[0].elements[i].position);
++i;
var value2 = myChart.convertFromPixel('grid', opt.graphic[0].elements[i].position);
var b1 = opt.xAxis[0].rangeStart < value1[0] && value1[0] < opt.xAxis[0].rangeEnd && opt.yAxis[0].rangeStart < value1[1] && value1[1] < opt.yAxis[0].rangeEnd;
var b2 = opt.xAxis[0].rangeStart < value2[0] && value2[0] < opt.xAxis[0].rangeEnd && opt.yAxis[0].rangeStart < value2[1] && value2[1] < opt.yAxis[0].rangeEnd;
//将start#1或end#1根据#拆分，获取id号
var strID = opt.graphic[0].elements[i].id.split('#');
//根据id号更新拖拽句柄的显示状态
if (b1 && b2) {
//console.log('show Xstart: ' + opt.xAxis[0].rangeStart + ' Xend: ' + opt.xAxis[0].rangeEnd + ' Ystart: ' + opt.yAxis[0].rangeStart + ' Yend: ' + opt.yAxis[0].rangeEnd + ' value: ' + value1[0].toFixed(2) + ',' + value1[1].toFixed(2));
myChart.setOption({
graphic: [{
id: markLineStart + strID[1],//opt.graphic[0].elements[i].id,
invisible: false, //显示图元
silent: false //响应鼠标触摸事件
}]
});
myChart.setOption({
graphic: [{
id: markLineEnd + strID[1],//opt.graphic[0].elements[i].id,
invisible: false, //显示图元
silent: false //响应鼠标触摸事件
}]
});
}
else {
//console.log('hide Xstart: ' + opt.xAxis[0].rangeStart + ' Xend: ' + opt.xAxis[0].rangeEnd + ' Ystart: ' + opt.yAxis[0].rangeStart + ' Yend: ' + opt.yAxis[0].rangeEnd + ' value: ' + value1[0].toFixed(2) + ',' + value1[1].toFixed(2));
//console.log('hide ' + opt.graphic[0].elements[i].id);
myChart.setOption({
graphic: [{
id: markLineStart + strID[1],//opt.graphic[0].elements[i].id,
invisible: true, //隐藏图元
silent: true //不响应鼠标触摸事件
}]
});
myChart.setOption({
graphic: [{
id: markLineEnd + strID[1],//opt.graphic[0].elements[i].id,
invisible: true, //隐藏图元
silent: true //不响应鼠标触摸事件
}]
});
}
}
}
}
});
myChart.on('restore', function (params) {
console.log(params);
//调用事件后控制台显示
//TypeError: Cannot read property 'charAt' of undefined
});
截图如下
