echarts饼图--数据交互

最新推荐文章于 2022-10-19 11:20:36 发布

weixin_30262255

最新推荐文章于 2022-10-19 11:20:36 发布

阅读量155

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dongxiaolei/p/5749907.html

版权

<!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>

转载于:https://www.cnblogs.com/dongxiaolei/p/5749907.html

weixin_30262255

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
echarts饼图--数据交互

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><div id="main" style="height:400px;"&g...
复制链接

扫一扫