• eCharts 折线图,动态绑定数据不更新图表的问题,


    官方文档 : http://echarts.baidu.com/tutorial.html

    npm install echarts --save 

    let lineChart = echarts.init(document.getElementById('lineEchartContainer'), 'dark')   // 折线图

    lineChart.showLoading()  //开启loading
    let option = {
      title: { text: '点击量折线图' },  //标题
      tooltip: {},  //鼠标悬停
      legend: {
        data: nameList  //名称显示列表
      },
      xAxis: {
        data: [2,3,4,5,6,7]  //X轴
      },
      yAxis: {},  //Y轴
      series: seriesList  //数据,若有多条数据,格式为:series:[{name: '',type:'line',data:'22'},{name: '',type: 'line',date: '11'}],name和legend中的nameList对应,type为类型,data为数值,若需要折线换成曲线,加上smooth: true
    }
     
    lineChart.clear()  //先清除图表
    lineChart.setOption(option, true)  //再设置配置
    lineChart.hideLoading()  //关闭loading
     
    这里为什么要先清除图表,再设置图表呢,因为很多时候我们都是动态绑定数据,可能有触发事件来更新视图,但是数据是绑定到了视图上,我们只能设置配置来更改,单纯的修改数据是不行的,所以要先清空视图,然后再把新的配置设置上去,就OK了。
     
    希望本文对你有所帮助!
     
  • 相关阅读:
    java中的成员变量、静态变量与局部变量
    java中static关键字的作用
    java中super关键字的作用
    java中this关键字的作用
    Java创建对象的4种方式
    IO体系、集合体系、多线程、jdbc
    二分搜索树
    二叉树搜索(二分查找法)
    索引堆
    原地堆排序
  • 原文地址:https://www.cnblogs.com/wangqiao170/p/9267283.html
Copyright © 2020-2023  润新知