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 相关文章推荐
文本框文本自动补全效果示例分享
Jan 19 Javascript
jQuery中nextAll()方法用法实例
Jan 07 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
vue实现文字加密功能
Sep 27 Javascript
JS设置自定义快捷键并实现图片上下左右移动
Oct 17 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
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之字符串变相相减的代码
2007/03/19 PHP
PHP与MySQL开发的8个技巧小结
2010/12/17 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
php 判断网页是否是utf8编码的方法
2014/06/06 PHP
php生成二维码
2015/08/10 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JavaScript组件焦点与页内锚点间传值的方法
2015/02/02 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
Angularjs的启动过程分析
2017/07/18 Javascript
vue-router 导航钩子的具体使用方法
2017/08/31 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
利用Python实现简单的相似图片搜索的教程
2015/04/23 Python
python在非root权限下的安装方法
2018/01/23 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
基于CSS3实现的漂亮Menu菜单效果代码
2015/09/10 HTML / CSS
css3media响应式布局实例
2016/07/08 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
监察建议书范文
2014/03/12 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL