vchart 图表空数据时暂无数据显示在左下角

最新推荐文章于 2024-08-27 19:47:47 发布
原创 最新推荐文章于 2024-08-27 19:47:47 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

在Vue项目中使用v-chart图表进行数据展示时，空数据提示‘暂无数据’位置在左下角未居中。通过查找官方文档，发现需引入css样式文件，加入‘import ‘v-charts/lib/style.css’后可正常显示。

如果觉得有用记得点个关注

描述

vue项目使用v-chart 图表进行数据展示的时候发现空数据时提示的暂无数据位置在左下角没有居中
如图
在这里插入图片描述
查找官方文档发现demo中用注释有标出需要引入css样式文件
在这里插入图片描述
// import ‘v-charts/lib/style.css’
加入后即可正常显示
在这里插入图片描述

参考链接

v-chart官方文档对应位置

vue -- 折线 chart,加载loading状态,没有数据时显示“暂无数据“
King Saj
12-19 1427
需求： chart 图请求数据时,要求chart 显示loading状态. 如无数据的情况下显示"暂无数据"文字 效果： 实现: 封装获取 getDefaultEchartOption.js 将1:折线图,2:柱状图,3:饼图, 进行封装. 页面引入 getDefaultEchartOption(),使用 getDefaultEchartOption(‘line’) 获取 getDefaultEchartOption(‘bar’) 获取不同的图标配置 export function getDefau
Vue自定义指令：在暂无数据时显示文本或自定义组件（ECharts实例）
FpwgTcl的博客
09-20 314
这样，当数据为空时，指令就会根据需要显示相应的文本或自定义组件。在Vue.js中，自定义指令是一种强大的功能，它允许我们直接操作DOM元素。要使用该自定义指令，我们需要将其应用到具体的DOM元素上。如果你希望显示自定义组件，你可以按照你的需求创建并插入相应的组件。首先，我们需要在Vue应用程序中创建一个自定义指令。，用于在没有数据时显示文本或自定义组件（以ECharts为例）。），则在指令所在的元素中插入文本节点或自定义组件。时，指令会根据需求插入文本或自定义组件。需要注意的是，在上述示例中，我们使用了。
echarts 图表无数据/空数据 展示“暂无数据”
细节怪的博客
08-15 2万+
我们从后端获取数据动态渲染图表时，难免会遇到数据为空的情况（虽然实际应用中这样的bug极少遇到），但考虑周全一点也好，看如何实现吧。
使用v-chart遇见的问题
jdrunk的博客
08-16 649
v-chart 无数据时图表不显示的解决方案 双y轴刻度对齐，规定数据与右边y轴对齐 <template> <div id="app"> <ve-histogram :data="histogramData" class="sss" :settings="chartSettings" :y-axis="yAxis" :extend="option" ></ve-h
echarts的数据是null,折线图断线，连不起来
while(life)++；
03-08 1万+
数据是Null的时候，折线图断断续续的， 想要连起来，有个属性:connectNulls,设置为true，为空值时，不会断线了。 这个属性写在series中： option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series:
TypeScript_VChart不仅仅是一个跨平台的图表库，也是一个富有表现力的数据故事讲述者.zip
11-11
TypeScript_VChart 是一个创新的数据可视化工具，它不仅仅提供了一系列的图表组件，让开发者可以在不同平台上轻松展示数据，而且它还赋予了数据以故事性，使得用户在阅读和分析数据时能够更加深入和直观地理解背后的...
开源跨平台图表工具VChart
xuweilin的博客
08-27 1517
VChart是一个由VisActor团队打造的跨平台图表库，它不仅是一个功能强大的可视化工具箱，更是一个优秀的数据叙事者。
Vchart如何清除数据
08-22
3. 如何重置VChart图表到初始状态？ 现在，添加引用： - 在提到引用[^3]的地方添加[^3]。 - 在建议查阅文档时添加[^1]。 回答结构： - 使用中文。 - 没有数学表达式，所以不需要LaTeX。 - 生成相关问题。 确保...
GoView 是一个Vue3搭建的低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可完成业务需求
最新发布
10-01
该平台的特点在于，它将常用的图表和页面元素抽象成易于操作的基础组件，这样一来，用户在进行业务开发时，无需编写复杂的代码，大大提升了开发效率和降低了技术门槛。GoView的出现，使得不具备深度编程能力的业务...
vue- 后台接口没有数据时显示：提示的信息页面
IT博客技术分享
11-08 8484
废话少说上代码：
v-charts离线文档开发版
04-21
v-charts离线文档，适合内网开发参考用，最近参加内网开发，啥文档也没有，痛苦啊，有了离线文档，谁用谁知道，献给同样内网开发的前端小伙伴
vue 封装的 echarts 组件被同一个页面多次调用，数据被覆盖问题解决办法。
qq_36437172的博客
03-04 6989
子组件： &lt;template&gt; &lt;div&gt; &lt;div id="myChart" :style="echartStyle"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/template&gt; echarts init 选择 id选择器元素来初始化了 this.charts = this.$ech
V-chart 修改tooltip 提示文字
深度
02-01 1284
效果如图 我加了个单位(分钟,秒) 今天看了半天官方文档, 怎么配置没有作用!!! 然后从github找到了答案 特此记录 新加一个配置对象 tooltip 配置对象的字段在这里找 https://echarts.apache.org/zh/option.html#tooltip 示例 https://codepen.io/maxycode/pen/gQMbLq 如果想在data中调用methods方法需要这样做 data 里的return之前先保存一下当前Vue对象 然后...
echart3 没有数据时显示暂无数据的解决方案
zjwxyy1994的博客
09-29 1万+
百度了好久，都无法解决，有的说有echart2的nodatashow属性，但是echart3删除了，有的说用showloading，但是来回切换的时候有加载动画体验不好，没办法只能翻墙了，皇天不负苦心人，终于找了好的解决方案，不懂说直接贴图 data是接受的数据，如果是数组就写成data.length===0,如果是对象那就写成Object.keys(data).length===0 t...
v-charts没有根据数据刷新动态渲染的问题
coffeesweet的博客
08-25 8542
vue工程中需要用到echarts显示柱形图，而echarts有个对vue很友好的开源封装项目叫v-charts，而使用v-charts的过程中碰到了数据更新但是v-charts图形不刷新的问题，也就是没监听到数据，下面是未更新图形的代码写法： <ve-histogram :legend="legend" :xAxis="xAxis" :yAxis="yAxis" :toolt...
v-charts中图表高度设置后不变
web前端学习总结
06-08 1万+
v-charts中图表高度设置后不变 v-charts中的height属性 想要动态更改图表的height属性，比如以下写法 &lt;ve-line :data="chartData" :height="wapperHeight" :events="chartEvents"&gt;&lt;/ve-line&gt; 必须要添加： judge-width 属性，图表的高度才会随着你的更改而...
vue中v-charts的使用
热门推荐
weixin_39568103的博客
05-30 4万+
官方文档：https://v-charts.js.org/#/在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。1：在初次安装的时候，用的是官方推荐npm i ...
echart 没有数据的时候，完美展示暂无数据
何婷的博客
12-17 1万+
echart 没有数据的时候，展示暂无数据 data(){ return { show:null, } } 在你掉接口拿数据去渲染chart图标的时候，渲染数据的时候判断一下 if(allLastValue.tzList.length===0 && allLastValue.bMIList.length===0){ show=true; } var myChar...
echarts显示暂无数据
努力的小玲子
07-18 2万+
1、 初始化图表的位置、大小啥的 <el-row :gutter="20"> <el-col :span="12"> <el-card> <div id="userBox" class="chart-box"></div> </el-card> ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值