devbox
从前慢现在也慢
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

echarts自定义图片首次加载不显示的问题的修改＜vue＞_js整合echars第一次展示图空

作者：从前慢现在也慢 | 2024-02-21 13:20:10

赞

踩

js整合echars第一次展示图空

1.图片修改后，只有点击节点的时候才会显示图片，刚加载进去不显示图片，加上下面代码即可显示

  1. setTimeout(() => { // 解决echarts树图图片首次加载不出现的问题
  2.    echarts.init(chart).resize();
  3. }, 200);

2.通过上述修改后，还是有bug，那就是点击父节点展开和合并子节点的时候，图片又会消失，所以又有了下方代码

  1. echarts.init(chart).on('click', function() { // 解决点击父节点合并或展开后子节点图片不显示的问题
  2.    echarts.init(chart).resize();
  3. });

3.整个完整组件代码如下:

  1. <template>
  2.   <div>
  3.     <div ref="main" style="width: 100%;height: 460px;"></div>
  4.   </div>
  5. </template>
  6.  
  7. <script>
  8. import echarts from 'echarts'
  9. require('echarts/theme/macarons') // echarts theme
  10.  
  11. export default {
  12.   name: 'TrackChains',
  13.   data() {
  14.     return {
  15.       dataTree: [
  16.         {
  17.           'name': '创建文档',
  18.           'type': 'create',
  19.           'documentName': 'test.doc',
  20.           'documentId': '83f6-98ec3b3d11b0',
  21.           'circulationTimes': '0',
  22.           'filePath': 'c:\test.doc',
  23.           'fileSize': '10M',
  24.           'updateTime': '2021-10-20 10:37',
  25.           'terminalName': 'T10001',
  26.           'operatorName': 'U1',
  27.           'symbol': 'image://' + require('@/assets/trackChains/create.png'),
  28.           'children': [
  29.             {
  30.               'name': '编辑文档',
  31.               'type': 'edit',
  32.               'documentName': 'test.doc',
  33.               'documentId': '83f6-98ec3b3d11b0',
  34.               'circulationTimes': '0',
  35.               'filePath': 'c:\\test.doc',
  36.               'fileSize': '10M',
  37.               'updateTime': '2021-10-20 10:37',
  38.               'terminalName': 'T10001',
  39.               'operatorName': 'U1',
  40.               'symbol': 'image://' + require('@/assets/trackChains/edit.png'),
  41.               'children': [
  42.                 {
  43.                   'name': '重命名文档',
  44.                   'type': 'rename',
  45.                   'documentName': '测试.doc',
  46.                   'documentId': '83f6-98ec3b3d11b0',
  47.                   'circulationTimes': '0',
  48.                   'filePath': 'c:\\测试.doc',
  49.                   'fileSize': '10M',
  50.                   'updateTime': '2021-10-20 10:37',
  51.                   'terminalName': 'T10001',
  52.                   'operatorName': 'U1',
  53.                   'symbol': 'image://' + require('@/assets/trackChains/rename.png'),
  54.                   'children': [
  55.                     {
  56.                       'name': '剪切文档',
  57.                       'type': 'cat',
  58.                       'documentName': '测试.doc',
  59.                       'documentId': '83f6-98ec3b3d11b0',
  60.                       'circulationTimes': '0',
  61.                       'filePath': 'c:\\测试.doc',
  62.                       'fileSize': '10M',
  63.                       'updateTime': '2021-10-20 10:37',
  64.                       'terminalName': 'T10001',
  65.                       'operatorName': 'U1',
  66.                       'symbol': 'image://' + require('@/assets/trackChains/cat.png'),
  67.                       'children': [
  68.                         {
  69.                           'name': '流转(1002)',
  70.                           'type': 'circulation',
  71.                           'symbol': 'image://' + require('@/assets/trackChains/circulation.png')
  72.                         }
  73.                       ]
  74.                     }
  75.                   ]
  76.                 },
  77.                 {
  78.                   'name': '复制文档',
  79.                   'type': 'copy',
  80.                   'documentName': 'test（1）.doc',
  81.                   'documentId': '83f6-98ec3b3d11b0',
  82.                   'circulationTimes': '0',
  83.                   'filePath': 'c:\\test（1）.doc',
  84.                   'fileSize': '10M',
  85.                   'updateTime': '2021-10-20 10:37',
  86.                   'terminalName': 'T10001',
  87.                   'operatorName': 'U1',
  88.                   'symbol': 'image://' + require('@/assets/trackChains/copy.png'),
  89.                   'children': [
  90.                     {
  91.                       'name': '重命名文档',
  92.                       'type': 'rename',
  93.                       'documentName': 'dog.doc',
  94.                       'documentId': '83f6-98ec3b3d11b0',
  95.                       'circulationTimes': '0',
  96.                       'filePath': 'c:\\dog.doc',
  97.                       'fileSize': '10M',
  98.                       'updateTime': '2021-10-20 10:37',
  99.                       'terminalName': 'T10001',
  100.                       'operatorName': 'U1',
  101.                       'symbol': 'image://' + require('@/assets/trackChains/rename.png'),
  102.                       'children': [
  103.                         {
  104.                           'name': '删除文档',
  105.                           'type': 'delete',
  106.                           'documentName': '测试.doc',
  107.                           'documentId': '83f6-98ec3b3d11b0',
  108.                           'circulationTimes': '0',
  109.                           'filePath': 'c:\\测试.doc',
  110.                           'fileSize': '10M',
  111.                           'updateTime': '2021-10-20 10:37',
  112.                           'terminalName': 'T10001',
  113.                           'operatorName': 'U1',
  114.                           'symbol': 'image://' + require('@/assets/trackChains/delete.png')
  115.                         }
  116.                       ]
  117.                     }
  118.                   ]
  119.                 }
  120.               ]
  121.             }
  122.           ]
  123.         }
  124.       ]
  125.     }
  126.   },
  127.   mounted: function() {
  128.     this.setOptions()
  129.   },
  130.   methods: {
  131.     // 实现自适应
  132.     day_init() {
  133.       const self = this; // 因为箭头函数会改变this指向，指向windows。所以先把this保存
  134.       const todaypieId = this.$refs.main
  135.       if (!todaypieId) {
  136.         return false;
  137.       } else {
  138.         setTimeout(() => {
  139.           window.onresize = function() {
  140.             //   self.chart = echarts.init(self.$refs.myEchart);
  141.             self.chart_today = echarts.init(
  142.               todaypieId
  143.             );
  144.             self.chart_today.resize();
  145.           };
  146.         }, 200);
  147.       }
  148.     },
  149.     setOptions() {
  150.       // console.log('data', JSON.parse(JSON.stringify(this.dataTree)))
  151.       const defaultOpt = {
  152.         tooltip: {
  153.           trigger: 'item',
  154.           triggerOn: 'mousemove',
  155.           enterable: true, // 鼠标是否可进入提示框浮层中
  156.           formatter: this.formatterHover// 修改鼠标悬停显示的内容
  157.         },
  158.         series: [
  159.           {
  160.             type: 'tree',
  161.             data: this.dataTree,
  162.             top: '1%',
  163.             left: '7%',
  164.             bottom: '1%',
  165.             right: '20%',
  166.             // layout: 'radial',
  167.             label: {
  168.               position: 'left',
  169.               verticalAlign: 'middle',
  170.               align: 'right',
  171.               fontSize: 9
  172.             },
  173.             leaves: {
  174.               label: {
  175.                 position: 'right',
  176.                 verticalAlign: 'middle',
  177.                 align: 'left'
  178.               }
  179.             },
  180.             symbolSize: [30, 30],
  181.             edgeForkPosition: '72%',
  182.             roam: true, // 鼠标缩放，拖拽整颗树
  183.             expandAndCollapse: true, // 无关的子树折叠收起
  184.             animationDuration: 550,
  185.             animationDurationUpdate: 750,
  186.             width: '50%'// 组件宽度
  187.           }
  188.         ]
  189.       }
  190.  
  191.       const chart = this.$refs.main
  192.       if (chart) {
  193.         setTimeout(() => { // 解决echarts树图图片首次加载不出现的问题
  194.           echarts.init(chart).resize();
  195.         }, 200);
  196.         echarts.init(chart).setOption(defaultOpt); // 将画布添加到页面中
  197.         echarts.init(chart).on('click', function() { // 解决点击父节点合并或展开后子节点图片不显示的问题
  198.           echarts.init(chart).resize();
  199.         });
  200.       }
  201.     },
  202.     /**
  203.      * 鼠标悬停时，显示节点详情
  204.      * @param params 当前悬停的详细信息
  205.      * @returns {string|*}
  206.      */
  207.     formatterHover(params) {
  208.       const deviceType = params.data.type;
  209.       if (deviceType != 'circulation') {
  210.         return '<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">文档编辑方式：' + params.data.name + '</span>' + '<br>' +
  211.           '<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">文档名称：' + params.data.documentName + '</span>' + '<br>' +
  212.           '<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">文档ID：' + params.data.documentId + '</span>' + '<br>' +
  213.           '<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">文件路径：' + params.data.filePath + '</span>' + '<br>' +
  214.           '<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">文件大小：' + params.data.fileSize + '</span>' + '<br>' +
  215.           '<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">终端名称：' + params.data.terminalName + '</span>' + '<br>' +
  216.           '<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">操作员名称：' + params.data.operatorName + '</span>' + '<br>' +
  217.           '<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">流转次数：' + params.data.circulationTimes + '</span>' + '<br>' +
  218.           '<span style="padding-left:5px;height:20px;line-height:20px;display: inline-block;font-size: 13px;">更新时间：' + params.data.updateTime + '</span>' + '<br>'
  219.       } else {
  220.         return params.data.name
  221.       }
  222.     }
  223.   }
  224. }
  225. </script>
  226.  
  227. <style scoped>
  228.  
  229. </style>

如下想用js实现上述代码，可参选另一篇文章：参考地址

本文内容由网友自发贡献，转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/124045
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。