首页 > 其他分享 >vue循环生成echarts图表

vue循环生成echarts图表

时间:2023-07-31 18:45:49浏览次数:38  
标签:10 vue created 图表 获取 data echarts

1. 效果图

2. 引入echarts

npm install echarts --save

3. main.js全局引入

4. 页面

data数据是从后台接口中返回的,需要通过watch监听来获取created方法中获取到的数据。用mounted由于是异步调用,是获取不到created中的数据的。

4. 后台数据

我这里是根据实际业务场景返回的map集合

{
    "code": 200,
    "data": {
        "A产品": [
            ["10月",2],
            ["9月",0],
            ["8月",0],
            ["7月",0],
            ["6月",0],
            ["5月",0],
            ["4月",0],
            ["3月",0],
            ["2月",0],
            ["1月",0]
        ],
        "B产品": [
            ["10月",2],
            ["9月",0],
            ["8月",0],
            ["7月",0],
            ["6月",0],
            ["5月",0],
            ["4月",0],
            ["3月",0],
            ["2月",0],
            ["1月",0]
        ],
        "C产品": [
            ["10月",2],
            ["9月",1],
            ["8月",1],
            ["7月",0],
            ["6月",0],
            ["5月",0],
            ["4月",0],
            ["3月",0],
            ["2月",0],
            ["1月",0]
        ]
    }
}

 

标签:10,vue,created,图表,获取,data,echarts
From: https://www.cnblogs.com/panwudi/p/17594201.html

相关文章

  • ruby web 实战(9)-vue 3基础(2)
    目录定位到导入的vue定位到导入的vue使用导入映射表(ImportMaps)来告诉浏览器如何定位到导入的vue:<!doctypehtml><htmllang="zh"><head><metacharset="utf-8"><title>world</title></head><body><scriptt......
  • three.js学习1(vue3)
    1.引入threejsnpminstall--savethree在组件内import*asTHREEfrom'three'2.创建容器创建canvas标签,为3D渲染建立容器<template><div><canvasid="three"></canvas></div></template>3.创建场景 Three.js依赖......
  • vue多选框
    vue多选框多选框(选中传id)效果图点击确定后传入后台id前端具体实现-vue+elementui前台变量首先使用selecctDeptMent方法从后台数据库,查询到所有的部门信息,存入到optionList中然后取出这个部门名称constoptions=ref([])//代码修改/**新增按钮操作*/const......
  • echarts 自定义提示框
    consttooltip=(params,echartsBarData)=>{constresult=params.map((item,index)=>{conststr=item.name.substring(0,1);if(echartsBarData[index].drugNameCosList){constdata=echartsBarData[index].drugNameCosList.filter(......
  • vue实现浏览器端大文件分块上传
    ​ 这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数下面直接贴代码吧,一些难懂的我大部分都加上注释了:上传文件实体类:看得出来,实体类中已经有很多我们需要的功能了,还有实用的属性。如MD5秒传的信息。pub......
  • VUE3、ElementPlus 重构若依vue2 表单构建功能
    Vue3+ElementPlus+Vite重构若依Vue2表单构建功能若依官方的Vue3版本发布已经有段时间了,就是这个表单构建功能一直没有安排计划去适配到Vue3!前段时间公司需要做个类似的功能,就直接借鉴若依Vue2的来直接改了吐槽下:vuedraggable-vue3坑真多,官方文档一言难尽,现在不推荐使......
  • 坑:vue2在props时仅接受第一次返回数据的解决办法
    今天在做项目时遇到了一个bug,在列表页进入详情页时带入list以便子组件遍历使用,使用props传参,该list在父组件由created生命周期函数访问接口获取,然后子组件在使用时,直接使用props接收并调用,大概代码如下://父组件<Child:list='list'/>...created(){getListApi().then(list......
  • 浅聊一下,React会不会被VUE取代?
    看到知乎上有比较多的类似问题,正好这两个框架在以往的一些项目中都有实践过,就借着本篇文章说说我个人的看法。 先摆个结论:不会,毕竟各有千秋,除非跨端框架有被更好的概念所替代,又或者App已经彻底过气了。 什么是React?什么是VUE?维基百科上的概念解释,Vue.js是一个用于创......
  • Vue打开新窗口
    方式一:openNewWindow(){const{href}=this.$router.resolve({path:"/preview",});window.open(href,"_blank","width=900,height=700");},方式二:<router-linktarget="......
  • VUE el-table表格实现双击编辑,单机空白处放弃修改,回车提交修改
    VUEel-table表格实现双击编辑,单机空白处放弃修改,回车提交修改template<el-row><el-col:span="24"><el-table@cell-dblclick="handleCellDBClick":data="tabledata"border><!--生成列--><......