ECharts

時間 2019-11-16

標籤 echarts 简体版

原文原文鏈接

最近纔看了下百度的ECharts統計圖表，發現效果確實很不錯，而且易用性很強，這裏簡單記錄一下使用方法。javascript

一、下載好echarts.js,以及esl.jsjava

二、準備一個裝載圖標的容器(<div id="main" style="height:400px"></div>)echarts

三、配置js的路徑（dom

require.config({
paths:{
'echarts' : 'js/echarts',
'echarts/chart/pie' : 'js/echarts'
}
});ui

）搜索引擎

四、調用require()使用圖表，並經過（spa

[
'echarts',
'echarts/chart/pie' // 使用柱狀圖就加載bar模塊，按需加載
] rest

）加載須要的圖表code

五、調用 var myChart = ec.init(document.getElementById('main')); 初始化加載區域orm

六、而後設置option參數（此參數能夠去官網搜索對應圖表的參數值），並經過 myChart.setOption(option); 將參數賦值給圖表

具體DEMO代碼以下

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
     <script src="js/esl.js"></script>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
    <div id="main" style="height:400px"></div>
     <script type="text/javascript">
        // 路徑配置
        require.config({
            paths:{ 
                'echarts' : 'js/echarts',
                'echarts/chart/pie' : 'js/echarts'
            }
        });
        
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) {
                // 基於準備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main')); 
                
                option = {
                        title : {
                            text: '某站點用戶訪問來源',
                            subtext: '純屬虛構',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient : 'vertical',
                            x : 'right',
                            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:1548, name:'搜索引擎'}
                                ]
                            }
                        ]
                    };
        
                // 爲echarts對象加載數據 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

相關標籤/搜索

每日一句

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