TypeError: Cannot read property 'charAt' of undefinedECharts Gallery

20:11:45图表已生成
代码
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
    
}); 
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
