echarts餅圖--數據交互

時間 2019-11-12

標籤 echarts 餅圖數據交互简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="main" style="height:400px;"></div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/echarts.js"></script>
<script type="text/javascript">
    /*餅圖 鼠標通過時模塊放大功能 */
    // 路徑配置
    require.config({
        paths: {
            echarts: 'js/'
        }
    });

    // 使用
    require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) {
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main'));
                setInterval(function(){
                    $.get("js.json",function(data){
                        var param = {legen:[],data:[]};
                        for(var i = 0 ;i<data.length;i++){
                            param["legen"].push(data[i]["name"]);
                            var obj = {};
                            obj.value = data[i]["age"];
                            obj.name = data[i]["name"];
                            param["data"].push(obj);
                        }
                        var option = {
                            title : {
                                text: '某站點用戶訪問來源',
                                subtext: '純屬虛構',
                                x:'left'
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: param["legen"]
                            },
                            series : [
                                {
                                    name: '訪問來源',
                                    type: 'pie',
                                    radius : '55%',
                                    center: ['50%', '60%'],
                                    data:param["data"],
                                    selectedMode:"multiple",//點擊以後 扇形分離
                                    legendHoverLink:true,
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }

                                }
                            ]
                        };
                        // 爲echarts對象加載數據
                        myChart.setOption(option);
                    },"json");
                },1000);
            }
    );
</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。