echarts折线图数据更新后 不重新渲染

针对客户要求,需要做一个下拉选择数据改变视图,但发现数据重新返回后 折线图却不会重新更新渲染 于是查到echarts配置

chart.setOption(option, notMerge, lazyUpdate);

具体可查echarts官网 Documentation - Apache ECharts

贴上整个折线图完成代码

list = [
  {
    "field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104001|fstartyear%3D2019|endyear%3D2022",
    "field_value": 1,
    "name": "金辉集团股份有限公司",
    "value1": 16.28,
    "value2": 640.13,
    "total": 3932.69
  },
  {
    "field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104004|fstartyear%3D2019|endyear%3D2022",
    "field_value": 2,
    "name": "中骏集团控股有限公司",
    "value1": 11.07,
    "value2": 435.3,
    "total": 3932.69
  },
  {
    "field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2105035|fstartyear%3D2019|endyear%3D2022",
    "field_value": 3,
    "name": "融创中国控股有限公司",
    "value1": 9.59,
    "value2": 377.04,
    "total": 3932.69
  },
  {
    "field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2105033|fstartyear%3D2019|endyear%3D2022",
    "field_value": 4,
    "name": "金地(集团)股份有限公司",
    "value1": 9.19,
    "value2": 361.43,
    "total": 3932.69
  },
  {
    "field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104008|fstartyear%3D2019|endyear%3D2022",
    "field_value": 5,
    "name": "远洋集团控股有限公司",
    "value1": 8.84,
    "value2": 347.61,
    "total": 3932.69
  },
  {
    "field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104003|fstartyear%3D2019|endyear%3D2022",
    "field_value": 6,
    "name": "世茂地产控股有限公司",
    "value1": 5.37,
    "value2": 211.02,
    "total": 3932.69
  },
  {
    "field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2105032|fstartyear%3D2019|endyear%3D2022",
    "field_value": 7,
    "name": "德信中国控股有限公司",
    "value1": 5.15,
    "value2": 202.68,
    "total": 3932.69
  },
  {
    "field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104018|fstartyear%3D2019|endyear%3D2022",
    "field_value": 8,
    "name": "当代置业(中国)有限公司",
    "value1": 5.1,
    "value2": 200.63,
    "total": 3932.69
  },
  {
    "field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104009|fstartyear%3D2019|endyear%3D2022",
    "field_value": 9,
    "name": "大连万达商业管理集团股份有限公司",
    "value1": 4.74,
    "value2": 186.39,
    "total": 3932.69
  },
  {
    "field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dKH2104011|fstartyear%3D2019|endyear%3D2022",
    "field_value": 10,
    "name": "北京首都开发股份有限公司",
    "value1": 4.65,
    "value2": 183,
    "total": 3932.69
  },
  {
    "field_name": "../Forms/frmTyForm.aspx?ObjectID=9151&ep=fnmber%3dxx|fstartyear%3D2019|endyear%3D2022",
    "field_value": 11,
    "name": "其他客户",
    "value1": 20.02,
    "value2": 787.45,
    "total": 3932.69
  }
]
dataTop(list,chartId){//list:json数据  chartId:id名称
      
      var arr= list.map(item =>{return item.fyear})
      var newArr = arr.filter((item,index) => {return arr.indexOf(item) === index})

      var json = list;
      // var arr = list
      var map = {},
          dest = [];
      for (var i = 0; i < json.length; i++) {
          var ai = json[i];
          if (!map[ai.customer_name]) {
              dest.push({
                  customer_name: ai.customer_name,
                  data: [ai.value],
                  dataList:[ai]
              });
              map[ai.customer_name] = ai;
          } else {
              for (var j = 0; j < dest.length; j++) {
                  var dj = dest[j];
                  if (dj.customer_name == ai.customer_name) {
                      dj.data.push(ai.value);
                      break;
                  }
              }
          }
      }
      console.log(dest,'dest');

      this.total_data = dest
      var series_data = []
      dest.forEach(item => {
        series_data.push({
          name:item.customer_name,          
          data:item.data,
          type:'line',
          label: {
            normal: {
                show: true,
                formatter: function(v) {
                    // var val = v.data;
                    return v.value + 'w';
                },
                color: '#eee',
                fontSize:10
            }
          }
        })
      })

      option = {
        colors: ['#3E6FF6','#2BFFDF','#1B2B53','#FFB139','#434348','#7CB5EC','#F7A35C'],
        tooltip: {
          trigger: 'axis',
          //formatter: '{a}<br/> {b} : {c}w',
        },
        grid:{
          left:'5%',
          width:'70%'
        },        
        legend: { 
          data: series_data.name,
          textStyle:{
            color:'#eee'
          }
        },
        xAxis: {
          type: 'category',
          data: newArr,
          axisLabel: {
            color: '#eee'
          },
          axisLine: {
            show: true,
            lineStyle: {
                color: "#ccc",
            }
          }
        },
        yAxis: {
          type: 'value',
          axisTick: {
              //y轴刻度线
              show: true
          },
          axisLabel: {
            color: '#eee'
          },
          axisLine: {
              show: true, // Y轴
              lineStyle: {
                  color: "#ccc",
              }
          },
        },
        series: series_data
          // {
          //   name:dest[0].customer_name,
          //   data: dest[0].data,
          //   type: 'line',
          //   label: {
          //     show: true,
          //     position: 'top',
          //     textStyle: { //数值样式          
          //         color: '#eee',  //字体颜色
          //         fontSize: 10       //字体大小
          //     }
          //   },
          // }
        
      };
      var curChart = echarts.init(document.getElementById(chartId));
      //echarts.init(document.getElementById(chartId)).setAttribute('echarts_instance', '')   
      curChart.setOption(option,true, false);
      curChart.on('click', function () {
        let url = dest[0].dataList[0].field_name
        openTab(url, '项目列表');
        
      });
    },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值