echarts饼图自动轮播和内容位置的显示

最新推荐文章于 2025-06-05 16:39:45 发布

nz618

最新推荐文章于 2025-06-05 16:39:45 发布

阅读量4.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/nz618/article/details/88948310

本文展示了如何使用Echarts实现饼图的自动轮播效果，并详细配置了图表的显示内容，包括标题、提示框、图例等。通过引入echarts-tooltip-carousel.js，实现了饼图数据的循环显示，同时提供了自定义更新数据的函数选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <link rel="stylesheet" href="css/bootstrap.min.css" />
       <link rel="stylesheet" href="css/bootstrap-theme.min.css" />
       <link rel="stylesheet" href="css/style.min.css" />
       <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
       <script type="text/javascript" src="js/Chart.min.js"></script>
       <script type="text/javascript" src="js/bootstrap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="js/echarts-tooltip-carousel.js"></script>//引入自动循环方法
   </head>
   <body>
       <div id="chartmain" style="width:600px; height: 400px;border:1px solid red;margin:20px auto;"></div>
       <script type="text/javascript">

//自定义数组样式
       var seriesData1=[{
           value:100,
           name:'区政府',
           cycle:'5%'
       },
       {
           value:200,
           name:'县政府',
           cycle:'6%'
       },
       {
           value:300,
           name:'镇政府',
           cycle:'7%'
       },
       {
           value:400,
           name:'镇政府2',
           cycle:'8%'
       },
       {
           value:500,
           name:'镇政府5',
           cycle:'9%'
       },
       {
           value:600,
           name:'镇政府6',
           cycle:'10%'
       },
       {
           value:700,
           name:'镇政府7',
           cycle:'11%'
       },
       {
           value:800,
           name:'镇政府8',
           cycle:'12%'
       },
       {
           value:900,
           name:'镇政府9',
           cycle:'13%'
       },]
       var option = {
       animation:true,
                   title : {
                   text: '',
                   textStyle:{
                       color:'#00e0ff',
                       fontSize:24,
                       fontWeight:500,