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. 請先登錄

      發 布
深圳风采彩票