h5+echarts大屏数据展示经验总结

1 篇文章 0 订阅
1 篇文章 0 订阅
  1. 布局,一般情况下大屏都是恰好铺满整个屏幕,当我们f11切换全屏时候经常会导致空出一节或者有部分内容超出屏幕,导致观赏效果不佳。这时候我们只需要用100vh设置一个总容器再利用flex布局填充总容器就可以确保任何情况都是铺满全屏。
  2. 大屏资源实例:https://gitee.com/lvyeyou/DaShuJuZhiDaPingZhanShi该项目总结了很多大屏样式,可以模仿设计出适合自己的方案。智慧社区智慧社区
  3. echarts实例,图表可以很直观的表示数据特征,同事又很具有观赏性,因此大屏制作中常用到许多图表,https://gallery.echartsjs.com/explore.html提供了很多漂亮的echarts图例子,通常我们只需在该网站上找到适合自己的图表,copy下来加上自己的数据稍作修改就可以达到意想不到的效果。
  4. 优秀的配色和图表间的间隔设计可以让大屏给人一种眼前一亮的感觉,大大提升大屏的感染力(这是对比了自己和同事做的大屏后的感想),然而配色是个很难很费时间得活,能交给美工最好,如果没有美工只能自己慢慢调整,https://color.adobe.com/zh/create这个工具可以自由搭配颜色,通过一定得颜色搭配原理找到适合放一起得颜色。
  5. 仅仅一个静态的大屏难免让人觉得枯燥,我们可以让图表产生轮播的效果让图表动起来,echarts-auto-tooltip.js这个插件可以很方便的用一行代码让图表动起来。用法:https://www.cnblogs.com/chengwb/p/5833454.html
  • 4
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用uni-app提供的插件uni-echarts来在H5页面中使用echarts。具体步骤如下: 1. 安装uni-echarts插件:在HBuilderX中打开项目,点击菜单栏的工具 -> 插件市场,在搜索框中输入uni-echarts,点击安装即可。 2. 在需要使用echarts的页面引入echarts库和uni-echarts组件: ```html <template> <view> <uni-echarts :option="option" :height="300px"></uni-echarts> </view> </template> <script> import * as echarts from 'echarts'; import uniEcharts from '@/components/uni-echarts/uni-echarts.vue'; export default { components: { uniEcharts }, data() { return { option: { // echarts配置项 } } }, mounted() { // 初始化echarts实例 const chart = echarts.init(this.$refs.echarts); // 设置option chart.setOption(this.option); } } </script> ``` 3. 在option中配置echarts图表的相关参数,例如: ```javascript option: { title: { text: '某站点用户访问来源', subtext: '纯属虚构', left: 'center' }, tooltip: { trigger: 'item', formatter: '{a} <br/>{b} : {c} ({d}%)' }, legend: { orient: 'vertical', left: 'left', data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'] }, series: [ { name: '访问来源', type: 'pie', radius: '55%', center: ['50%', '60%'], data: [ {value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'} ], emphasis: { itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值