vue中使用echart实现三维立体图

echart实现三维立体图，这个有一个踩坑点，echart在渲染数据的时候，会有过渡动画效果，当数据量大的时候，会使图表在绘制过程中卡住，解决这个问题的办法是去掉过渡动画效果：grid3D.viewControl.animation = false。

  this.myChart3 = this.$echarts.init(document.getElementById('myChart3'))this.option3 = {title: {text: '3维立体图',left: 'center',align: 'right'},grid: {top:0,left:10,right:10,bottom: 50},tooltip: {trigger: 'axis',axisPointer: {type: 'cross',animation: false,label: {backgroundColor: '#505765'}}},legend: {data: ['1','2','3'],left: 10},xAxis3D: {name:'X轴',type: 'value',},yAxis3D: {name:'Y轴',type: 'value',min:0,max:360},zAxis3D: {name:'Z轴',type: 'value'},grid3D: {viewControl:{beta:45,alpha:18,minDistance:0,projection: 'orthographic',animation:false,//这句话 要加，不然动画会卡住，影响展示minAlpha:-90,// 垂直旋转正交maxAlpha:90,// 垂直旋转正交}},series: [{name:'1',type:'bar3D',itemStyle:{normal:{color:'#0041DC'}},barSize:0.3,animation:false,data: [0]},{name:'2',type:'bar3D',itemStyle:{normal:{color:'#ff0000'}},barSize:0.3,animation:false,data: [0]},{name:'3',type:'bar3D',itemStyle:{normal:{color:'#64FF00'}},barSize:0.3,animation:false,data: [0]}]}this.myChart3.setOption(this.option3,true);

vue中使用echart实现三维立体图相关推荐

Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图前言 Echart版本的确定全局导入或按需导入在对应的页面调用echart 前后端数据交互注意事项前言在Vue2.x开发中,为了更好地展示某一个时间 ...
vue中使用echart地图
vue中使用echart地图获取湖南的地图数据实现的效果步骤一些方法地图options 总结获取湖南的地图数据 https://gallery.echartsjs.com/editor.h ...
vue - vue中使用echart实现柱状图和折线图
vue中使用echart实现柱状图和折线图,所用到的数据会放到最后面,在costRate.js里面: 1,先看效果图一些重要注释我都写到代码里面了:第一个图柱状图,第二个是折线图 2,代码实现 &l ...
vue中基于echart地图功能省级地图下钻和返回、发射线、水波涟漪等功能展示
效果图展示-包含水波涟漪.发射线功能效果图点击地市.区县下钻功能 vue项目中main.js import echarts from 'echarts' import anhui from '../ ...
vue中使用echart创建上海地图
效果图! 前提:是在vue的项目中用到的全部代码(用到的东西在代码里面有写了) 地图文件的来源 1.本地安装echart插件,可以在(node_modules/echarts/map/json/pr ...
vue中使用echart绘制柱状图、折现图、饼状图
echarts有几个主要的字段,title.legend.xAxis. yAxis.tooltip.series. title 图表的标题 legend 用来标志图表数据,data字段的数组需要对应每 ...
vue中引入echart图及遇到的问题记录
目录引入tree图引入tree图引入echarts图,需要指定容器有明确的宽高. 根据官方文档,需要先定义一个<div>节点,并使用CSS使得该节点具有宽度和高度.,初始化的时候,传 ...
echart关系树状图_在vue中使用echart创建树形图
1.引入echart模块可以选择全部引入或者只引入所用组件,这里为了方便选择全部引入: import echarts from 'echarts' 2.定义树形图的data data() { ret ...
vue 中使用 echart 绘制世界地图中国地图省地图
1.在页面内引入需要使用的地图js文件node_modules/echarts/map/js eg: import 'echarts/map/js/china'; 2.如果选用省份,需要用汉字 eg: ...

vue中使用echart实现三维立体图

vue中使用echart实现三维立体图相关推荐

最新文章

热门文章