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

最新推荐文章于 2024-07-24 14:17:10 发布
最新推荐文章于 2024-07-24 14:17:10 发布
阅读量1k 收藏 1
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lMasterSparkl/article/details/111667082
版权

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

描述

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

参考链接

v-chart官方文档对应位置

lMasterSparkl
关注
专栏目录
vue -- 折线 chart,加载loading状态,没有数据时显示“暂无数据“
King Saj
12-19 1168
需求： chart 图请求数据时,要求chart 显示loading状态. 如无数据的情况下显示"暂无数据"文字 效果： 实现: 封装获取 getDefaultEchartOption.js 将1:折线图,2:柱状图,3:饼图, 进行封装. 页面引入 getDefaultEchartOption(),使用 getDefaultEchartOption(‘line’) 获取 getDefaultEchartOption(‘bar’) 获取不同的图标配置 export function getDefau
vue中v-charts图表数据如何从后台获取？【篇二】
**My Coding Family**
01-20 8534
vue中v-charts图表数据如何从后台获取？超级详细！
echarts 图表无数据/空数据 展示“暂无数据”
热门推荐
细节怪的博客
08-15 2万+
我们从后端获取数据动态渲染图表时，难免会遇到数据为空的情况（虽然实际应用中这样的bug极少遇到），但考虑周全一点也好，看如何实现吧。
echarts没数据的时候，页面显示暂无数据
最新发布
qq_58307541的博客
07-24 728
echarts没数据的时候，页面显示暂无数据。
echarts的数据是null,折线图断线，连不起来
while(life)++；
03-08 9064
数据是Null的时候，折线图断断续续的， 想要连起来，有个属性:connectNulls,设置为true，为空值时，不会断线了。 这个属性写在series中： option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series:
vue- 后台接口没有数据时显示：提示的信息页面
IT博客技术分享
11-08 8369
废话少说上代码：
vue 封装的 echarts 组件被同一个页面多次调用，数据被覆盖问题解决办法。
qq_36437172的博客
03-04 6779
子组件： <template> <div> <div id="myChart" :style="echartStyle"></div> </div> </template> echarts init 选择 id选择器元素来初始化了 this.charts = this.$ech
vchart 坐标轴标题_EChart 标题 title 样式，x轴、y轴坐标显示，调整图表位置等
weixin_30836221的博客
12-28 1246
示例里工作一般情况是够用了，更复杂的可以查询教程：function getChartsLine() {var myChart = echarts.init(document.getElementById('progress'),'macarons');var option = {title: {text: '工程折线图', //主标题textStyle:{color:'#0DB9F2',...
echarts地图无数据想显示背景色
Coinker的博客
03-24 3148
需求如下； 部分省无数据，想显示默认背景色灰色。 解决方案： 后端返回接口，无数据的省份值为null即可。 echarts 配置如下 geo: { map: 'china', roam: false, zoom:1.2, label: { normal: { show:true, textStyle: { fon
matlab文本边框颜色代码-absol-vchart:SVG图表，基于absol.js
05-28
matlab文字边框颜色代码图表 SVG图表，基于absol.js 概括 班级 晚餐班 标签 可调整大小 自动宽度 排名图 图表 排名表 :check_mark: :check_mark: 范围图 图表 范围图 :check_mark: 评估图 图表 评估图 :check_mark: ...
V-chart 修改tooltip 提示文字
深度
02-01 1097
效果如图 我加了个单位(分钟,秒) 今天看了半天官方文档, 怎么配置没有作用!!! 然后从github找到了答案 特此记录 新加一个配置对象 tooltip 配置对象的字段在这里找 https://echarts.apache.org/zh/option.html#tooltip 示例 https://codepen.io/maxycode/pen/gQMbLq 如果想在data中调用methods方法需要这样做 data 里的return之前先保存一下当前Vue对象 然后...
v-charts离线文档开发版
04-21
v-charts离线文档，适合内网开发参考用，最近参加内网开发，啥文档也没有，痛苦啊，有了离线文档，谁用谁知道，献给同样内网开发的前端小伙伴
echart3 没有数据时显示暂无数据的解决方案
zjwxyy1994的博客
09-29 1万+
百度了好久，都无法解决，有的说有echart2的nodatashow属性，但是echart3删除了，有的说用showloading，但是来回切换的时候有加载动画体验不好，没办法只能翻墙了，皇天不负苦心人，终于找了好的解决方案，不懂说直接贴图 data是接受的数据，如果是数组就写成data.length===0,如果是对象那就写成Object.keys(data).length===0 t...
v-charts没有根据数据刷新动态渲染的问题
coffeesweet的博客
08-25 8222
vue工程中需要用到echarts显示柱形图，而echarts有个对vue很友好的开源封装项目叫v-charts，而使用v-charts的过程中碰到了数据更新但是v-charts图形不刷新的问题，也就是没监听到数据，下面是未更新图形的代码写法： <ve-histogram :legend="legend" :xAxis="xAxis" :yAxis="yAxis" :toolt...
echarts 图表无数据为空时显示“暂无数据”
細水、長流√的专栏
12-22 1万+
如标题所述，我们希望 echarts 图表在没有数据时显示 “-暂无相关数据-” 字样。 操作： 需要对返回的数据做判断，如果有数据则正常显示图表，如果没有数据，我们将此 div 的内容改为文本 “-暂无相关数据-”，并设置样式即可。 HTML： <div id="chart"></div> JS（Vue）： 方法（一）： // 无数据时：展示暂无数据 const dom = document.getElementById('chart'); dom.innerHT
echarts显示暂无数据
努力的小玲子
07-18 2万+
1、 初始化图表的位置、大小啥的 <el-row :gutter="20"> <el-col :span="12"> <el-card> <div id="userBox" class="chart-box"></div> </el-card> ...
使用v-chart遇见的问题
jdrunk的博客
08-16 551
v-chart 无数据时图表不显示的解决方案 双y轴刻度对齐，规定数据与右边y轴对齐 <template> <div id="app"> <ve-histogram :data="histogramData" class="sss" :settings="chartSettings" :y-axis="yAxis" :extend="option" ></ve-h
Charts配置在没有数据时的显示效果
weixin_33922670的博客
03-18 731
外部装备有两种方法 第一种： noDataLoadingOption :{ 　　text :"暂无数据...", 　　effect : function(params){ 　　params.start = function(h){ 　　　　h._bgDom.style.backgroundImage = 'url(http://e.hiphotos.baid...
vue循环生成3个echarts图表，每个图表中都有年月日的按钮可以分别点击查询，在点击按钮的时候查询对应的图表数据
05-30
好的，我理解了你的问题。针对你的需求，我可以给你一些思路来实现这个功能： 1. 首先，在 Vue 中使用 v-for 循环生成 3 个 Echarts 组件，每个组件都需要绑定不同的数据和配置。 2. 在每个 Echarts 组件中，可以添加一个按钮组件，用来选择查询的时间范围。按钮组件可以使用 element-ui 或者其他 UI 框架中的组件来实现。 3. 当用户点击按钮时，可以使用 axios 或者其他的 HTTP 请求库向后端发送请求，获取对应时间范围内的数据。 4. 在获取到数据后，需要更新对应的 Echarts 组件的数据和配置，以显示最新的图表。 下面是一个简单的示例代码，供你参考： ``` <template> <div> <div v-for="(chart, index) in charts" :key="index"> <el-button-group> <el-button @click="fetchData(chart, 'day')">按天</el-button> <el-button @click="fetchData(chart, 'month')">按月</el-button> <el-button @click="fetchData(chart, 'year')">按年</el-button> </el-button-group> <v-chart :options="chart.options" :data="chart.data" /> </div> </div> </template> <script> import axios from 'axios'; import { Chart } from 'echarts'; import VChart from 'vue-echarts'; export default { components: { VChart }, data() { return { charts: [ { options: { // Echarts 配置 }, data: [] }, { options: { // Echarts 配置 }, data: [] }, { options: { // Echarts 配置 }, data: [] } ] }; }, methods: { fetchData(chart, type) { axios.get(`/api/${type}`).then(response => { chart.data = response.data; }); } } }; </script> ``` 在上面的代码中，我们使用了 element-ui 中的按钮组件来选择时间范围，使用了 axios 发送 HTTP 请求来获取数据，使用了 vue-echarts 来渲染图表。你可以根据自己的需求进行修改和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值