Vue3+echarts 动态数据传递

最新推荐文章于 2024-03-20 20:00:37 发布

程序媛小白白

最新推荐文章于 2024-03-20 20:00:37 发布

阅读量1.6k

点赞数

文章标签： echarts javascript 前端 vue Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_46382462/article/details/129611899

版权

首先定义需要传递的数据及类型

const testText = ref<string>('');//定义

以echarts官网echarts基础柱状图为例

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};

传递数值需在data中定义

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
       {
           value:testText.value,//用ref定义的数据必须加上.value
        }, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }
  ]
};