项目要点
- 1.使用如何注册地理坐标图；
- 2.带有起点和终点信息的线数据的路径图的使用；
- 3.使用富文本表现文本框；
- 4.多组数据在文本内如何使用 formatter回调函数；
- 5.区域鼠标事件变化文本框样式；
geoJSON数据
调用geoJSON，设置区域中心点坐标和显示文本框位置的经纬度坐标；
myChart.showLoading(); var uploadedDataURL = "/asset/get/s/data-1593486529294-SRyGZ7brP.json"; const COORDS_LINE = { '海淀区': [ [116.301234,39.967085], [117.2, 39.94] ], '丰台区': [ [116.283699,39.866367], [115.6, 40.8] ] }
展示数据
let data = [{ name: '海淀区', value: 500, group: '隆科多' }, { name: '丰台区', value: 600, group: '成文运' }];
注册地图
$.getJSON(uploadedDataURL, function(geoJson) { echarts.registerMap('beijing', geoJson); handleChangeOption(); myChart.hideLoading(); });
核心代码
function handleChangeOption() { option = { backgroundColor: '#ccc', series: [{ type: 'map', zoom: 1.2, z: 2, mapType: 'beijing', label: { show: false }, emphasis: { label: { show: false }, itemStyle: { borderColor: '#EBF3F3', borderWidth: 2, areaColor: '#fff' } }, itemStyle: { borderColor: '#ccc', borderWidth: 2, areaColor: '#fff' }, data: data }, { type: 'lines', z: 3, coordinateSystem: 'geo', symbol: 'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7', symbolSize: [10,0],//只保留地图端标记 opacity: 1, label: { show: true, position: 'end', formatter: function(params) {//文本提示框 return '{title|' + params.name + '}\n{value| 成员人数：' + params.value + '}\n{value| 责任人：' + params.data.group + '}' }, backgroundColor: '#eee', borderColor: '#FF0033', borderWidth: 1, borderRadius: 4, align: 'center', width: 100, rich: { //标题样式 title: { align: 'center', lineHeight: 17, fontSize: 12, color: '#fff', backgroundColor: '#FF0033', width: 100, height: 25, borderRadius: [4, 4, 0, 0] }, value: { //内容样式 height: 25, width: 100, color: '#FF0033', backgroundColor: '#fff', borderRadius: [0, 0, 4, 4] } } }, lineStyle: { //视觉引导线属性 type: 'solid', opacity: 1, color: '#FF0033', //引导线颜色 curveness: 0.1 }, data: data.map((item) => { let label = {}; if (item.name === activeAreaName) { let width = 92; label = { formatter: function(params) { return '{title|' + params.name + '}\n{value| 成员人数：' + params.value + '}\n{value| 责任人：' + params.data.group + '}' }, backgroundColor: '#FFB569', borderColor: '#FFB569', width: 100, rich: { title_active: { align: 'center', lineHeight: 17, fontSize: 12, color: '#fff', backgroundColor: '#FFB569', width: 100, height: 25, borderRadius: [4, 4, 0, 0] }, value_active: { height: 25, width: 100, color: '#FFB569', backgroundColor: '#fff', borderRadius: [0, 0, 4, 4] } } }; } return Object.assign({ coords: COORDS_LINE[item.name], label }, item); }) } ], geo: { geoIndex: 1, map: 'beijing', label: { show: false }, zoom: 1.2 } }; myChart.setOption(option, true); }
鼠标事件
//鼠标事件; let activeAreaName = ''; myChart.on('mouseover', ({ name }) => { if (activeAreaName !== name) { activeAreaName = name; handleChangeOption(); } }) myChart.on('globalout', () => { activeAreaName = ''; handleChangeOption(); });
LOCKDATAV DONE！
