ECharts的基本使用與方法

ECharts,一個使用 JavaScript 實現的開源可視化庫,能夠流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴矢量圖形庫 ZRender,提供直觀,交互豐富,可高度個性化定製的數據可視化圖表。javascript

繪製數據圖表

1.柱狀圖

chart1.png

代碼實現
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小(寬高)的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基於準備好的dom,初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和數據
        var option = {
            title: {
                text: 'ECharts 入門示例'
            },
 tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

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

2.折現圖

chart2.png

代碼實現
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
     <title>ECharts</title>
     <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小(寬高)的Dom -->
           <div id="main" style="width: 600px;height:400px;"></div>
           <script type="text/javascript">
               // 基於準備好的dom,初始化echarts實例
               var myChart = echarts.init(document.getElementById('main'));
        // 指定圖表的配置項和數據
        var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>

</body>
</html>

3.餅圖

chart3.png

代碼實現
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
     <title>ECharts</title>
     <!-- 引入 echarts.js -->
    <script src="js/echarts.min.js"></script>
</head>
<body>
    <!-- 爲ECharts準備一個具有大小(寬高)的Dom -->
           <div id="main" style="width: 600px;height:400px;"></div>
           <script type="text/javascript">
               // 基於準備好的dom,初始化echarts實例
               var myChart = echarts.init(document.getElementById('main'));
        // 指定圖表的配置項和數據
        var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎']
    },
    series: [
        {
            name: '訪問來源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接訪問'},
                {value: 310, name: '郵件營銷'},
                {value: 234, name: '聯盟廣告'},
                {value: 135, name: '視頻廣告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};
        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
    </script>

</body>
</html>
更多有關 ECharts 的使用方法,可參考 ECharts 的官方文檔: https://echarts.apache.org/zh/index.html
相關文章
相關標籤/搜索