为什么我在echarts官网上拿下来的饼图不能和锥形图不能切换呢?官网可以?

huangwenke 发布于 2016/04/29 11:47
阅读 84
收藏 0

这个是我的代码

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script type="text/javascript" src="/res/weixin/js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="/res/js/echarts.js"></script></head>
<body>
    <div id="main" style="width: 800px;height:400px;"></div>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载
            ],
function (ec) {
    // 基于准备好的dom,初始化echarts图表
    var myChart = ec.init(document.getElementById('main')); 
    var idx = 1;
    option = {
        timeline : {
            data : [
                    '2013-01-01', '2013-02-01'
            ],
            label : {
                formatter : function(s) {
                    return s.slice(0, 7);
                }
            }
        },
        options : [
            {
                title : {
                    text: '年度积分占比变化',
                    subtext: '积分'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    data:['Chrome','Firefox','Safari','IE9+','IE8-']
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true, 
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                    width: '50%',
                                    funnelAlign: 'left',
                                    max: 1700
                                }
                            }
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                series : [
                    {
                        name:'浏览器(数据纯属虚构)',
                        type:'pie',
                        center: ['50%', '45%'],
                        radius: '50%',
                        data:[
                            {value: idx * 128 + 80,  name:'Chrome'},
                            {value: idx * 64  + 160,  name:'Firefox'},
                            {value: idx * 32  + 320,  name:'Safari'},
                            {value: idx * 16  + 640,  name:'IE9+'},
                            {value: idx++ * 8  + 1280, name:'IE8-'}
                        ]
                    }
                ]
            },
            {
                series : [
                    {
                        name:'浏览器(数据纯属虚构)',
                        type:'pie',
                        data:[
                            {value: idx * 128 + 80,  name:'Chrome'},
                            {value: idx * 64  + 160,  name:'Firefox'},
                            {value: idx * 32  + 320,  name:'Safari'},
                            {value: idx * 16  + 640,  name:'IE9+'},
                            {value: idx++ * 8  + 1280, name:'IE8-'}
                        ]
                    }
                ]
            }
        ]
    };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        });
    </script>
</body>

</html>


加载中
返回顶部
顶部