开源教程在线编辑器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts 实例</title>
	<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        $.when(
            $.getScript('/static/js/timelineGDP.js'),
            $.getScript('/static/js/draggable.js')
        ).done(function () {

draggable.init(
                $('div[_echarts_instance_]')[0],
                myChart,
                {
                    width: 700,
                    height: 400,
                    throttle: 70
                }
            );

myChart.hideLoading();

option = {
                baseOption: {
                    title : {
                        text: '南丁格尔玫瑰图',
                        subtext: '纯属虚构',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        data:['rose1','rose2','rose3','rose4','rose5','rose6','rose7','rose8']
                    },
                    toolbox: {
                        show : true,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {
                                show: true,
                                type: ['pie', 'funnel']
                            },
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    series : [
                        {
                            name:'半径模式',
                            type:'pie',
                            roseType : 'radius',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            lableLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            data:[
                                {value:10, name:'rose1'},
                                {value:5, name:'rose2'},
                                {value:15, name:'rose3'},
                                {value:25, name:'rose4'},
                                {value:20, name:'rose5'},
                                {value:35, name:'rose6'},
                                {value:30, name:'rose7'},
                                {value:40, name:'rose8'}
                            ]
                        },
                        {
                            name:'面积模式',
                            type:'pie',
                            roseType : 'area',
                            data:[
                                {value:10, name:'rose1'},
                                {value:5, name:'rose2'},
                                {value:15, name:'rose3'},
                                {value:25, name:'rose4'},
                                {value:20, name:'rose5'},
                                {value:35, name:'rose6'},
                                {value:30, name:'rose7'},
                                {value:40, name:'rose8'}
                            ]
                        }
                    ]
                },
                media: [
                    {
                        option: {
                            legend: {
                                right: 'center',
                                bottom: 0,
                                orient: 'horizontal'
                            },
                            series: [
                                {
                                    radius: [20, '50%'],
                                    center: ['25%', '50%']
                                },
                                {
                                    radius: [30, '50%'],
                                    center: ['75%', '50%']
                                }
                            ]
                        }
                    },
                    {
                        query: {
                            minAspectRatio: 1
                        },
                        option: {
                            legend: {
                                right: 'center',
                                bottom: 0,
                                orient: 'horizontal'
                            },
                            series: [
                                {
                                    radius: [20, '50%'],
                                    center: ['25%', '50%']
                                },
                                {
                                    radius: [30, '50%'],
                                    center: ['75%', '50%']
                                }
                            ]
                        }
                    },
                    {
                        query: {
                            maxAspectRatio: 1
                        },
                        option: {
                            legend: {
                                right: 'center',
                                bottom: 0,
                                orient: 'horizontal'
                            },
                            series: [
                                {
                                    radius: [20, '50%'],
                                    center: ['50%', '30%']
                                },
                                {
                                    radius: [30, '50%'],
                                    center: ['50%', '70%']
                                }
                            ]
                        }
                    },
                    {
                        query: {
                            maxWidth: 500
                        },
                        option: {
                            legend: {
                                right: 10,
                                top: '15%',
                                orient: 'vertical'
                            },
                            series: [
                                {
                                    radius: [20, '50%'],
                                    center: ['50%', '30%']
                                },
                                {
                                    radius: [30, '50%'],
                                    center: ['50%', '75%']
                                }
                            ]
                        }
                    }
                ]
            };
            myChart.setOption(option);

});
    </script>
</body>
</html>