【echarts】的右上角工具栏点击restore恢复按钮图表空白问题
初始图:
初始图是完整可以显示的,点击右上角几个按钮都没问题,唯独点了还原按钮就出了以下问题:
啥也没有了.
不要慌,打开编辑器的终端看看:
是不是报这个错了.echarts没有到处,
再看看你的package,json里面的echarts的版本是多少,是不是5点多.
方法一
1.就是echarts的版本改到4以下.例如
cnpm install echarts@4.9.0 --save
2.main.js中引入方式改一下
//import echarts from 'echarts'//修改为一下任意一种方式即可
import * as echarts from 'echarts'
const echarts = require('echarts');
3,如果出现一下报错:
说明echarts的版本和echarts-gl版本不兼容,解决方法如下:
cnpm install echarts@4.1.0 --save
cnpm install echarts-gl@1.1.0 --save
安装完后重启项目,完美解决!
方法二(推荐)
不修改echarts的版本号
this.myChart = this.$echarts.init(...)this.myChart.setOption(this.option)this.myChart.setOption({xAxis:{data: xxx},series:[{data: xxx...}]})....
平常我们最后绘制图表是不是都跟上面方法差不多,如果不修改echar版本号用这种方法,点右上角还原按钮就会出现白屏
稍微修改一些绘制方法就可以了
this.myChart = this.$echarts.init(...)this.option.xAxis.data = xxxthis.option.series[0].data = xxxx....this.option && this.myChart.setOption(this.option, true)
这样不回退版本也可以解决了
拓展: 如果一个页面有多个图表怎么办,this.option复制几份就可以了,循环挨个赋值
var arr = ['emain1', 'emain2', 'emain3', 'emain4']var myChartpol = ['myChartpol1', 'myChartpol2', 'myChartpol3', 'myChartpol4']var charpol = [{}, {}, {}, {}]}arr.forEach((item, index) => {// if (this.chartObj[myChartpol[index]] == null) {// this.chartObj[myChartpol[index]] = this.$echarts.getInstanceByDom(this.$refs[item][0])// }// this.chartObj[myChartpol[index]] = this.$echarts.init(this.$refs[item][0])...charpol[index] = this.option})
本期来分享一下, 怎样在PPT中做出这种动画效果: 点击一次鼠标, 就出现一次滑动按钮, 随之切换一次内容. 制作思路和关键步骤 此动画实现思路为: 用形状补间动画实现按钮滑动, 配合遮罩设计和路径动 ... 用户在操作 Echarts 的图表时会触发相应的事件,这些事件由开发者监听,然后回调函数做出相应的处理,可以弹出一个对话框.跳转到一个地址或者做数据下钻等等. ECharts 3 中绑定事件跟 Ech ... [方法一:重启资源管理器] 1.使用快捷键[Ctrl+Shift+Esc]会弹出任务管理器窗口,如下图所示: 2.在任务管理器窗口中点击[进程],然后找到[Windows资源管理器],选中点击[重新启 ... 实现类似微信,QQ的前后台切换:back键切换后台:点击通知栏恢复前台. 1.back键切换后台的实现: 这个实现需要在主activity重写onbackpressed()方法.代码如下: @Over ... 上一篇:Android 天气APP(十二)空气质量.UI优化调整 天气预报详情,逐小时预报详情 新版------------------- 一.适配器点击监听 二.页面实现 三.天气预报详情弹窗 四. ... // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getElementById('myChart')); 前言 需 ... 在遮罩层显示全屏图表 <div class="fullScreen"><van-overlay lock-scroll :show="isFull&qu ... YDOOK:ESP8266: AT 指令 AT+RESTORE 恢复出厂设置 © YDOOK JY Lin 文章目录 YDOOK:ESP8266: AT 指令 AT+RESTORE 恢复出厂设置 © ... 你不能"暂停"HTML的执行.您可以通过用户或使用计时器通过操作(按钮点击前的按钮)显示项目(最初使用css隐藏)来控制何时以及如何使用JavaScript的不同部分,以及使用ja ...【echarts】的右上角工具栏点击restore恢复按钮图表空白问题相关推荐
最新文章
热门文章