echarts 批量修改

在项目中，有需求需要批量修改echarts数值和精细的修改每一项的数值。

官方有提供单个值进行拖动修改的案例，我加了限制不让他左右进行改值只能上下进行拖动修改，并加入了一个点击出现的输入框，放入到了项目中，精细修改每一项数值就算完成了 此处就不放了。

批量修改是根据echarts提供的api研究出来的。很久之前了 偶然又翻到还是发出来记录一下吧，希望对大家有帮助。具体代码如下：

echarts 基础配置

var seriesData = [820, 932, 901, 934, 1290, 1330, 1320];
var top = 50, left = 100, bottom = 50, right = 50;
option = {
    grid:[{
        top: top,
        left: left,
        bottom: bottom,
        right: right
    }],
    xAxis: [
        {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
                alignWithLabel: true
            }
        }
    ],
    tooltip: {
        trigger: 'axis',
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        id: 'bb',
        data: seriesData,
        type: 'line',
        symbolSize: 20
    }],
    graphic: [{ //自定义划线
        id: 'aa',
        type: 'polyline',
        shape: {
            points: []
        }
    }]
};

graphic是存放的是我自定义的划线数据，鼠标移动画一条参考线，这里没有加划线只能往一个方向的限制，有需要的自己加一下，echarts根据画的这条线拾取数据进行更改数据；注意series和graphic必须要声明id，更改后的值要根据id写入回去。

方法和逻辑

let initDownX = ''; //初始位置
var xAxisItem = null;   //记录上次拾取位置
var pointsArr = []; //自定义划线数据
var arr = [];   //鼠标滑动拾取的数据
var myChartWidth = myChart.getWidth() - left - right;
var myChartHeight = myChart.getHeight() - top - bottom;
// 鼠标按下记录当前位置
myChart.getZr().on('mousedown', params => {
    initDownX = xAxisItem = params.offsetX;
    pointsArr = [];
    arr = [];
    myChart.getZr().on('mousemove', moveFn);
});

function moveFn(params){
    if(initDownX == '') return;
    if(Math.abs(params.offsetX - xAxisItem) >= 5){
        xAxisItem = params.offsetX;
        pointsArr.push([params.offsetX, params.offsetY]);
        let decimal = (params.offsetX - left) / myChartWidth * seriesData.length;
        var yItemData = myChart.convertFromPixel('grid', [params.offsetX, params.offsetY])[1];
        let json = {
            x: decimal,
            y: yItemData
        };
        arr.push(json);

        let distanceLeft = params.offsetX - initDownX;
        if(params.offsetX < initDownX){
            distanceLeft = initDownX - params.offsetX;
        }
        if(distanceLeft >= myChartWidth / seriesData.length){  //鼠标移动至少一项位置
            // 绘制参考线
            myChart.setOption({
                graphic:[{
                    id: 'aa',
                    shape: {
                        points: pointsArr,
                    },
                    style: {
                        stroke: 'red'
                    }
                }]
            });
        }
    }
}
myChart.getZr().on('mouseup', params => {
	myChart.getZr().off('mousemove', moveFn);
	if(initDownX == '' || arr.length == 0) return;
	initDownX = '';
	arr[0].x > arr[arr.length - 1].x && arr.reverse();
	
	let x = parseInt(arr[0].x);
	let dataIndexEnd = parseInt(arr[arr.length - 1].x);
    // 根据x轴计算位置
    while(x <= dataIndexEnd){
        let xNum = x + 0.5;
        for(var i = 0; i < arr.length; i++){
            if(arr[i + 1] == undefined) break;
            if(arr[i].x <= xNum && xNum <= arr[i + 1].x){   //
                var yData = ((arr[i].y + arr[i + 1].y) / 2).toFixed(2);
                seriesData[x] = yData;
                break;
            }
        }
        x++;
    }
	myChart.setOption({
	    series:[{
	        id: 'bb',
	        data: seriesData
	    }],
	    graphic:[{
            id: 'aa',
            shape: {
                points: [],
            },
        }]
	});
});

用的都是基础的事件，鼠标移动拾取每一项左右两端的数据确定他们要改变的位置，是一个平均值；之后别忘了清空自定义的参考线。

两段代码可贴入echarts官方模板进行查看。

下面是效果图：