AntV使用记录

	           this.chart = new Chart({
					container : "sectionViewChart",
					autoFit : true,
					height : chartHeight,
					padding : [10, 20, 50, 50],
					limitInPlot : true
				});
				this.chart.data(this.chartData);//data格式是JSON格式的数组对象
				this.chart.scale({
					pipeline : {
						alias : "管线号"
					},
					x : {
						// 定义别名
						alias : "x",
						// 自定义刻度间距
						tickInterval : 0.2,
						// 自定义最大值
						max : this.boundaryValueObj.maxX,

						// 自定义最小值
						min : this.boundaryValueObj.minX
					},
					y : {
						alias : "Y",
						max : this.boundaryValueObj.maxY,
						min : this.boundaryValueObj.minY
					},
					z : {
						alias : "半径"
					}
				});
				// 开始配置坐标轴
				this.chart.axis("x", {
					label : {
						// 格式化坐标轴显示文本
						formatter : val => {
							return val;
						}
					},
					grid : {
						line : {
							style : {
								stroke : "#d9d9d9",
								lineWidth : 1,
								lineDash : [2, 2],
                                
							}
						}
					}
				});
				this.chart.axis("y", {
					title : {
						offset : 64
					},
					label : {
						formatter : val => {
							return val;
						}
					}
				});
				this.chart.legend(false);//图例不显示
				this.chart.tooltip({
					title : "pipeline"
				});
				this.chart
					.point()
					.position("x*y")
					.color("#FFF")//圆的填充色
					.size("z", [10, 40])
					.label("number", {
						offset : 30, // 文本距离图形的距离
						style : {
							fill : "#47433b",
							stroke : "#47433b",//圆里的文字颜色
							lineWidth : 1

						}

					})
					.shape("circle")
					.tooltip("pipeline*z")
					.style("state", (val) => {
						if (val === "投用") {
							return {
								lineWidth : 2,
								stroke : "#00b050",//圆的边框颜色
								fillOpacity : 0.3
							};
						}
						return {
							lineWidth : 2,
							stroke : "#ff3939",//圆的边框颜色
							fillOpacity : 0.3
						};
					});
				this.chart.annotation().region({
					start : ["0%", "0%"],
					end : ["100%", "100%"],
					style : {
						lineWidth : 1,
						fillOpacity : 0,
						strokeOpacity : 1,
						stroke : "#545454"
					}
				});
				// chart.interaction('element-single-selected', {
				//     start: [{ trigger: 'element:click', action: 'element-single-selected:toggle' }],
				// });
               
				this.chart.interaction("view-zoom", {
					type : "XY", // 设置缩放的类型，'X' x 轴方向缩放, 'Y' y 轴方向缩放, 'XY' x 和 y 轴同时缩放
					stepRatio : 0.1, // 控制缩放速度，默认值 0.05
					minScale : -1, // 最小缩放比例，默认值 1
					maxScale : -4, // 最大缩放比例，默认值 4
					// catStep: 2 // 分类数据的缩放速度，默认值 2
                    //缩放方向默认和浏览器相反,在此修改方向
					start : [
						{
							trigger : "plot:mousewheel",
							isEnable(context) {
								return isWheelDown(context.event);
							},
							action : "scale-zoom:zoomIn",
							throttle : {wait : 100, leading : true, trailing : false}
						},
						{
							trigger : "plot:mousewheel",
							isEnable(context) {
								return !isWheelDown(context.event);
							},
							action : "scale-zoom:zoomOut",
							throttle : {wait : 100, leading : true, trailing : false}
						}
					]
				});
				this.chart.render();
				this.chart.getCanvas().on("mousewheel", ev => {
					ev.preventDefault();
				});
                //点击事件
				this.chart.on("point:click", async (ev) => {
					const pointElement = ev.target.get("element");
					const data = pointElement.getModel().data;
					//拿到数据之后的操作
				});
				

导出图片（在4.x之后需要自己封装）

	/**
			 * 返回图表的 dataURL 用于生成图片。
			 * @param chart 需要获取 DataURL 的 chart 实例
			 * @returns 返回图表的 dataURL
			 */
			toDataURL(chart) {
				const canvas = chart.getCanvas();
				const renderer = chart.renderer;
				const canvasDom = canvas.get("el");
				let dataURL = "";
				if (renderer === "svg") {
					const clone = canvasDom.cloneNode(true);
					const svgDocType = document.implementation.createDocumentType(
						"svg",
						"-//W3C//DTD SVG 1.1//EN",
						"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
					);
					const svgDoc = document.implementation.createDocument("http://www.w3.org/2000/svg", "svg", svgDocType);
					svgDoc.replaceChild(clone, svgDoc.documentElement);
					const svgData = new XMLSerializer().serializeToString(svgDoc);
					dataURL = "data:image/svg+xml;charset=utf8," + encodeURIComponent(svgData);
				} else if (renderer === "canvas") {
					dataURL = canvasDom.toDataURL("image/png");
				}
				return dataURL;
			},


              //使用，在图表生成后，导出图片
				setTimeout(() => {
					this.chartUrl = this.toDataURL(this.chart);
					// console.log(dataUrl);
				}, 1500);

因为项目中需要图纸和列表切换，所以需要控制canvas标签的显隐来切换

	$("#sectionViewChart").find("canvas").show();
    $("#sectionViewChart").find("canvas").hide();