ECharts簡單入門

時間 2019-11-18 標籤 echarts 簡單入門

圖1和圖2是手機上顯示的效果，
圖3是電腦瀏覽器顯示的效果。javascript

如何使用ECharts?html

1.下載echarts.js

2.引入echarts.js

<script type="text/javascript" src="../../plugin/echarts/echarts.js"></script>

3.定義div區域

<div id="ec1" style="width: 100%;height:400px;"></div>

<div id="ec2" style="width: 100%;height:400px;"></div>

4.初始化並關聯區域

// 基於準備好的dom，初始化echarts實例
var myEc1 = echarts.init(document.getElementById('ec1'));

5.配置數據與參數

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

6.填充區域

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

tips:這裏最核心的就是option這個參數了，配置不一樣的option，就會顯示不一樣的圖表內容。java

完整案例：瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    <title>echarts測試</title>
</head>

<body style="overflow: hidden;">

<header class="aui-bar aui-bar-nav">
    echarts測試
</header>

<!-- 爲 ECharts 準備一個具有大小（寬高）的 DOM -->
<div id="ec1" style="width: 100%;height:400px;"></div>

<div id="ec2" style="width: 100%;height:400px;"></div>


<script type="text/javascript" src="../../plugin/echarts/echarts.js"></script>

<script>
    // 基於準備好的dom，初始化echarts實例
    var myEc1 = echarts.init(document.getElementById('ec1'));

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

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

    var myEc2 = echarts.init(document.getElementById('ec2'));
    option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            // 座標軸指示器，座標軸觸發有效
                type : 'line'        // 默認爲直線，可選爲：'line' | 'shadow'
            }
        },
//        label:{
//            normal:{
//                show: true,
//                position: 'inside'}
//        },
        legend: {
            data:['直接粉絲','間接粉絲']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['一月','二月','三月','四月','五月','六月','七月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'直接粉絲',
                type:'bar',
                data:[320, 332, 301, 334, 390, 330, 320]
            },

            {
                name:'間接粉絲',
                type:'bar',
                stack: '廣告',
                data:[150, 232, 201, 154, 190, 330, 410]
            }
        ]
    };

    myEc2.setOption(option);

</script>

</body>
</html>

具體使用，能夠參考官方案例，http://echarts.baidu.com/examples.htmlecharts