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 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
js实现两点之间画线的方法
May 12 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
Node.js爬取豆瓣数据实例分析
Mar 05 Javascript
layui form表单提交之后重新加载数据表格的方法
Sep 11 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
原生小程序封装跑马灯效果
Oct 21 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解析html的实现代码
2011/08/08 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
解析thinkphp基本配置 convention.php
2013/06/18 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php检测用户是否用手机(Mobile)访问网站的类
2014/01/09 PHP
phpinfo的知识点总结
2019/10/10 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
jQuery实现带动画效果的二级下拉导航方法
2015/03/11 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
Windows下PyMongo下载及安装教程
2015/04/27 Python
学习python类方法与对象方法
2016/03/15 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
Python单元测试实例详解
2018/05/25 Python
python实现自主查询实时天气
2018/06/22 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
python+opencv实现车道线检测
2021/02/19 Python
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
大学生职业生涯规划范文
2014/01/08 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
小区文明倡议书
2014/05/16 职场文书
综合实践活动报告
2015/02/05 职场文书
车辆挂靠协议书
2016/03/23 职场文书
七个非常实用的Python工具包总结
2021/06/15 Python
Mysql如何查看是否使用到索引
2022/12/24 MySQL