echarts 基础讲解

$(document).ready(function() {
          var amount ;  //最好放在document....内
            var name  ;
      var residue ;
      $.ajax({
      url:"../test/mycharts",   
      type: "POST",
        async:false,
        dataType: "json",
        success: function( data ) {
        console.log(data);
        amount = data.amount ;
        name = data.name ;
        residue = data.residue ;
        }
      });
     
      var myChart = echarts.init(document.getElementById("main"));
     
      var option ={
          title:{
          text:'测试myecharts'
          },
          //图注，点击图出现某点数据
          tooltip:{   1
         
          },
          //图注 ，最上面
          legend:{  3
          data:['销量','库存']
//            y:100
          },
//折线图，矩形图，下载图标
    toolbox: {   2
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    
    // 缩放
dataZoom :[   
    {  
             type: 'slider',//图表下方的伸缩条
             show : true,  //是否显示
             realtime : true,  //
             start : 0,  //伸缩条开始位置（1-100），可以随时更改
             end : 100,  //伸缩条结束位置（1-100），可以随时更改
        },{  
                 type: 'inside',  //鼠标滚轮
                 realtime : true,  
                 //还有很多属性可以设置，详见文档
        }],
        calculable : true,
          //x轴显示
          xAxis:{
          type : 'category',
          boundaryGap : false,  //两边留白
          data: name 
          },
          yAxis: {
                      type : 'value',
                      axisLabel : {
                          formatter: '{value} 个'
                      }
                  },
          series:[
              {
          name:'销量',
          type:'line',
          smooth:true,  7
          data:amount
          },
          {
          name:'库存',
          type:'line',
          data:residue
          }
          ]
          }
         
          myChart.setOption(option);
      });