Django+echarts+js：拖动Echarts滚动条，实时重新计算并绘制折线图

需求

用echarts绘制两条线的折线图，拖动滚动条时，再原数据的基础上重新计算并绘制折线图

要点

1.每次刷新数据，都要恢复原数据，防止代入上一次计算的数据进行新一轮计算

2.重新绘制部分的折线如何衔接的问题：
dataZoom滚动条的始末位置都是百分比，无法准确获取坐标点数据进行计算和绘制，笨方法是依据百分比算出大概坐标点之后，手动改一下前后的一个数据，这样可以让刷新后的echarts折线图看起来更不会太奇怪，让新计算的数据更好的衔接原数据

3.重新绘制要清除原先使用的option

4.定义的var myChart=…和var option=…要确保不会和其他图出现重名的情况

<script>
//---------------------------echarts的一些配置---------cgg--------------
	var dom = document.getElementById('container0');
	var myChart = echarts.init(dom, null, {
	    renderer: 'canvas',
	    useDirtyRect: false
	});
	var option = {};
	option = {
		legend: {},
		xAxis: [{},{},...],
		yAxis: [{},{},...],
		grid: [{},{},...],
		series: [{},{},...],  //多线设置
		dataZoom: [{},{},...],
		..........
		...........
	}
	if (option && typeof option === 'object') {
		myChart.setOption(option);
	}
// --------------------------------正式部分------------------cgg----------
	myChart.on('datazoom',function(params){
	    // 监听datazoom：拖动滚动条时触发
	    //console.log(params.start);//里面存有代表滑动条的起始的数字
	    newline_data(params.start,params.end)// (start和end是两个百分数)
	 })
	function newline_data(start,end){
	    /*
	    获取起始位置和结束位置的数据
	    重新计算后 在滚动条选定区域内,重新绘制 cgg
	    */
	    // 始末坐标索引
	    let xAxis=myChart.getModel().option.xAxis[0];//获取axis属性(X轴数据)
	    let n1 = xAxis.data.length*(start/100);  // 新 起始位置索引 如：113*10%=11.3
	    let n2 = xAxis.data.length*(end/100);  // 新 结束位置索引
	    let start_id = Math.round(n1); //四舍五入-->基准坐标  11.3 ==> 11  11.6==>12
	    let end_id = Math.round(n2); //四舍五入
	    //let rslt1 = Math.floor(n1); //向下取整。  11.x ==> 11
	    //let rslt2 = Math.ceil(n1); //向上取整。  11.x ==> 12
	    console.log(xAxis.data[start_id]);//查看x轴上具体的起始x值
	    console.log(xAxis.data[end_id]);//查看x轴上具体的结束x值
	
	    // !!!每次重新绘制,先把数据复原,确保在原本数据基础上重新绘制
	    var nums1 = {{ cgg_data.line1|safe }}; //django渲染的线1 列表数据(原生数据)
	    nums1.forEach((item, index) => {
	        nums1[index] = parseFloat(nums1[index])
	    })
	    var nums2 = {{ cgg_data.line2|safe }}; //django渲染的线2 列表数据(原生数据)
	    nums2.forEach((item, index) => {
	        nums2[index] = parseFloat(nums2[index])
	    })
	    var new_y1_data = nums1  // 第一条线数据初始化
	    var new_y2_data = nums2  // 第二条线数据初始化
	    var new_x_data = xAxis.data  // x轴日期数据初始化
	    // 依据公式 逐个替换 start 到 end 之间的数据
		
	    for(let i=start_id;i<end_id;i++){
	        new_x_data[i]=xAxis.data[i]  // x轴数据逐个替换
	        data1=(...公式1....)*100  //线1数据逐个计算
	        new_y1_data[i]=data1  //线1数据逐个替换
	        data2=(...公式2....)*100  //线2数据逐个计算
	        new_y2_data[i]=data2  //线2数据逐个替换
	    }
	    new_y1_data[start_id-1]=0;  //!防止echarts百分比位置显示 导致绘制的折线异常,干脆修改start前一个数据
	    new_y2_data[start_id-1]=0;  //!防止echarts百分比位置显示 导致绘制的折线异常,干脆修改start前一个数据
	    //new_y1_data[end_id-1]=0;  //!防止echarts百分比位置显示 导致绘制的折线异常,干脆修改end后一个数据
	    {#option.xAxis[0].data=new_x_data;#}
	    option.series[0].data=new_y1_data;  //设置重新计算后的数据
	    option.series[1].data=new_y2_data;  //设置重新计算后的数据
	    option.dataZoom[0].start=start;   //设置echarts显示的起始位置
	    option.dataZoom[0].end=end;  //设置echarts显示的结束位置
	    myChart.clear();  //!!清理掉之前使用的option
	    myChart.setOption(option, true);  // 重新绘制echarts
	}
</script>