cd-smallBear opened a new issue #9202: lines 线不显示的问题（迁徙lines） URL: https://github.com/apache/incubator-echarts/issues/9202 <!-- 为了方便我们能够复现和修复 bug，请遵从下面的规范描述您的问题。 --> ### One-line summary [问题简述] 设置series : lines 后，数据更新后再 用setOption 设置 setires 后，没有lines线条 ，必须刷新重绘，才会正常显示 lines ### Version & Environment [版本及环境] + ECharts version [ECharts 版本]: 4.01 + Browser version [浏览器类型和版本]: chrome + OS Version [操作系统类型和版本]: ### Expected behaviour [期望结果] 刷新后，当我再次点击中国时，lines 线，可以重绘 ### ECharts option [ECharts配置项] <!-- Copy and paste your 'echarts option' here. --> <!-- [下方贴你的option，注意不要删掉下方 ```javascript 和 尾部的 ``` 字样。最好是我们能够直接运行的 option。如何得到能运行的 option 参见上方的 guidelines for contributing] --> ```javascript var zhongguo = "/asset/get/s/data-1528971808162-BkOXf61WX.json"; var hainan = "/asset/get/s/data-1528971693521-r18nZaybm.json"; var xizang = "/asset/get/s/data-1528970391616-BJeoh2JW7.json"; var zhejiang = "/asset/get/s/data-1528970380661-SkH93h1-m.json"; var yunnan = "/asset/get/s/data-1528970362114-r1MK321WQ.json"; var xinjiang = "/asset/get/s/data-1528970349852-H18u22kWX.json"; var tianjin = "/asset/get/s/data-1528970339987-Hk2wnh1ZX.json"; var sichuan = "/asset/get/s/data-1528970319531-Hy_8n3y-m.json"; var shanxi = "/asset/get/s/data-1528970298351-HyzB32JZ7.json"; var shangxi = "/asset/get/s/data-1528970273819-B1cmnnk-Q.json"; var shanghai = "/asset/get/s/data-1528970254015-HJLfhnyWX.json"; var shangdong = "/asset/get/s/data-1528970240242-Byu-hhybX.json"; var qinghai = "/asset/get/s/data-1528970209434-Bytyh3kZ7.json"; var ningxia = "/asset/get/s/data-1528970150882-SJJ2j2yWQ.json"; var neimenggu = "/asset/get/s/data-1528970102554-HyJKo31bQ.json"; var liaoning = "/asset/get/s/data-1528970052404-BJhHihkbQ.json"; var jilin = "/asset/get/s/data-1528970024458-rkeEjhy-Q.json"; var jiangxi = "/asset/get/s/data-1528969991368-BkkMi31Zm.json"; var jiangsu = "/asset/get/s/data-1528969864934-BJ-qchkWQ.json"; var hunan = "/asset/get/s/data-1528969831328-Sykuqh1bX.json"; var hubei = "/asset/get/s/data-1528969822119-Bk8v93kZ7.json"; var henan = "/asset/get/s/data-1528969802719-HyXIqhk-m.json"; var heilongjiang = "/asset/get/s/data-1528969789631-ryLHcnJbm.json"; var hebei = "/asset/get/s/data-1528969737020-HJWMqhy-Q.json"; var guizhou = "/asset/get/s/data-1528969712502-Hy_g92yZQ.json"; var guangxi = "/asset/get/s/data-1528969706270-HJMg5hkWQ.json"; var guangdong = "/asset/get/s/data-1528969700634-BkT1qn1WQ.json"; var gansu = "/asset/get/s/data-1528969694316-BJLkc2yZX.json"; var chongqing = "/asset/get/s/data-1528969687660-r1ey9nkbX.json"; var aomen = "/asset/get/s/data-1528969612486-rJ4qtnyZm.json"; var anhui = "/asset/get/s/data-1528969607452-Hkk5tnJ-Q.json"; var beijing = "/asset/get/s/data-1528969604941-Hk6Ytn1WQ.json"; var fujian = "/asset/get/s/data-1528969599839-S1OFFn1ZQ.json"; var xianggang = "/asset/get/s/data-1528969589857-S1ROthJWm.json"; var optionClone = null; echarts.extendsMap = function(id, opt) { // 实例 var chart = this.init(document.getElementById(id)); var curGeoJson = {}; var cityMap = { '中国': zhongguo, '上海': shanghai, '河北': hebei, '山西': shangxi, '内蒙古': neimenggu, '辽宁': liaoning, '吉林': jilin, '黑龙江': heilongjiang, '江苏': jiangsu, '浙江': zhejiang, '安徽': anhui, '福建': fujian, '江西': jiangxi, '山东': shangdong, '河南': henan, '湖北': hubei, '湖南': hunan, '广东': guangdong, '广西': guangxi, '海南': hainan, '四川': sichuan, '贵州': guizhou, '云南': yunnan, '西藏': xizang, '陕西': shanxi, '甘肃': gansu, '青海': qinghai, '宁夏': ningxia, '新疆': xinjiang, '北京': beijing, '天津': tianjin, '重庆': chongqing, '香港': xianggang, '澳门': aomen }; var convertData = function (data) { console.log(data); var res = []; for (var i = 0; i < data.length; i++) { var dataItem = data[i]; var fromCoord = geoCoordMap[dataItem[0].name]; var toCoord = geoCoordMap[dataItem[1].name]; if (fromCoord && toCoord) { res.push({ fromName: dataItem[0].name, toName: dataItem[1].name, coords: [fromCoord, toCoord], value: dataItem[1].value }); } } return res; }; var _series = [] var SHData = [ [{name:'上海'},{name:'包头',value:95}], [{name:'上海'},{name:'昆明',value:90}], [{name:'上海'},{name:'广州',value:80}], [{name:'上海'},{name:'郑州',value:70}], [{name:'上海'},{name:'长春',value:60}], [{name:'上海'},{name:'重庆',value:50}], [{name:'上海'},{name:'长沙',value:40}], [{name:'上海'},{name:'北京',value:30}], [{name:'上海'},{name:'丹东',value:20}], [{name:'上海'},{name:'大连',value:10}] ]; var geoCoordMap = { '上海': [121.4648,31.2891], '东莞': [113.8953,22.901], '东营': [118.7073,37.5513], '中山': [113.4229,22.478], '临汾': [111.4783,36.1615], '临沂': [118.3118,35.2936], '丹东': [124.541,40.4242], '丽水': [119.5642,28.1854], '乌鲁木齐': [87.9236,43.5883], '佛山': [112.8955,23.1097], '保定': [115.0488,39.0948], '兰州': [103.5901,36.3043], '包头': [110.3467,41.4899], '北京': [116.4551,40.2539], '北海': [109.314,21.6211], '南京': [118.8062,31.9208], '南宁': [108.479,23.1152], '南昌': [116.0046,28.6633], '南通': [121.1023,32.1625], '厦门': [118.1689,24.6478], '台州': [121.1353,28.6688], '合肥': [117.29,32.0581], '呼和浩特': [111.4124,40.4901], '咸阳': [108.4131,34.8706], '哈尔滨': [127.9688,45.368], '唐山': [118.4766,39.6826], '嘉兴': [120.9155,30.6354], '大同': [113.7854,39.8035], '大连': [122.2229,39.4409], '天津': [117.4219,39.4189], '太原': [112.3352,37.9413], '威海': [121.9482,37.1393], '宁波': [121.5967,29.6466], '宝鸡': [107.1826,34.3433], '宿迁': [118.5535,33.7775], '常州': [119.4543,31.5582], '广州': [113.5107,23.2196], '廊坊': [116.521,39.0509], '延安': [109.1052,36.4252], '张家口': [115.1477,40.8527], '徐州': [117.5208,34.3268], '德州': [116.6858,37.2107], '惠州': [114.6204,23.1647], '成都': [103.9526,30.7617], '扬州': [119.4653,32.8162], '承德': [117.5757,41.4075], '拉萨': [91.1865,30.1465], '无锡': [120.3442,31.5527], '日照': [119.2786,35.5023], '昆明': [102.9199,25.4663], '杭州': [119.5313,29.8773], '枣庄': [117.323,34.8926], '柳州': [109.3799,24.9774], '株洲': [113.5327,27.0319], '武汉': [114.3896,30.6628], '汕头': [117.1692,23.3405], '江门': [112.6318,22.1484], '沈阳': [123.1238,42.1216], '沧州': [116.8286,38.2104], '河源': [114.917,23.9722], '泉州': [118.3228,25.1147], '泰安': [117.0264,36.0516], '泰州': [120.0586,32.5525], '济南': [117.1582,36.8701], '济宁': [116.8286,35.3375], '海口': [110.3893,19.8516], '淄博': [118.0371,36.6064], '淮安': [118.927,33.4039], '深圳': [114.5435,22.5439], '清远': [112.9175,24.3292], '温州': [120.498,27.8119], '渭南': [109.7864,35.0299], '湖州': [119.8608,30.7782], '湘潭': [112.5439,27.7075], '滨州': [117.8174,37.4963], '潍坊': [119.0918,36.524], '烟台': [120.7397,37.5128], '玉溪': [101.9312,23.8898], '珠海': [113.7305,22.1155], '盐城': [120.2234,33.5577], '盘锦': [121.9482,41.0449], '石家庄': [114.4995,38.1006], '福州': [119.4543,25.9222], '秦皇岛': [119.2126,40.0232], '绍兴': [120.564,29.7565], '聊城': [115.9167,36.4032], '肇庆': [112.1265,23.5822], '舟山': [122.2559,30.2234], '苏州': [120.6519,31.3989], '莱芜': [117.6526,36.2714], '菏泽': [115.6201,35.2057], '营口': [122.4316,40.4297], '葫芦岛': [120.1575,40.578], '衡水': [115.8838,37.7161], '衢州': [118.6853,28.8666], '西宁': [101.4038,36.8207], '西安': [109.1162,34.2004], '贵阳': [106.6992,26.7682], '连云港': [119.1248,34.552], '邢台': [114.8071,37.2821], '邯郸': [114.4775,36.535], '郑州': [113.4668,34.6234], '鄂尔多斯': [108.9734,39.2487], '重庆': [107.7539,30.1904], '金华': [120.0037,29.1028], '铜川': [109.0393,35.1947], '银川': [106.3586,38.1775], '镇江': [119.4763,31.9702], '长春': [125.8154,44.2584], '长沙': [113.0823,28.2568], '长治': [112.8625,36.4746], '阳泉': [113.4778,38.0951], '青岛': [120.4651,36.3373], '韶关': [113.7964,24.7028] }; var color = ['#a6c84c', '#ffa022', '#46bee9']; [['上海', SHData]].forEach(function (item, i) { //console.log(item,i); _series.push({ name: item[0] + ' Top10', type: 'lines', zlevel: 1, effect: { show: true, period: 6, trailLength: 0.7, color: '#fff', symbolSize: 3 }, lineStyle: { normal: { color: color[i], width: 0, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0] + ' Top10', type: 'lines', zlevel: 2, // symbol: ['none', 'arrow'], // symbolSize: 10, effect: { show: true, period: 6, trailLength: 0, // symbol: planePath, // symbolSize: 15 }, lineStyle: { normal: { color: color[i], width: 1, opacity: 0.6, curveness: 0.2 } }, data: convertData(item[1]) }, { name: item[0] + ' Top10', type: 'effectScatter', coordinateSystem: 'geo', zlevel: 2, rippleEffect: { brushType: 'stroke' }, label: { normal: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: function (val) { return val[2] / 8; }, itemStyle: { normal: { color: color[i] } }, data: item[1].map(function (dataItem) { return { name: dataItem[1].name, value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value]) }; }) }); }); var levelColorMap = { '1': 'rgba(241, 109, 115, .8)', '2': 'rgba(255, 235, 59, .7)', '3': 'rgba(147, 235, 248, 1)' }; var defaultOpt = { mapName: 'china', // 地图展示 goDown: false, // 是否下钻 bgColor: '#404a59', // 画布背景色 activeArea: [], // 区域高亮,同echarts配置项 data: [], // 下钻回调(点击的地图名、实例对象option、实例对象) callback: function(name, option, instance) {} }; if (opt) opt = this.util.extend(defaultOpt, opt); // 层级索引 var name = [opt.mapName]; var idx = 0; var pos = { leftPlus: 115, leftCur: 150, left: 198, top: 50 }; var line = [ [0, 0], [8, 11], [0, 22] ]; // style var style = { font: '18px "Microsoft YaHei", sans-serif', textColor: '#eee', lineColor: 'rgba(147, 235, 248, .8)' }; var handleEvents = { /** * i 实例对象 * o option * n 地图名 **/ resetOption: function(i, o, n) { var breadcrumb = this.createBreadcrumb(n); var j = name.indexOf(n); var l = o.graphic.length; if (j < 0) { o.graphic.push(breadcrumb); o.graphic[0].children[0].shape.x2 = 145; o.graphic[0].children[1].shape.x2 = 145; if (o.graphic.length > 2) { var cityData = []; var cityJson; for (var x = 0; x < opt.data.length; x++) { // if(n === opt.data[x].city){ // $([opt.data[x]]).each(function(index,data){ // cityJson = {city:data.city,name:data.name,value:data.value,crew:data.crew,company:data.company,position:data.position,region:data.region}; // cityData.push(cityJson) // }) // } } if(cityData!=null){ // o.series[0].data = handleEvents.initSeriesData(cityData); }else{ o.series[0].data = []; } } name.push(n); idx++; } else { o.graphic.splice(j + 2, l); if (o.graphic.length <= 2) { o.graphic[0].children[0].shape.x2 = 60; o.graphic[0].children[1].shape.x2 = 60; // o.series[0].data = handleEvents.initSeriesData(opt.data); }; name.splice(j + 1, l); idx = j; pos.leftCur -= pos.leftPlus * (l - j - 1); }; if( n == "中国") { o = optionClone }else{ o.series = [] } o.geo.map = n; o.geo.zoom = 0.4; i.clear(); i.setOption(o); this.zoomAnimation(); opt.callback(n, o, i); }, /** * name 地图名 **/ createBreadcrumb: function(name) { var cityToPinyin = { '中国': 'zhongguo', '上海': 'shanghai', '河北': 'hebei', '山西': 'shangxi', '内蒙古': 'neimenggu', '辽宁': 'liaoning', '吉林': 'jilin', '黑龙江': 'heilongjiang', '江苏': 'jiangsu', '浙江': 'zhejiang', '安徽': 'anhui', '福建': 'fujian', '江西': 'jiangxi', '山东': 'shangdong', '河南': 'henan', '湖北': 'hubei', '湖南': 'hunan', '广东': 'guangdong', '广西': 'guangxi', '海南': 'hainan', '四川': 'sichuan', '贵州': 'guizhou', '云南': 'yunnan', '西藏': 'xizang', '陕西': 'shanxi', '甘肃': 'gansu', '青海': 'qinghai', '宁夏': 'ningxia', '新疆': 'xinjiang', '北京': 'beijing', '天津': 'tianjin', '重庆': 'chongqing', '香港': 'xianggang', '澳门': 'aomen' }; var breadcrumb = { type: 'group', id: name, left: pos.leftCur + pos.leftPlus, top: pos.top + 3, children: [{ type: 'polyline', left: -90, top: -5, shape: { points: line }, style: { stroke: '#fff', key: name // lineWidth: 2, }, onclick: function() { var name = this.style.key; handleEvents.resetOption(chart, option, name); } }, { type: 'text', left: -68, top: 'middle', style: { text: name, textAlign: 'center', fill: style.textColor, font: style.font }, onclick: function() { var name = this.style.text; handleEvents.resetOption(chart, option, name); } }, { type: 'text', left: -68, top: 10, style: { name: name, text: cityToPinyin[name] ? cityToPinyin[name].toUpperCase() : '', textAlign: 'center', fill: style.textColor, font: '12px "Microsoft YaHei", sans-serif', }, onclick: function() { // console.log(this.style); var name = this.style.name; handleEvents.resetOption(chart, option, name); } }] } pos.leftCur += pos.leftPlus; return breadcrumb; }, // 设置effectscatter initSeriesData: function(data) { var temp = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { temp.push({ name: data[i].name, value: geoCoord.concat(data[i].value), crew:data[i].crew, company:data[i].company, position:data[i].position, region:data[i].region }); } }; return temp; }, zoomAnimation: function() { var count = null; var zoom = function(per) { if (!count) count = per; count = count + per; // console.log(per,count); chart.setOption({ geo: { zoom: count } }); if (count < 1) window.requestAnimationFrame(function() { zoom(0.2); }); }; window.requestAnimationFrame(function() { zoom(0.2); }); } }; var option = { backgroundColor: opt.bgColor, tooltip: { show: true, trigger:'item', alwaysShowContent:false, backgroundColor:'rgba(50,50,50,0.7)', hideDelay:100, triggerOn:'mousemove', enterable:true, position:['60%','70%'], formatter:function(params, ticket, callback){ return '简称：'+params.data.name+'<br/>'+'机组：'+params.data.crew+'万千瓦'+'<br/>'+'公司名称：'+params.data.company+'<br/>'+'所属大区：'+params.data.region+'<br/>'+'所在位置：'+params.data.position } }, graphic: [{ type: 'group', left: pos.left, top: pos.top - 4, children: [{ type: 'line', left: 0, top: -20, shape: { x1: 0, y1: 0, x2: 60, y2: 0 }, style: { stroke: style.lineColor, } }, { type: 'line', left: 0, top: 20, shape: { x1: 0, y1: 0, x2: 60, y2: 0 }, style: { stroke: style.lineColor, } }] }, { id: name[idx], type: 'group', left: pos.left + 2, top: pos.top, children: [{ type: 'polyline', left: 90, top: -12, shape: { points: line }, style: { stroke: 'transparent', key: name[0] }, onclick: function() { var name = this.style.key; handleEvents.resetOption(chart, option, name); } }, { type: 'text', left: 0, top: 'middle', style: { text: '中国', textAlign: 'center', fill: style.textColor, font: style.font }, onclick: function() { handleEvents.resetOption(chart, option, '中国'); } }, { type: 'text', left: 0, top: 10, style: { text: 'China', textAlign: 'center', fill: style.textColor, font: '12px "Microsoft YaHei", sans-serif', }, onclick: function() { handleEvents.resetOption(chart, option, '中国'); } }] }], geo: { map: opt.mapName, roam: true, zoom: 1, label: { normal: { show: true, textStyle: { color: '#fff' } }, emphasis: { textStyle: { color: '#fff' } } }, itemStyle: { normal: { borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 1, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, shadowColor: 'rgba(128, 217, 248, 1)', // shadowColor: 'rgba(255, 255, 255, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } }, regions: opt.activeArea.map(function(item) { if (typeof item !== 'string') { return { name: item.name, itemStyle: { normal: { areaColor: item.areaColor || '#389BB7' } }, label: { normal: { show: item.showLabel, textStyle: { color: '#fff' } } } } } else { return { name: item, itemStyle: { normal: { borderColor: '#91e6ff', areaColor: '#389BB7' } } } } }) }, series: _series // [ // { // type: 'effectScatter', // coordinateSystem: 'geo', // showEffectOn: 'render', // rippleEffect: { // period:15, // scale: 4, // brushType: 'fill' // }, // hoverAnimation: true, // itemStyle: { // normal: { // color: '#FFC848', // shadowBlur: 10, // shadowColor: '#333' // } // }, // data: handleEvents.initSeriesData(opt.data) // } // ] }; optionClone = JSON.parse( JSON.stringify(option) ) chart.setOption(option); // 添加事件 chart.on('click', function(params) { var _self = this; if (opt.goDown && params.name !== name[idx]) { if (cityMap[params.name]) { var url = cityMap[params.name]; $.get(url, function(response) { //console.log(response); curGeoJson = response; echarts.registerMap(params.name, response); handleEvents.resetOption(_self, option, params.name); }); } } }); chart.setMap = function(mapName) { var _self = this; if (mapName.indexOf('市') < 0) mapName = mapName + '市'; var citySource = cityMap[mapName]; if (citySource) { var url = './map/' + citySource + '.json'; $.get(url, function(response) { // console.log(response); curGeoJson = response; echarts.registerMap(mapName, response); handleEvents.resetOption(_self, option, mapName); }); } }; return chart; }; $.getJSON(zhongguo, function(geoJson) { echarts.registerMap('中国', geoJson); var myChart = echarts.extendsMap('chart-panel', { bgColor: '#154e90', // 画布背景色 mapName: '中国', // 地图名 text:'火电业务', goDown: true, // 是否下钻 // 下钻回调 callback: function(name, option, instance) { //console.log(name, option, instance); }, // 数据展示 data:[] }); }) /*分享需要的json数据：https://share.weiyun.com/5x12K4r*/ ``` ### Other comments [其他信息] <!-- For example: Screenshot or Online demo --> <!-- [例如，截图或线上实例 (JSFiddle/JSBin/Codepen)] -->
---------------------------------------------------------------- This is an automated message from the Apache Git Service. To respond to the message, please log on GitHub and use the URL above to go to the specific comment. For queries about this service, please contact Infrastructure at: [email protected] With regards, Apache Git Services --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
