jquery - 动画效果html5饼形数据统计图1476
一款html5 canvas实现的饼形数据统计图。
相关代码
  // 路径配置
        require.config({
            paths:{ 
                'echarts' : 'echarts',
                'echarts/chart/pie' : 'echarts'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                var option = {
    title : {
        text: '某站点用户访问来源',
        subtext: '纯属虚构',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        orient : 'vertical',
        x : 'left',
        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'访问来源',
            type:'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1500, name:'搜索引擎'}
            ]
        }
    ]
};
                    
                    
                myChart.setOption(option); 
            }
        );

技术讨论区(3 个讨论)

  1. 那抹离殇ぴ 3

    那抹离殇ぴ @ 李学麟

    样式默认设置display:none。然后js写鼠标悬浮事件(".元素").hover

    2014-8-20 10:02:11 | 回复

  2. 李学麟 2

    李学麟

    怎么去除饼图的指示换成滑过显示??

    2014-8-20 9:31:53 | 回复

  3. test 1

    test

    这饼形数据统计图效果真的不错

    2014-8-6 8:48:14 | 回复

  4. 请先登录

      发 布