一个使用echart绘制动态数据图表的例子

#举个栗子
毕业生管理,该页面统计毕业生就业类型(升学,就业,待业等),Ajax请求数据,根据数据绘制图表。(第一次写,代码有点烂,欢迎指正,但不接受指责。)
、、、

毕业生信息

总体统计
各学校统计

、、、

#我遇到的问题
###图表对象的销毁
#####问题
因为该页面通过点击事件更改页面不同的显示内容,需要两张表,但对于该例子来说图表对象定义在函数外部,导致在清空图表所在的标签内容后,再次加载该标签的图表会出现问题。
#####解决方式

  • 加载图表前销毁该对象(该段代码用此方法)
if (ratechart != null && ratechart != "" && ratechart != undefined) {
                            ratechart.dispose();
                            //销毁
                        }

###传数据
#####解决方式

  • 文件方式
  • 定义数组,存入数组,形式如下
xAxis:{
                 data: 数组,//x轴
           },
yAxis:{
                data: 数组,//y轴
          },
series: [
                {
                   data: 数组,//一个数据里的多个项目
                },
             ]

例子

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是用three.js创建一个立方体并用ECharts绘制一个仪表盘的基本步骤: 1. 引入three.jsECharts的库文件。 ```javascript <script src="https://cdn.staticfile.org/three.js/r128/three.min.js"></script> <script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script> ``` 2. 创建一个three.js场景和相机。 ```javascript var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera.position.z = 5; ``` 3. 创建一个立方体,并将其添加到场景中。 ```javascript var geometry = new THREE.BoxGeometry( 2, 2, 2 ); var material = new THREE.MeshBasicMaterial( {color: 0xffffff} ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); ``` 4. 创建一个ECharts图表,并将其渲染到一个Canvas元素上。 ```javascript var option = { // ECharts图表的配置参数 }; var chart = echarts.init(document.createElement('canvas')); chart.setOption(option); ``` 5. 将Canvas元素转换成three.js的纹理,并将其应用到立方体的表面上。 ```javascript var texture = new THREE.CanvasTexture(chart.getDom()); var material = new THREE.MeshBasicMaterial({ map: texture }); cube.material = material; ``` 6. 渲染场景。 ```javascript function animate() { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); } animate(); ``` 完整代码如下: ```javascript var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); camera.position.z = 5; var geometry = new THREE.BoxGeometry( 2, 2, 2 ); var material = new THREE.MeshBasicMaterial( {color: 0xffffff} ); var cube = new THREE.Mesh( geometry, material ); scene.add( cube ); var option = { // ECharts图表的配置参数 }; var chart = echarts.init(document.createElement('canvas')); chart.setOption(option); var texture = new THREE.CanvasTexture(chart.getDom()); var material = new THREE.MeshBasicMaterial({ map: texture }); cube.material = material; var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); function animate() { requestAnimationFrame( animate ); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render( scene, camera ); } animate(); ``` 希望这个例子对您有所帮助!如果您有任何其他问题,请随时问我。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值