echarts 最基础使用

echarts官网：http://echarts.baidu.com/

点击进入后；

点击下载 :可以根据需要选择自己所需要的类型：

一般选择常用就供初学者使用：

引入js：

<script src="/echarts.min.js"></script>//路径要引对

<div id="echar" style="height:300px;"></div>

div 必须要有宽高否则不会显示

<script>

var myChart ;
$(function () {
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById('echar'));//名字与div 的id相对应
    drawStockReport();
    var option = {
        title: {
            text: ''
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data:['入库','出库']//此处名字与series中的 name相对
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '5%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['2017-08-22','2017-10-22','2017-07-21']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'入库',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[10,20,30]
            },
            {
                name:'出库',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[50,78,44]
            }

        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
});
</script>