用作数据可视化,echarts 和 D3.js哪个好?

发布网友发布时间：2022-04-07 09:30

我来回答

共3个回答

懂视网时间：2022-04-07 13:52

最近群里有几个人问，如何把echarts的图表贴在three.js的模型上。这个问题其实很简单，因为二者都是渲染成canvas的，直接用echarts生成的canvas当作贴图就可以了。

方法确定可行，那么我们就直接开始撸代码。

先搭建一个three的基本场景起来，这里不在复述。

然后新建一个平面，我们把图片贴在这个平面上即可。

【相关课程推荐：JavaScript视频教程】

addPlane() {
 var geometry = new THREE.PlaneGeometry(10,10);
 var material = new THREE.MeshBasicMaterial({ 
 side: THREE.DoubleSide,
 // transparent:true
 });
 this.plane = new THREE.Mesh(geometry, material);
 this.scene.add(this.plane);
}

摆好相机的角度，此时场景中是一个白板。

然后打开echarts的官网，找到案例，来个仪表盘吧。代码拷贝下来。跑起来。

为了方便演示，我在body中创建了2个div，分别作为three和图表的容器。实际开发中图表的容器不需要显示出来的，也不需要添加到body中的。

<div id="webgl" style="width:512px;height: 512px;float: left;"></div>
<div id="echart" style="width:512px;height: 512px;margin-left: 620px;"></div>

var myChart = echarts.init(document.getElementById('echart'));
option = {
 tooltip: {
 formatter: "{a} <br/>{b} : {c}%"
 },
 //toolbox会在右上角生成两个功能按钮，咱们不需要，直接干掉。
 // toolbox: { 
 // feature: {
 //  restore: {},
 //  saveAsImage: {}
 // }
 // },
 series: [
 {
  name: '业务指标',
  type: 'gauge',
  detail: { formatter: '{value}%' },
  data: [{ value: 50, name: '完成率' }]
 }
 ]
};
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
myChart.setOption(option, true);
const dom = document.getElementById("webgl");
const scene = new Basescene(dom);
scene.addPlane();

此时看到下面页面：

方法一：CanvasTexture

three.js有一个api:CanvasTexture。可以传入一个canvas对象，用这个方法可以完成上面的任务。

CanvasTexture( canvas : HTMLElement, mapping : Constant, wrapS : Constant, wrapT : Constant, magFilter : Constant, minFilter : Constant, format : Constant, type : Constant, anisotropy : Number )

changeTextureT(texture){
 this.plane.material.map = new THREE.CanvasTexture(texture)
 this.plane.material.needsUpdate = true 
 var thiscancas = document.getElementById("echart").getElementsByTagName('canvas')[0]
 scene.changeTextureT(thiscancas)
}

运行结果如下，确实不清晰，和他们遇到的问题的一样。尝试把echarts绘制大点，但是这个是自适应的，导致仪表板很丑，不是想象的样子，如果是自己绘制的表格，就可以这样处理了。

方法二：getDataURL

既然echarts也是渲染canvas，看看api，应该有方法导出图片。就是下面的api，而且有可选参数，可以设置分辨率。

changeTextureE(texture){
 this.plane.material.map = new THREE.TextureLoader().load(texture)
 this.plane.material.needsUpdate = true 
}
var texture = myChart.getDataURL({
 pixelRatio: 4,
 backgroundColor: '#fff'
}); 
scene.changeTextureE(texture)

分辨率设置为4确实清晰多了。

下面三个图分别是分辨率1，分辨率4以及方法1绘制的效果对比。

3个图区别很明显，方法2>方法1。该使用什么方法已经很明白了。

下面是动态图片，开始没有贴图，然后贴上方法1生成的贴图，接着闪一下，换成方法2分辨率4生成的贴图。放大还是很清晰的。

最后问题：echarts的图表很多都是有缓冲动画的，如果也想在贴图上实时刷新，可行吗。帧率能跟上吗。

全部代码：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>three.js使用Echarts贴图</title>
 <script src="../js/three.js"></script>
 <script src="../js/controls/OrbitControls.js"></script>
 <script src="./echarts.js"></script>
