图表代码已注释,需要用echart4.0才能访问。
缩放geo时取到的zoom能否与百度地图的zoom同步,目前当百度地图的zoom值为16时,geo的zoom为1050左右。有没有什么转换的方法。
配置项如下
// var AIRPORT_IMG_SRC = 'http://192.168.0.115:6060/imagepps/ReportServer.png';
// //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
// let warpheight;
// let warpwidth;
// let zoom = 1;
// const resizeWorldMapContainer = function() {
// warpheight = window.innerHeight;
// warpwidth = window.innerWidth;
// };
// var COORD_WIDTH = 800;
// var COORD_HEIGHT = 368;
// // 定义数组
// let XYdata = [];
// let Xdata = [];
// let Ydata = [];
// let genData = [];
// //点击事件相关方法
// //点击获取点在X轴的位置
// const xcol = function(params) {
// Xdata.push((params.value).toFixed(2));
// let a;
// console.log(Xdata)
// for (let i = 0; i < Xdata.length; i++) {
// XYdata[i] = [Xdata[i], Ydata[i]];
// //a=myChart.convertToPixel({seriesIndex: 1},XYdata[i]);
// //console.log(XYdata[i]);
// a = myChart.convertToPixel({
// xAxisIndex: 0,
// yAxisIndex: 0
// }, XYdata[i]);
// genData[i] = myChart.convertFromPixel('geo', a);
// // console.log({a,11:genData[i]});
// }
// console.log(XYdata);
// console.log(genData);
// };
// //点击获取点在Y轴的位置
// const ycol = function(params) {
// Ydata.push((params.value).toFixed(2));
// };
// echarts.registerMap('airport', {
// type: 'FeatureCollection',
// features: [{
// geometry: {
// type: 'Polygon',
// coordinates: [
// [
// [0, 0],
// [COORD_WIDTH, 0],
// [COORD_WIDTH, COORD_HEIGHT],
// [0, COORD_HEIGHT]
// ]
// ]
// },
// properties: {
// name: 'Afghanistan',
// childNum: 1
// }
// }]
// });
// option = {
// tooltip: {
// backgroundColor: 'rgba(255,255,255,0.8)',
// borderColor: '#333',
// borderWidth: 1,
// textStyle: {
// color: '#333'
// },
// show: true,
// trigger: 'none',
// axisPointer: {
// type: 'cross'
// },
// triggerOn: 'click',
// },
// "bmap": {
// "map": "china",
// "roam": false,
// center: [0, 0],
// "left": 10,
// "right": 10,
// "top": 10,
// "bottom": 10,
// "scaleLimit": {
// "min": 1
// },
// zoom: 5,
// },
// geo: {
// map: 'china',
// roam: true,
// //zoom:1,
// // itemStyle: {
// // normal: {
// // areaColor: 'transparent',
// // borderColor: 'transparent'
// // },
// // emphasis: {
// // areaColor: 'transparent'
// // }
// // }
// },
// grid: {
// // top: 0,
// // right: 0,
// // bottom: 0,
// // left: 0,
// },
// //直角坐标系 grid 中的 x 轴
// xAxis: {
// min: 0,
// max: 100,
// type: 'value',
// axisPointer: {
// label: {
// formatter: function(params) {
// xcol(params);
// }
// }
// },
// splitLine: {
// show: true
// },
// axisTick: {
// show: true
// },
// axisLine: {
// show: true
// },
// axisLabel: {
// show: true
// }
// },
// //直角坐标系 grid 中的 y 轴
// yAxis: {
// min: 0,
// max: 100,
// type: 'value',
// splitLine: {
// show: true
// },
// axisTick: {
// show: true
// },
// axisLine: {
// show: true
// },
// axisLabel: {
// show: true
// },
// axisPointer: {
// label: {
// formatter: function(params) {
// ycol(params);
// }
// }
// },
// },
// series: [{
// type: 'custom',
// id: 'airport',
// coordinateSystem: 'geo',
// renderItem: function(params, api) {
// var lt = api.coord([0, 0]);
// var rb = api.coord([COORD_WIDTH, COORD_HEIGHT]);
// return {
// type: 'image',
// style: {
// image: AIRPORT_IMG_SRC,
// x: lt[0],
// y: lt[1],
// width: rb[0] - lt[0],
// height: rb[1] - lt[1]
// }
// };
// },
// data: [
// [0, 0]
// ]
// },
// {
// name: 'all',
// type: 'scatter',
// symbol: 'circle',
// symbolSize: 12,
// coordinateSystem: 'geo',
// geoIndex: 0,
// label: {
// normal: {
// },
// },
// data: [
// [7938.172642211291, 1664.4527984328497]
// ]
// }
// ]
// };
// myChart.on('click', function(params) {
// // 控制台打印数据的名称
// });
// window.setInterval(function() {
// option.series[1].data = genData;
// //console.log(option)
// myChart.setOption(option);
// }, 1000);
// myChart.on("georoam", (params) => {
// let center_ = _.get(myChart.getOption(), "geo[0].center", [0, 0]),
// zoom_ = _.get(myChart.getOption(), "geo[0].zoom", 1);
// console.log("center_")
// console.log(center_)
// option.bmap.center = center_
// console.log(zoom_)
// option.bmap.zoom = zoom_ + 4
// console.log(option)
// myChart.setOption(option)
// });