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 相关文章推荐
JavaScript语言中的Literal Syntax特性分析
Mar 08 Javascript
javascript一些不错的函数脚本代码
Sep 10 Javascript
jquery定时滑出可最小化的底部提示层特效代码
Oct 02 Javascript
jQuery简单实现网页选项卡特效
Nov 24 Javascript
JavaScript插件化开发教程(五)
Feb 01 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
详解JS中的attribute属性
Apr 25 Javascript
Vue2路由动画效果的实现代码
Jul 10 Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
node删除、复制文件或文件夹示例代码
Aug 13 Javascript
Vue.set 全局操作简单示例
Sep 19 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 stream_context_create()作用和用法分析
2011/03/29 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
php批量删除cookie的简单实现方法
2015/01/26 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
PHP中addcslashes与stripcslashes函数用法分析
2016/01/07 PHP
浅谈PHP封装CURL
2019/03/06 PHP
jQuery.holdReady()使用方法
2014/05/20 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
JavaScript实现彩虹文字效果的方法
2015/04/16 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
2016/07/07 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
使用Turtle画正螺旋线的方法
2017/09/22 Python
python读取文件名称生成list的方法
2018/04/27 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
Python函数返回不定数量的值方法
2019/01/22 Python
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
计算机应用专业推荐信
2013/11/13 职场文书
工程业务员工作职责
2013/12/07 职场文书
企业负责人任命书
2014/06/05 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
个人总结与自我评价
2015/02/14 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
放牛班的春天观后感
2015/06/01 职场文书
Linux系统下安装PHP7.3版本
2021/06/26 PHP
python字典进行运算原理及实例分享
2021/08/02 Python
Python Django获取URL中的数据详解
2021/11/01 Python
java.util.NoSuchElementException原因及两种解决方法
2022/06/28 Java/Android