頁面利用ECharts顯示柱狀圖、餅圖、折線圖、雷達圖Demo

本文轉載自查看原文 2015-01-28 08:51 11574 百度ECharts

柱狀圖：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 為ECharts准備一個具備大小（寬高）的Dom -->
    <div id="main" style="height:400px;width:800px;"></div>
    <!-- ECharts單文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路徑配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
            ],
            function (ec) {
                // 基於准備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main')); 
                
              option = {
    title : {
        text: '某地區蒸發量和降水量',
        subtext: '純屬虛構'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['蒸發量','降水量']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},//輔助線開關
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},//類型是否轉換？折線和柱形互轉
            restore : {show: true},//還原
            saveAsImage : {show: true}//保存為圖片
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [
        {
            name:'蒸發量',
            type:'bar',
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'降水量',
            type:'bar',
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
            markPoint : {
                data : [
                    {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                    {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};
                    
                    
        
                // 為echarts對象加載數據 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

View Code

餅圖：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 為ECharts准備一個具備大小（寬高）的Dom -->
    <div id="main" style="height:400px;width:800px;"></div>
    <!-- ECharts單文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路徑配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/pie' // 使用餅圖就加載pie模塊，按需加載
            ],
            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 : 'left',
        data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
    },
    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: 1548
                    }
                }
            },
            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>

View Code

折線圖：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 為ECharts准備一個具備大小（寬高）的Dom -->
    <div id="main" style="height:400px;width:800px;"></div>
    <!-- ECharts單文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路徑配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/line' // 使用折線圖就加載line模塊，按需加載
            ],
            function (ec) {
                // 基於准備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main')); 
                
             option = {
    title : {
        text: '未來一周氣溫變化',
        subtext: '純屬虛構'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        data:['最高氣溫','最低氣溫']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['周一','周二','周三','周四','周五','周六','周日']
        }
    ],
    yAxis : [
        {
            type : 'value',
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    series : [
        {
            name:'最高氣溫',
            type:'line',
            data:[11, 11, 15, 13, 12, 13, 10],
            markPoint : {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },
        {
            name:'最低氣溫',
            type:'line',
            data:[1, -2, 2, 5, 3, 2, 0],
            markPoint : {
                data : [
                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                ]
            },
            markLine : {
                data : [
                    {type : 'average', name : '平均值'}
                ]
            }
        }
    ]
};
                    
                    
                    
        
                // 為echarts對象加載數據 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

View Code

雷達圖：

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
</head>
<body>
    <!-- 為ECharts准備一個具備大小（寬高）的Dom -->
    <div id="main" style="height:400px;width:800px;"></div>
    <!-- ECharts單文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路徑配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/radar' // 使用雷達圖就加載radar模塊，按需加載
            ],
            function (ec) {
                // 基於准備好的dom，初始化echarts圖表
                var myChart = ec.init(document.getElementById('main')); 
                
               
option = {
    title : {
        text: '預算 vs 開銷（Budget vs spending）',
        subtext: '純屬虛構'
    },
    tooltip : {
        trigger: 'axis'
    },
    legend: {
        orient : 'vertical',
        x : 'right',
        y : 'bottom',
        data:['預算分配（Allocated Budget）','實際開銷（Actual Spending）']
    },
    toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    polar : [
       {
           indicator : [
               { text: '銷售（sales）', max: 6000},
               { text: '管理（Administration）', max: 16000},
               { text: '信息技術（Information Techology）', max: 30000},
               { text: '客服（Customer Support）', max: 38000},
               { text: '研發（Development）', max: 52000},
               { text: '市場（Marketing）', max: 25000}
            ]
        }
    ],
    calculable : true,
    series : [
        {
            name: '預算 vs 開銷（Budget vs spending）',
            type: 'radar',
            data : [
                {
                    value : [4300, 10000, 28000, 35000, 50000, 19000],
                    name : '預算分配（Allocated Budget）'
                },
                 {
                    value : [5000, 14000, 28000, 31000, 42000, 21000],
                    name : '實際開銷（Actual Spending）'
                }
            ]
        }
    ]
};
                                 
        
                // 為echarts對象加載數據 
                myChart.setOption(option); 
            }
        );
    </script>
</body>

View Code

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 數據可視化分析（柱狀圖、餅圖、折線圖、雷達圖） echartsjs 餅圖、柱狀圖、折線圖實例 Jquery畫折線圖、柱狀圖、餅圖百度推出的echarts，制表折線圖柱狀圖餅圖等的超級工具 vue echarts 從后台獲取數據形成餅圖，柱狀圖，折線圖 aChartEngine圖表顯示（餅圖、柱狀圖、折線圖）一個頁面兩個div（一個柱狀圖或者折線圖一個餅圖） echarts中柱狀圖折線圖的基本配置 echarts學習：簡單柱狀圖和折線圖 echarts繪制折線圖、柱狀圖