echarts入門教程

時間 2019-11-18

標籤 echarts 入門教程简体版

原文原文鏈接

1、echarts介紹

　　ECharts是由百度團隊開發的，可高度個性化定製的數據可視化圖表庫。它的底層依賴輕量級的Canvas類庫ZRender，是一個純JavaScript的圖標庫，兼容（IE8/9/10/11，Chrome，Firefox，Safari等）主流瀏覽器，能夠運行在PC和移動設備上。html

2、完成一個簡單圖標

　　廢話很少說，一塊兒來完成一個簡單的圖表，體驗一下ECharts的神奇吧！瀏覽器

　　1.引入ECharts

　　　　ECharts3開始再也不強制使用AMD的方式按需引入，那麼簡單粗暴，直接在官網下載所需ECharts文件，像引入普通JavaScript庫同樣用script標籤引入便可。簡單吧，看代碼：echarts

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts入門</title>
</head>
<body>
   <!-- 引入ECharts文件 -->
    <script src='echarts.min.js'></script>
</body>
</html>

　　　　注：建議把js文件放在body下方spa

　　2.準備一個具有寬高的DOM容器

<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的DOM容器-->
    <div id='main' style='width:600px;height:400px;'></div>
</body>

　　3.初始化一個echarts實例

<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的DOM容器-->
    <div id='main' style='width:600px;height:400px;'></div>
    <!--引入echarts.js-->
    <script src='./echarts.min.js'></script>
    <script>
          //基於準備好的DOM，初始化echarts實例
          var myChart = echarts.init(document.getElementById('main'));
    </script>
</body>

　　4.指定圖表的配置項和數據

//指定圖表的配置項和數據
var option = {
    title:{
        text:'EChars入門'
    },
    //提示框組件
    tooltip:{
        //座標軸觸發，主要用於柱狀圖，折線圖等
        trigger:'axis'
    },
    //圖例
    legend:{
        data:['銷量']
    },
    //橫軸
    xAxis:{
        data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
    },
    //縱軸
    yAxis:{},
    //系列列表。每一個系列經過type決定本身的圖表類型
    series:[{
        name:'銷量',
        //折線圖
        type:'line',
        data:[5, 20, 36, 10, 10, 20]
    }]
};

　　5.顯示圖標

//使用剛指定的配置項和數據顯示圖表
myChart.setOption(option);

　　6.完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts入門</title>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小（寬高）的DOM容器-->
    <div id='main' style='width:600px;height:400px;'></div>
   <!-- 引入ECharts文件 -->
    <script src='./echarts.min.js'></script>
    <script>
          //基於準備好的DOM，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));
          //指定圖表的配置項和數據
        var option = {
            title:{
                text:'EChars入門'
            },
            //提示框組件
            tooltip:{
                //座標軸觸發，主要用於柱狀圖，折線圖等
                trigger:'axis'
            },
            //圖例
            legend:{
                data:['銷量']
            },
            //橫軸
            xAxis:{
                data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            //縱軸
            yAxis:{},
            //系列列表。每一個系列經過type決定本身的圖表類型
            series:[{
                name:'銷量',
                //折線圖
                type:'line',
                data:[5, 20, 36, 10, 10, 20]
            }]
        };
        //使用剛指定的配置項和數據顯示圖表
        myChart.setOption(option);
    </script>
</body>
</html>