zoukankan      html  css  js  c++  java
  • 图表自动轮播

    下载地址:

    https://github.com/liuyishiforever/echarts-auto-tooltip

    引入ehcrts-auto-tooltips:

    <script src="../js/echarts-auto-tooltip.js" charset="utf-8"></script>

    在初始化 echarts 实例并通过 setOption 方法生成图表的代码下添加如下代码

            /**
             * 玫瑰图表
             */
        $(document).ready(function(){
            var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
    
            var optionPies = {
                title: {
                    text: '指标名称-玫瑰图',
                    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%'],
                        roseType: 'radius',
                        data: [
                            {value: 335, name: '直接访问'},
                            {value: 310, name: '邮件营销'},
                            {value: 234, name: '联盟广告'},
                            {value: 135, name: '视频广告'},
                            {value: 368, name: '搜索引擎'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            echartsPies.setOption(optionPies);
           tools.loopShowTooltip(echartsPies, optionPies, {loopSeries: true});
        });

    运行效果图:

  • 相关阅读:
    将表中数据生成SQL语句
    遍历页面所有的控件
    MSN不能登陆
    刷新框架页
    JS传参出现乱码
    iframe攻击
    有关于VS调试Javascript的问题
    C#中StringBuilder类的使用
    前瞻XAML
    Asp.Net在SqlServer中的图片存取
  • 原文地址:https://www.cnblogs.com/redhat588/p/14236799.html
Copyright © 2011-2022 走看看