首页 > 其他分享 >vue3-seamless-scroll联合echarts时,无法产生两个chart问题

vue3-seamless-scroll联合echarts时,无法产生两个chart问题

时间:2023-01-03 16:55:47浏览次数:42  
标签:seamless chart init vue3 div echarts

最近需要用到el-table和echarts的滚动播放,在很多关于vue3和echarts的例子中都是这两种的:

//html
<div ref="refinstance">ref</div>

//script
let ref=echarts.init(refinstance.value)

结果用到vue3-seamless-scroll中时,就只有一个chart,查看元素,明明是有两个div的,但因为ref只能指向一个div,所以最终echart只会init一个div。所以还是要用到class才能实现。

//html
<vue3-seamless-scroll>
  <div class="charts-container" />
</vue3-seamless-scroll>

//script
document.querySelectorAll(".charts-container").forEach(div=>{
  let chart=echarts.init(div as HTMLElement);
  …… ……
});

标签:seamless,chart,init,vue3,div,echarts
From: https://www.cnblogs.com/kafeibuhuizui/p/17022731.html

相关文章

  • SimpleAdmin:一个基于.NET6/7+Vue3+Fruion+Sqlsugar的通用后台管理系统
    SimpleAdmin⚡️麻雀虽小,五脏俱全!⚡️......
  • vue3+axios使用echarts的地图
    vue3+axios使用echarts的地图概述:在echarts的官网是直接提供的js代码和网上,如何在vue3中跑起来(各种跨域,各种报错让我想die)附加:之前一直跑不起来的很大原因是完全不清楚......
  • vue+Echarts动态数据已经赋值,但是无法渲染页面的问题
    vue+Echarts动态数据已经赋值,但是无法渲染页面的问题正常的给个div的大小<div><divid="echartss":style="{width:'100%',height:'600px'}"></div></div>......
  • v-charts 图表使用
    安装:npm i v-charts echarts -S入口文件 main.js里面:import VCharts from 'v-charts'Vue.use(VCharts)组件使用:<template><divid="app"><ve-line:data="ch......
  • vue3.0的全局api变化
    1.全局api使用的变化:vue3已经去除Vue语法,取代的是用createApp创建的app  2.其他改变2.1data函数的变化,在vue3data必须是一个函数,否则报错     2.2过......
  • vue3.0新组件
    1.fragment1.1解释和意义   1.2使用:没有特定的标签,直接不使用根标签即可2.teleport(传送)1.1解释和意义:不管嵌套多少层都可以直接进行组件传送1.2使用:t......
  • antd vue3 图片 手动上传
    <template><a-uploadv-model:file-list="fileList"name="avatar"list-type="picture-card"class="avatar-uploader":show-upload-list="false......
  • vue3和vue2对比
    compostionapi:组合api/注入api(3合成型apiCompositionAPI|2选项型apiOptionsAPI)双向数据绑定、响应式原理api的改变this在vue3中与vue2中代表着完成不一样的东西......
  • 关于Echarts地图的一些问题整理
    地图渐变色:    代码片段中x,y,x2,y2表示的是渐变的方式(片段中是上下渐变)    代码片段中emphasis为纹理填充色itemStyle:{normal:{area......
  • echarts实现世界地图,解决series-map和geo同时使用导致在地图上缩放图层会重叠的问题
    主要使用到的配置:geoIndex//将坐标与值对应并反映在地图上convertData(data){varres=[];varthat=thisfor(vari=0;i<data.length;i++)......