VUE+elementui组件在table-cell单元格中绘制微型echarts图


Posted in Javascript onApril 20, 2020

需求效果图示例

VUE+elementui组件在table-cell单元格中绘制微型echarts图

实际完成效果图

VUE+elementui组件在table-cell单元格中绘制微型echarts图**

代码实现

注:table表格为二次封装的子组件
-在table表格中 根据 scope.$index动态设置元素的id ,便于指定单元格的echarts初始化;

-在单元格中触发一个方法,传入当前的scope.row数据或者指定其他数据,并且传入 scope.$index 以及一个字符串便于识别当前是哪条数据的charts

-在方法中绘制echarts**

<el-table-column align="center">
    	 <template slot="header" slot-scope="scope">
      <div v-if="tableTitle == 'sale'">
       <p v-if="dateType != '1'">
        近{{ dateType }}天累计
        <br />
        / 日均销量
       </p>
       <p v-if="dateType == '1'">昨日累计销量</p>
      </div>
      <div v-if="tableTitle == 'fav'">
       <p v-if="dateType != '1'">
        近{{ dateType }}天累计
        <br />
        / 日均收藏量
       </p>
       <p v-if="dateType == '1'">昨日累计收藏</p>
      </div>
     </template>
     <div slot-scope="scope" style="white-space:nowrap;">
      <span class="xiao-red-color">{{ realRowName(scope.row, '0') || '-' }}</span>
      <span v-if="dateType != '1'" class="xiao-red-color">
       /
       {{ isNaN(realRowName(scope.row, '0')) ? '-' : (realRowName(scope.row, '0') / (parseInt(dateType) - calcShelfTime(scope.row.real_created_time, '0') < 0 ? parseInt(dateType): calcShelfTime(scope.row.real_created_time, '0'))).toFixed(0)}}
      </span>
     </div>
    </el-table-column>
    <el-table-column label="每日销量趋势" align="center" v-if="dateType != '1'">
     <template slot-scope="scope">
      {{ drawEcharts(scope.row, scope.$index, 'sale') }}
      <div :id="`tiger-sale-trend-index` + scope.$index" class="tiger-trend-charts"></div>
     </template>
    </el-table-column>

绘制echarts的方法(数据仅为示例,实际开发根据传进来的scope.row数据)注意此处初始化echarts对象时采用VUE的this.$nextTick方法,以防获取不到未渲染的节点元素。

drawEcharts() {
   //绘制趋势echarts
   // console.log(arguments)
   let option = {
    tooltip: {
     trigger: 'axis'
    },
    // legend: {
    //  data: ['每日30天销量分析']
    // },
    grid: {
     left: '10px',
     right: '30px',
     top: '40px',
     bottom: '10px',
     containLabel: true
    },
    xAxis: {
     show: false,
     type: 'category',
     boundaryGap: false,
     data: ['03-21', '03-22', '03-23', '03-24', '03-25', '03-26', '03-27']
    },
    yAxis: {
     show: false,
     type: 'value'
    },
    series: [
     {
      name: '每日30天销量分析',
      type: 'line',
      data: [120, 500, 101, 86, 173, 230, 6]
     }
    ]
   };
   let chartId = 'tiger-' + arguments[2] + '-trend-index' + arguments[1];
   this.$nextTick(() => {
    let myChart = this.echarts.init(document.getElementById(chartId), 'macarons');
    myChart.setOption(option);
    myChart.resize();
   });
  },

AND 不要忘记设置echarts的高度,否则一辈子也出不来图形(示例,根据实施开发调整)

&-frame {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;

  .price-bar {
   color: red !important;
  }
  .tiger-trend-charts {
   height: 60px;
   min-width: 100px;
  }
 }

到此这篇关于VUE+elementui组件在table-cell单元格中绘制微型echarts图的文章就介绍到这了,更多相关VUE elementui 单元格echarts图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
Feb 04 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
Jul 11 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
JavaScript原生数组函数实例汇总
Oct 14 Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 #Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 #Javascript
vue实现购物车功能(商品分类)
Apr 20 #Javascript
vue实现淘宝购物车功能
Apr 20 #Javascript
javascript利用键盘控制小方块的移动
Apr 20 #Javascript
vue实现购物车的监听
Apr 20 #Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 #Javascript
You might like
一个典型的PHP分页实例代码分享
2011/07/28 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
PHP过滤黑名单关键字的方法
2014/12/01 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
jquery实现excel导出的方法
2013/04/04 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
浅析JavaScript声明变量
2015/12/21 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
Node.JS中快速扫描端口并发现局域网内的Web服务器地址(80)
2017/09/18 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
零基础之Node.js搭建API服务器的详解
2019/03/08 Javascript
基于Proxy的小程序状态管理实现
2019/06/14 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
2019/09/06 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
2020/12/11 Vue.js
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
python有几个版本
2020/06/17 Python
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
小学德育工作经验交流材料
2014/05/22 职场文书
表扬稿格式范文
2015/01/16 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
Python集合的基础操作
2021/11/01 Python
为自由献出你的心脏!「进击的巨人展 FINAL」2022年6月在台开展
2022/04/13 日漫
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers