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);
});