vue中给echarts的series,xAxis中的data动态赋值

循环this.dataAndScore获取到数据后,直接通过option赋值给echart

const Xdata = [];   //定义数组Xdata 
const Sdata = [];   //定义数组Sdata 
for (let i = 0; i < this.dataAndScore.length; i++) {    //遍历this.dataAndScore
    const item = this.dataAndScore[i];
    Xdata.push(item.data);          //将本次循环的日期放入Xdata
    Sdata.push(item.score);         //将本次循环的成绩放入Sdata
}

this.options = {  //echarts图表信息
   xAxis: { 
       type: 'category',
       ...
       data: Xdata   //xAxis获取动态值Xdata 
   },
   yAxis: { 
       type: 'value',
       ...
       axisLabel: ....
   },
   series: { 
       name: 'score',
       ...
       data: Sdata, //series获取动态值Sdata 
       ...
   }
   
},

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3使用echarts动态生成series数据,可以通过以下步骤实现: 1. 在初始化chart时,定义一个空的series数组,并将其作为option对象的初始值。 2. 通过接口获取需要动态添加的数据。 3. 将接口返回的数据进行处理,生成需要的series数据。 4. 将处理后的series数据添加到option对象的series数组。 5. 使用echarts的setOption方法将更新后的option对象应用到图表。 具体代码示例如下: ```javascript chartInit(legend, xAxis, newResult) { let option = { // 其他配置项 legend: { data: legend, }, series: [], // 初始化一个空的series数组 }; // 通过接口获取数据并处理 this.axios.post(this.dataUrl).then((res) => { if (res.result === '00000') { let seriesData = []; for (let i = 0; i < res.data.length; i++) { seriesData.push({ name: res.data[i].name, type: 'line', // 根据需求设置series的类型 data: res.data[i].data, // 根据接口返回的数据设置series的数据 }); } option.series = seriesData; // 将处理后的series数据赋值给option对象的series数组 // 使用setOption方法更新图表 this.$refs.chart.clear(); this.$refs.chart.setOption(option); } else { this.$Message.error(res.data.information); } }); } ``` 这段代码,首先定义了一个空的series数组,然后通过接口获取数据并将其处理成对应的series格式,最后将处理后的series数据赋值给option对象的series数组,并使用setOption方法更新图表。 请注意,上述代码的`this.$refs.chart`应替换为你实际使用的echarts图表组件的引用名称。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值