当前位置： 首页 > article >正文

大屏走马灯与echarts图表柱状图饼图开发小结

article 2024/11/6 7:30:31

一、使用ant-design-vue的走马灯(a-carousel)注意事项

<!-- 左边的轮播图片 -->
        <a-carousel :after-change="handleCarouselChange" autoplay class="carousel" :transition="transitionName">
            <div v-for="(item, index) in items" :key="index" class="carousel-item">
                <img :src="item.image" alt="" />
            </div>
        </a-carousel>

after-change不是afterChange否则不生效

ant官网:走马灯 Carousel - Ant Design (antgroup.com)

swiper官网:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发

二、echarts柱状图与饼图使用总结

（1）、柱状图

添加右上角切换柱状图数据功能配置信息

x与y轴的样式调节

实现样式

（2）、饼状图使用总结

1、饼图标题换行\n

2、图例展示样式

3、饼图本身

饼图主色

效果图


http://www.kler.cn/a/327130.html

相关文章：

  • Vue（JavaScript）读取csv表格并求某一列之和（大浮点数处理: decimal.js）
  • 黑马官网2024最新前端就业课V8.5笔记---HTML篇
  • 【力扣专题栏】重排链表，如何实现链表里面节点之间的交换？
  • 408——计算机网络（持续更新）
  • 提高文本处理效率：精通awk命令中的$NF
  • Docker-安装
  • 嵌入式单片机底层原理详解
  • 一文详解WebRTC、RTSP、RTMP、SRT
  • 《深圳大学学报理工版》
  • 【玩转贪心算法专题】56. 合并区间【中等】
  • 004集—— txt格式坐标写入cad（CAD—C#二次开发入门）
  • mobile_aloha训练过程中pycharm编辑器遇到的问题记录
  • 拿下奇怪的前端报错：SyntaxError: Unexpected token ‘??=‘或‘xxx‘ - 浅谈Nodejs版本过高过低的部分问题
  • ping香港服务器超时的原因通常有哪些？
  • 【笔记】电子绕核运动的轨道半径求解
  • 详解zookeeper四字命令
  • 大数据的挑战是小文件
  • 配音软件哪个好？配音小白用这些
  • Java入门（基础，常见API，JVM，JUC并发编程）
  • NVIDIA 的 Blackwell 架构：解析 B100、B200 和 GB200
  • ndb9300public-ndb2excel简介
  • Spring Boot 自动装配机制实战与业务案例
  • 随时随地点餐：Spring Boot 点餐系统
  • 数通 1
  • php如何实现局部替换功能
  • VS2022 Git功能的使用