精华内容
下载资源
问答
  • echarts 刷新数据问题

    千次阅读 2017-06-08 16:31:38
    echarts刷新数据时,出现了一点问题,当暂无数据的气泡出来后,再刷新数据,那些气泡不会消失,导致新数据被遮住,如图。解决办法是重新初始化echarts,调用代码: require([ 'echarts',  'echarts/chart/bar...

    echarts刷新数据时,出现了一点问题,当暂无数据的气泡出来后,再刷新数据,那些气泡不会消失,导致新数据被遮住,如图。解决办法是重新初始化echarts,调用代码:

    require([ 'echarts',


          'echarts/chart/bar', 'echarts/chart/line' ], function(ec) {
          myChart = ec.init(document.getElementById('container'));
         
          });


    展开全文
  • echarts 刷新之后缩小

    2020-09-02 16:22:07
    layui 框架的首页放置了 echarts,但是刷新别的页面的时候,再回到echarts 页面,发现 div 高度变小了。 解决方式: 引入js <script src=...

    今天在工作中遇到一个问题

    layui 框架的首页放置了 echarts,但是刷新别的页面的时候,再回到echarts 页面,发现 div 高度变小了。

    解决方式:

    • 引入js
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery-resize/1.0/jquery.ba-resize.js"></script>
    
    • 在完成绘画echarts后添加代码:$(window).resize(myChart.resize);
    	var dom = document.getElementById("jindu");
    	var myChart = echarts.init(dom);
    	option = {
    	 ......
    	}
    	myChart.setOption(option);
    	$(window).resize(myChart.resize);
    
    展开全文
  • 在工作中利用echarts绘制折线图,发现当x轴时间更新时,x轴并没有刷新,当时的代码如下。 初始化echarts var initOption = { tooltip: { trigger: 'axis' }, legend: { data:[] }, grid: { left: '3%', ...

    在工作中利用echarts绘制折线图,发现当x轴时间更新时,x轴并没有刷新,当时的代码如下。

    初始化echarts

    var initOption = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:[]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
    
            },
            yAxis: {
                type: 'value'
            },
            series:[]
        };
        var tableChart;
        require.config({
            paths: {
                echarts: 'https://echarts.baidu.com/build/dist'
            }
        });
        require(
                [
                    'echarts',
                    'echarts/chart/line',//需要折线图则加载line模块
                    'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
                ],
                function (echarts) {
                    tableChart = echarts.init(document.getElementById('tableMain'));
                    tableChart.setOption(initOption);
                }
        );
    

    填充数据

    var cmap = data;
                 var series=[];
                 var title=cmap.title;
                 var days = cmap.legend;
    
                 for(var mo in cmap.data){
                     series.push({
                         name: mo,
                         type: 'line',
                         stack: '总量',
                         data:cmap.data[mo]
                     });
                 }
    
                 var option = tableChart.getOption();
                 option.title.text="XXXX";
                 option.series=series;
                 option.xAxis.data=days;
                 option.legend.data=title;
                 tableChart.setOption(option,true);
    

    问题出现以后在网上搜索了一下,有说调用 setOption(option,true)万能接口的,有说调用destory(),clear().clean()等接口的 ,经过测试都不行,还有一些比较复杂的方式,没有去具体测试,不知道是否可以。

    具体原因是xAxis在初始化的时候赋值为一个数组,而刷新数据的时候只是刷新xAxis的data部分,这个时候xAxis数组结构已经被破坏 ,存在两个data,因此在刷新的时候找不到要刷新的数据,导致刷新失败。
    第一次初始化赋值
    option.xAxis: {type:“catetory”,boundaryGap:false,data:Array(0)}
    第二次刷新数据
    option.xAxis:[0:{type:“catetory”,boundaryGap:false,data:Array(5)},data:Array(5)]
    根据option.xAxis.data无法找到对应的data数据。

    采用的笨办法
    if (option.xAxis.length ==undefined){
    option.xAxis.data=days;
    }else {
    option.xAxis[0].data=days;
    }
    可以顺利解决问题。

    展开全文
  • 最近在用echarts进行前台图表展示,发现每次加载如果数据不变,则图表不变化,因此进行了一些尝试。首先,简要说一下我理解的echarts:1、引入echarts的js文件;2、通过var mychartDiv=document.getElementById("id...

    最近在用echarts进行前台图表展示,发现每次加载如果数据不变,则图表不变化,因此进行了一些尝试。

    首先,简要说一下我理解的echarts:

    1、引入echarts的js文件;

    2、通过var mychartDiv=document.getElementById("id")获取div对象,然后在此div中填图表数据,理解这个就很清楚的知道怎么在一个页面中放入多个图表了;

    3、获取div对象后可以通过var myEchart=echarts.init(mychartDiv)初始化echarts实例;

    4、通过myEchart.removeAttribute("_echarts_instance_");在每次清空后重新加载;(本节标题的重点)

    6、最后,通过前面得到的实例通过myEchart.setOption(echartOption,true);即可显示图表。

    看到这儿如果还出现没有清空图表的情况,可以在

    通过$("#id")).empty()方法在加载echarts前对div 进行清空,

    或者document.getElementById('id').innerHTML = "",

    或者$('#id').html("");

    这样就可以完美解决问题。

    =========================我是分隔符==========================

    如果到现在你还没有看懂,总结2步:

    1、清空图表所在的div,js代码是document.getElementById('bigDiv').innerHTML = "";

    2、在echarts.init(document.getElementById("id"))前增加代码document.getElementById("id").removeAttribute("_echarts_instance_");

    如果有疑问欢迎留言。

    标签:echarts,图表,getElementById,div,document,id,亲测

    来源: https://www.cnblogs.com/jmwan/p/11989410.html

    展开全文
  • echarts刷新数据时x轴数据不变的问题

    千次阅读 2018-10-12 09:44:28
    写了一个echarts,再刷新图形的时候,发现x轴不变,经过多方查找发现问题,如下: 开始的时候我的写法如下, var myChart2 = echarts.init(document.getElementById("charts2"), 'shine'); option2 = {...
  • 刷新 思路:使用计算属性、组件、以及echarts提供的方法 计算属性里面的值改变了就会重新重新渲染; 封装一个组件echarts, Chart.setOption(this.option, true); 重新渲染 <template> <div ref="chart" ...
  • //s.GetWebFamily().AddScript("echarts.js"); //添加javascript文件 //s.GetWebFamily().AddCss("website.css"); //添加css文件 s.Vue().Debug(); }).Completed(s => { this.Dispatcher.Invoke(() => { if ...
  • prod.js') config.set('externals',{ vue:'Vue', 'vue-router':'VueRouter', axios:'axios', lodash:'_', echarts:'echarts', nprogress:'NProgress', 'vue-quill-editor':'VueQuillEditor' }) }) //开发环境 config...
  • 直接引用 import echarts from '@/lib/util/echarts.js' this.myChart = echarts.init(this.$refs.chart) lodash 按需加载: 安装 lodash-webpack-plugin 插件 npm install lodash-webpack-plugin --...
  • 学之思在线考试系统是一款 java + vue 的前后端分离的考试系统。...对该系统做了大量精简,只保留了部分样式和控件 echarts 图表统计 ueditor 为了支持填空题,做了部分修改 微信小程序: iView 主题样式
  • configureWebpack: { //移除已从cdn引入的组件,不打包以下命名的内容 externals: { 'vue': 'Vue', 'vue-router': 'VueRouter', 'element-ui': 'ELEMENT', 'echarts': 'echarts', 'VueCookies': 'VueCookies', }, }...
  • 1.Echarts自动刷新数据1.Echarts柱状图的正常配置注:声明了 myChart、test这两个都有用官方示例中myChart是声明在 function(ec)里面的var myChart;var test = 10// 路径配置require.config({paths: {echarts: '...
  • 在这次的项目中图表显示的部分比较多,这边给分享下用到的图表的数据刷新饼图最后的效果先看下前端部分这是右边图的 echarts的html 一定要定义好大小接下来是 js部分 先定义一个模板 官网有 自己稍加修改 (比较懒没...
  • 在这次的项目中图表显示的部分比较多,这边给分享下用到的图表的数据刷新 饼图最后的效果先看下前端部分这是右边图的 echarts的html 一定要定义好大小接下来是 js部分 先定义一个模板 官网有 自己稍加修改 (比较懒没...
  • 百度Echarts图形报表自动刷新数据发布时间:2017-12-20(阅读第 1635 次)1.Echarts自动刷新数据1.Echarts柱状图的正常配置注:声明了 myChart、test这两个都有用官方示例中myChart是声明在 function(ec)里面的var ...
  • ECharts动态刷新代码

    2016-12-13 20:13:31
    ECharts 动态刷新(非官方直接复制)可以使用
  • Echarts 动态刷新

    2019-04-02 12:40:03
    function setmyChart(jsondata, chartdiv) { if (jsondata == null) return; var dom = document.getElementById(chartdiv.attr("id"));... var myChart = echarts.init(dom); var legendd...
  • echarts异步刷新

    2020-06-21 21:19:39
    var _info_arr = info.split(",") mdata.data = _info_arr callback(mdata) } }) } setInterval(function(){getInfo(function(aa){ var myChart = echarts.init(document.getElementById(‘m-line’)); option = { ...
  • Echarts自动刷新数据

    万次阅读 2018-01-16 11:25:13
    1.Echarts柱状图的正常配置 注:声明了 myChart、test这两个都有用 官方示例中myChart是声明在 function(ec)里面的 script src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js">script> ...
  • Echarts 定时刷新

    千次阅读 2016-06-06 11:40:16
    initBox_1(); window.setInterval(function () { initBox_1(); },1000*60); 这里initBox_1()为动态数据且显示图标

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 654
精华内容 261
关键字:

echarts刷新