ecomfe / echarts-gl Goto Github PK
View Code? Open in Web Editor NEWExtension pack for Apache ECharts, providing globe visualization and 3D plots.
License: BSD 3-Clause "New" or "Revised" License
Extension pack for Apache ECharts, providing globe visualization and 3D plots.
License: BSD 3-Clause "New" or "Revised" License
Just found some nice globe examples for inspiration: https://www.behance.net/gallery/7568679/Earth-Research-v01
One thing that might be nice is to be able to render meridian and parallel lines and potentially spheric polygons as well?
目前我依赖了var ecConfig = require('echarts/config');这个扩展包。
绑定方法如下:
myChart.on(ecConfig.EVENT.CLICK, function (param) {
console.info(param);
console.log(param.name);
window.open('showpage.html');
});
这种方式现在只是绑定到地图区块上。
请问我有这样一个数组对象,代表坐标的经纬度。应该怎么绑定事件呢?
[{
name: '#1 Machu Picchu, Machu Picchu, Peru',
geoCoord: [-72.544963, -13.163141]
}, {
name: '#2 Angkor Wat, Siem Reap, Cambodia',
geoCoord: [103.866986, 13.412469]
}, {
name: '#3 Taj Mahal, Agra, India',
geoCoord: [78.042155, 27.175015]
}, {
name: '#4 Petra World Heritage Site, Wadi Musa, Jordan',
geoCoord: [35.4428063, 30.3251545]
},
目前底图纹理用的单张 jpg,放大之后锯齿挺重的。
有打算改用兼容 leaflet 底图源,根据旋转角度和放大级别来加载纹理吗?
下面两个引擎都支持:
P.S.
这个项目太赞了,实现了很多以前本菜想做做不出来的效果……
各位大神:markLine 线的粗细不可以调整吗?
我把源码下载到本地,zoom属性不起作用是怎么回事?也不报错误
和点国家名字不一样,想要点击Mark Point进行监听并响应应该怎么做?
如题,还有世界地图当某个国家没有数据时,可以显示成'-'吗?而非'NaN.undefined'?
Just started playing with echart-gl - amazing!!!
One thing I've noticed is that you can't load images from other domains, returns:
Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at xxxx may not be loaded.
Would it be possible to add img.crossOrigin = "Anonymous"; when loading images?
map3d 和 map2D 混合使用时,2d地图上的markpoint 炫光效果的颜色失效(全部是黑色)symbol:'emptyCircle',
比如 map3d_mix.html demo界面,给2d**地图上添加标注 markpoint ,使用 dataRange并启用漫游,markpoint 的炫光效果,颜色失效。
在同一个页面,单独初始化3D和2Dmap也解决不了。
markpoint 的effect 增加 color 属性可以解决问题,但是颜色只能使用单色。并且不会随dataRange的颜色变化。
PS:markpoint 的颜色优先级应该是:datarange < markpoint(itemStyle:color) < effect(color)
Hi, @pissang
首先要表达一下敬仰,这个库做的真心赞! 一定要找个时间好好学习一下。 😸
我注意到echarts-gl发布到npm上的文件比较多, 体积也比较大,除了dist目录, src目录也被发布到了npm上, 感觉有了dist,应该就不再需要src, 是否考虑把src从npm中去掉?
如题:
因为目前项目使用的是webpack 打包模式, 希望能支持npm install 安装, 可以吗?
看了echarts感觉非常不错,刚从highchart转向echarts,但从企业应用角度缺少一个常用的财务分析用的图:即杜邦分析图,希望能够在echarts中增加,这样就更完美了
One-line summary [问题简述]
echartsGL:3Dbar当data为Z轴负数时,3D柱状不会朝下
Version & Environment [版本及环境]
ECharts version [ECharts 版本]:echarts3.5.4.js和echarts-gl.min.js
Browser version [浏览器类型和版本]:goole 版本 57.0.2987.110 (64-bit)
OS Version [操作系统类型和版本]:wind8
Expected behaviour [期望结果]
echartsGL3Dbar支持负数数据像2D一样,可以跟正数是不同方向
ECharts option [ECharts配置项]
option = {
tooltip: {},
visualMap: {
max: 20,
min:-5,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
},
xAxis3D: {
axisLine : {onZero: true},
type: 'value',
data: hours
},
yAxis3D: {
axisLine : {onZero: true},
type: 'value',
data: days
},
zAxis3D: {
axisLine : {onZero: true},
type: 'value'
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
viewControl: {
// projection: 'orthographic'
},
light: {
main: {
intensity: 1.2,
shadow: true
},
ambient: {
intensity: 0.3
}
}
},
series: [{
type: 'bar3D',
data: data.map(function (item) {
return {
value: [item[1], item[0], item[2]],
}
}),
shading: 'lambert',
label: {
textStyle: {
fontSize: 16,
borderWidth: 1
}
},
emphasis: {
label: {
textStyle: {
fontSize: 20,
color: '#900'
}
},
itemStyle: {
color: '#900'
}
}
}]
}
Other comments [其他信息]
官网示例:http://gallery.echartsjs.com/editor.html?c=xrJ5XyZ5px
把官网示例的data第三个数据改成负数,就可以看到效果
echart-x点的控制感觉很无力,后面会更新吗?
data.airlines.forEach(function (item) {
var airlineName = item[0];
var routes = routesGroupByAirline[airlineName];
if (routes) {
opts.series.push({
type: 'map3d',
name: "",
markLine: {
effect: {
show: true,
scaleSize: 1
},
distance: 0,
itemStyle:{
normal: {
color: 'rgba(64, 224, 208, 1)',
width: 1,
opacity: 1
}
},
data:[[{"geoCoord":[113.5107,23.2196]},{"geoCoord":[91.1865,30.1465]}]]
}
});
}
});
myChart.setOption(opts);
myChart.hideLoading();
我试着myChart.addMarkLine(0,tmp); 但是不行 提示"cannot read property series of undefined"
tmp={
effect: {
show: true,
scaleSize: 1
},
distance: 0,
itemStyle:{
normal: {
color: 'rgba(64, 224, 208, 1)',
width: 1,
opacity: 1
}
},
data:[[{"geoCoord":[113.5107,23.2196]},{"geoCoord":[91.1865,30.1465]}],[{"geoCoord":[91.1865,30.1465]},{"geoCoord":[113.5107,23.2196]}]]
};
我按照官网的方法部署的Echarts-x,运行示例的时候报了很多js文件未找到问题,是不是和版本有关,报错如下:
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/echarts/src/component/dataRange.js"
dataRange.js
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/echarts/src/config.js"
config.js
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/zrender/src/tool/util.js"
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/echarts/src/util/ecData.js"
ecData.js
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/echarts/src/util/mapData/params.js"
params.js
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/echarts/src/util/mapData/geoCoord.js"
geoCoord.js
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/echarts/src/util/mapData/textFixed.js"
textFixed.js
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/zrender/src/shape/Polygon.js"
Polygon.js
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/zrender/src/shape/ShapeBundle.js"
ShapeBundle.js
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/zrender/src/shape/Text.js"
Text.js
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/echarts/src/chart.js"
chart.js
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/echarts/src/component/base.js"
base.js
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/echarts/src/util/shape/Icon.js"
Icon.js
"NetworkError: 404 Not Found - http://localhost:8050/echarts/datavisual/zrender/src/shape/Image.js"
在echarts-x地图上想要markPoint有一个动态的光圈,由大变小,显示动态效果。甚至可以为不同的markPoint设置不同的颜色。
像这样设置
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
return 10 + v/10
},
map3d支持这样吗?我从2d转过来,怎么没有光圈了。
type 为 scatter 的时候 ,点击具体某个散点 myChart.on('click', function(data)(console.log(data)})能打印出来点击散点的信息,但是改为sctterGL后就不能够像type 为 scatter 那样,操作了
Loading textures can take some time, there seems to be no way to configure globe's default color which shows before the texture is loaded:
It would be nice if it is possible to set color of the globe.
I've found baseColor option but that seems to be changing the texture when it's loaded:
(when baseColor:"blue")
Is it possible to set globes color without affecting the texture when loaded?
对echarts-x已经期待很久,很想使用起来。
myChart.setOption({
series: [{
name: 'World Population',
type: 'map3d',
mapType: 'world',
markPoint: {
data: [{distance:0,geoCoord:[0,0],symbolSize:0}]
}
}]
});
myChart.addMarkPoint(0,{
data:PopulationData
});
echarts.js 中代码:
chart && chart.addMark(seriesIdx, markData, markType);
报错:
Uncaught TypeError: undefined is not a function
Would be great if lines3D supports tooltip:)
Would be nice if SVG files can be loaded as textures, specially globle:environment so that stars are not blurred:) Would this be possible?
var React = require("react");
var $ = require('jquery')
var ec = require('echarts')
require('echarts-x/echarts-x')
require('echarts/chart/map')
require('echarts/chart/bar')
require('echarts-x/chart/map3d')
console.log(ec);
能不能在地球上将单独省份的区域放大显示?
您好,我咋加入echarts-gl.js后echarts其他图表series中的itemStyle属性不生效,是添加方式的问题还是需要更改某些配置?
Uncaught Error: Component series.map3d not exists. Load it first.
这个是缺少哪个模块
import echarts from 'echarts';
import `'echarts-gl';`
import 'echarts-gl/src/chart/map3D';
let earth = {};
let data = [[-83,76.5,1.1],[-85.5,73.5,2.9],[-78,73,1.5],[-56,72.5,14.9],[-157.5,71.5,1.9],[-157,71.5,7.4],[23.5,71.5,1.3],[24,71.5,1.3],[24.5,71.5,1.3],[25,71.5,3.7],[25.5,71.5,3.8],[26,71.5,3.8],[-52.5,71,11.1],[21.5,71,2.1],[22,71,2.1],[22.5,71,5.2],[23,71,10.4],[23.5,71,7.1],[24,71,1.2],[24.5,71,1.1],[25,71,1.5],[25.5,71,3],[26,71,1.5],[26.5,71,1],[28.5,71,1],[29,71,1.2],[29.5,71,1.7],[30,71,1.7],[30.5,71,1.7],[18,70.5,2.4],[18.5,70.5,6.8],[19,70.5,2.4],[19.5,70.5,2.4],[20,70.5,4.9],[20.5,70.5,6.3],[21,70.5,1.6],[21.5,70.5,1.5]]
let max = -Infinity;
data = data.map(function (item) {
max = Math.max(item[2], max);
return {
geoCoord: item.slice(0, 2),
value: item[2]
}
});
data.forEach(function (item) {
item.barHeight = item.value / max * 50 + 0.1
});
let option = {
title : {
text: 'Gridded Population of the World',
x:'center',
y:'top',
textStyle: {
color: 'white'
}
},
dataRange: {
min: 0,
max: max,
text:['High','Low'],
realtime: false,
calculable : true,
color: ['red','yellow','lightskyblue']
},
series: [{
type: 'Map3d',
mapType: 'world',
baseLayer: {
backgroundColor: 'rgba(0, 150, 200, 0.5)'
},
data: [{}],
hoverable: false,
itemStyle: {
normal: {
areaStyle: {
color: 'rgba(0, 150, 200, 0.8)'
},
borderColor: '#777'
}
},
markBar: {
barSize: 0.6,
data: data
}
}]
}
earth.init = function (id,Data) {
earth.chart = echarts.init(document.getElementById(id));
earth.chart.setOption(option);
}
export default earth;
Moved from #35 (comment)
Uncaught TypeError: echarts.registerPostUpdate is not a function
如题,是我电脑问题还是?
saveAsImage just support png and jpeg. how to get svg
require([
'echarts',
'echarts-x',
// ECharts-X 中 map3d 的地图绘制基于 ECharts 中的 map。
'echarts/chart/map',
'echarts/chart/map3d'
........
这是官网给的.但是没用,最后一行改成" 'echarts-x/chart/map3d' "才有效果。
I think you guys mixed Taiwan and China.
实现功能如下:
我根据官网上的“World Flights”3D地图写了一个程序,每分钟请求一次数据库,大致100条数据,重新塞数据,在塞数据之前调用myChart.dispose()方法销毁,然后重新初始化,但是差不多20分钟的样子,火狐的浏览器内存就会飙升到2G左右,然后崩溃,请问如何解决?
I was playing with EChartsX over the weekend and found one challenge, I'm rendering ECharts in a sandboxed iframe with "allow-same-origin" policy disabled at the moment. This basically means that all images (including those from the same domain) are considered as cross-domain.
The issue is that I can't use ECharts layers at the moment as it throws:
SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': Tainted canvases may not be loaded.
So my humble question is if there is any way to enable cross domain resources in WebGL. As far as I know, using cross-domain images in 2D canvas is possible by doing something like this:
image.crossOrigin = "anonymous";
WebGL spec does mention the same approach but I'm not sure if it's applicable or not:
https://www.khronos.org/registry/webgl/specs/latest/1.0/#4.2
Would it be possible to have an option for cross-domain layers and add .crossOrigin = "anonymous"; when enabled?
My other option is to register a new domain name for my sandbox which would prevent security issues even if allow-same-origin was enabled so I have a workaround:)
Anyway, EChartsX look really impressive so can't wait to see more samples;)
Cheers,
Jaro
In some scenarios, it would be useful if globe interaction can be disabled
This is probably part of the animation/transition roadmap but just to emphasise - would be nice if dynamic changes in globe.viewControl are animated so that globe would animate to different position if changed dynamically.
Also, might be good to have a way to set geo coordinates rather than numbers for alpha/beta?
而且实现这一切只需要把原先的scatter类型改为scatterGL类型,不需要再做其它的改动!
但是把这个例子中的scatter直接改成scatterGL无法运行。
Seems like opacity of bar3D item can't be set in data (even if docs says so), below is an example, the result shouldn't show any bars as itemStyle.opacity is 0
$.getJSON("/asset/get/s/data-1491887968120-rJODPy9ae.json", function (data) {
data = data.filter(function (dataItem) {
return dataItem[2] > 0;
}).map(function (dataItem) {
return {
itemStyle:{
opacity:0
},
value:[dataItem[0], dataItem[1], Math.sqrt(dataItem[2])]
}
});
option = {
backgroundColor: '#000',
globe: {
baseTexture: "/asset/get/s/data-1491837049070-rJZtl7Y6x.jpg",
heightTexture: "/asset/get/s/data-1491837049070-rJZtl7Y6x.jpg",
shading: 'lambert',
environment: '/asset/get/s/data-1491837999815-H1_44Qtal.jpg',
light: {
main: {
intensity: 2
}
},
viewControl: {
autoRotate: false
}
},
visualMap: {
max: 40,
calculable: true,
realtime: false,
inRange: {
colorLightness: [0.2, 0.9]
},
textStyle: {
color: '#fff'
},
controller: {
inRange: {
color: 'orange'
}
},
outOfRange: {
colorAlpha: 0
}
},
series: [{
type: 'bar3D',
coordinateSystem: 'globe',
data: data,
barSize: 0.6,
minHeight: 0.2,
maxHeight: 20,
silent: true,
itemStyle: {
color: 'orange'
}
}]
};
myChart.setOption(option);
})
请问echarts2.2.8 不能与echarts-x兼容吗? 在本地测试2.2.7是可以, 但是用 npm 管理中只有[email protected]
/example/map3d_mix.html
例子中,点击地球上的斐济,没有对应的国家二维地图。
是不是world_geo数据中,缺少?
npm 安装 "echarts-gl": "^1.0.0-alpha.3",
import echarts from 'echarts-gl' 引入组件
运行时候报错
vue.esm.js?0f63:520
TypeError: __WEBPACK_IMPORTED_MODULE_0_echarts_gl___default.a.init is not a function
at VueComponent.mounted (eval at (app.js:2309), :20:68)
at callHook (eval at (app.js:1010), :2533:21)
at Object.insert (eval at (app.js:1010), :3360:7)
at invokeInsertHook (eval at (app.js:1010), :5178:28)
at Vue$3.patch [as patch] (eval at (app.js:1010), :5342:5)
at Vue$3.Vue._update (eval at (app.js:1010), :2293:19)
at Vue$3.updateComponent (eval at (app.js:1010), :2416:10)
at Watcher.get (eval at (app.js:1010), :2755:25)
at new Watcher (eval at (app.js:1010), :2738:12)
at mountComponent (eval at (app.js:1010), :2420:17)
不是说月底出1.0版本吗?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.