echarts基礎應用

繪製圖表

1. 建立一個div dom

<div id="main" style="width:600px;height:500px"></div>

1. 初始化echarts例項

var mychar=echarts.init(document.getElementById('main'));

1. 指定圖表的配置項和資料

var option={
        //標題元件
        title:{
            text:'測試一下'
        },
        //圖例元件。
        legend:{},
        //直角座標系 grid 中的 x 軸
        xAxis:{
            name:'星期',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        //直角座標系 grid 中的 y 軸
        yAxis:{},
        //系列列表。每個系列通過 type 決定自己的圖表型別
        series:[{
             data:[120, 200, 150, 80, 70, 110, 130],
             type:'bar'
        }]
    };

1. 使用剛指定的配置項和資料顯示圖表

mychar.setOption(option);

原始碼

$(function(){
    //餅狀圖
    var mychar3=echarts.init(document.getElementById('pie'));
    var option3={
        title:{
            text:'餅圖'
        },
        series:[{
            type:'pie',
            radius: ['50%', '70%'],//成環形
            data:[
                {value:10,name:'A'},
                {value:10,name:'B'},
                {value:10,name:'C'},
                {value:10,name:'D'},
                {value:10,name:'E'}
            ]
        }]
    };
    mychar3.setOption(option3);
    //折線圖
    var mychar2=echarts.init(document.getElementById('line'));
    var option2={
        title:{
            text:'折線圖'
        },
        xAxis:{
            type:'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis:{},
        series:[{
            type:'line',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
        }]
    };
    mychar2.setOption(option2);
    //柱形圖
    var mychar=echarts.init(document.getElementById('bar'));
    var option={
        title:{
            text:'柱形圖'
        },
        legend:{},
        xAxis:{
            name:'星期',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis:{},
        series:[{
             data:[120, 200, 150, 80, 70, 110, 130],
             type:'bar'
        }]
    };
    mychar.setOption(option);
});