</head>
<body>
 <div id="webgl" style="width:512px;height: 512px;float: left;"></div>
 <div id="echart" style="width:512px;height: 512px;margin-left: 620px;"></div>
 <script>
 var myChart = echarts.init(document.getElementById('echart'));
 option = {
  tooltip: {
  formatter: "{a} <br/>{b} : {c}%"
  },
  // toolbox: {
  // feature: {
  //  restore: {},
  //  saveAsImage: {}
  // }
  // },
  series: [
  {
   name: '业务指标',
   type: 'gauge',
   detail: { formatter: '{value}%' },
   data: [{ value: 50, name: '完成率' }]
  }
  ]
 };
 option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
 myChart.setOption(option, true);
 class Basescene {
  constructor(dom) {
  this.id = (new Date()).getTime();
  this.dom = dom;
  this.divWidth = this.dom.offsetWidth;
  this.divHeight = this.dom.offsetHeight;
  this.scene = new THREE.Scene();
  this.camera = new THREE.PerspectiveCamera(45, this.divWidth / this.divHeight, 1, 2000);
  this.renderer = new THREE.WebGLRenderer({
   alpha: true,
   antialias: true
  });
  this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
  this.init();
  }
  init() {
  this.camera.position.set(0, 0, 20);
  this.camera.lookAt(this.scene.position);
  this.renderer.setClearColor(0x222222);
  this.renderer.setSize(this.divWidth, this.divHeight);
  this.dom.appendChild(this.renderer.domElement);
  // this.scene.add(new THREE.AxesHelper(10));
  this.animate();
  this.addLight();
  console.log(this.scene);
  }
  addLight() {
  const light = new THREE.AmbientLight(0xffffff);
  this.scene.add(light);
  }
  render() {
  this.renderer.render(this.scene, this.camera);
  }
  animate = () => {
  this.request = requestAnimationFrame(this.animate);
  this.render();
  }
  addPlane() {
  var geometry = new THREE.PlaneGeometry(10, 10);
  var material = new THREE.MeshBasicMaterial({
   side: THREE.DoubleSide,
   // transparent:true
  });
  this.plane = new THREE.Mesh(geometry, material);
  this.scene.add(this.plane);
  }
  changeTextureE(texture) {
  this.plane.material.map = new THREE.TextureLoader().load(texture)
  this.plane.material.needsUpdate = true
  }
  changeTextureT(texture) {
  this.plane.material.map = new THREE.CanvasTexture(texture)
  this.plane.material.needsUpdate = true
  }
 }
 const dom = document.getElementById("webgl");
 const scene = new Basescene(dom);
 scene.addPlane();
 setTimeout(() => {
  var thiscancas = document.getElementById("echart").getElementsByTagName('canvas')[0]
  scene.changeTextureT(thiscancas)
 }, 2000);
 setTimeout(() => {
  var texture = myChart.getDataURL({
  pixelRatio: 4,
  backgroundColor: '#fff'
  });
  scene.changeTextureE(texture)
 }, 4000);
 </script>
</body>
</html>

本文来自 js教程栏目，欢迎学习！

热心网友时间：2022-04-07 11:00

这两个都没用过，我一般都是用finebi来分析我的数据，最后在Dashboard里面查看可视化的图表结果，而且可以很方便地切换维度，联动钻取等

热心网友时间：2022-04-07 12:18

两者有点类似于jquery和js。
echart入门简单，方法都是封装好的，能快速搭建一些能简单交互的图表，比如说柱形图、饼图、二维地图。但是封装的方法一般自由度不高，你想要定制化很高的图表，要求很多交互效果，echart可能就满足不了了
d3 入门成本高，很复杂，要有很好的js和svg功底，用惯了echart做图，再用这个来做，觉得太繁杂了，什么东西都要自己一个个敲出来，没echart那么方便。但是他自由度高，能进行dom操作，这就让产品有了很高的交互性，可做定制化较高的产品
两者各有优缺点，你想做一些简单展示的图表，就用echart，基本能满足；如果你想做一些定制化比较高的能实现客户天马行空想法的，就用d3.