第一步：首先在body里给一个“容器”，方便在里面绘制图表

<!-- 容器：id:用来绑定option属性  style:设置容器的大小、位置等样式  ->

<div id="main" style="width:1100px;height:500px;margin-left:auto;margin-right: auto;"></div>

<!-- 获取数据的方法按钮  ->

<input type="button"  onClick="getDate(‘http://....’)" value="提交" />

第二步：编写获取数据的方法

//找到“容器”

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

//编写获取数据的方法

function getDate(url) {

         var vdate = new Array(); //时间：定义变量，接收返回的数据

         var intonum = new Array(); //进入：定义变量，接收返回的数据

         var sumMonth=0;; //总月数：定义变量，方便赋值

         var showPercentage=0;//数据显示的百分比：定义变量，方便赋值

         var myzj=”这里是副标题”;

   $.getJSON(url, function(json) {

       if (json.length > 0) {

       /* 数据溢出的时候：数据显示的百分比 */

         sumJSON=json.length-2;
 
         sumMonth=sumJSON/20;

          showPercentage=Math.round(100/sumMonth);

    /*将数据循环赋值给变量*/

   for (var i = 0; i < json.length - 2; i++) {

          vdate.push(json[i].VDATE);  //JS中给数据赋值用的是.push方法

           intonum.push(parseInt(json[i].INTO_NUM));

          }

      }

}

// 给option中的一些属性赋值【方便赋值option中的动态属性】

   option.title.x = 'center';  //标题的位置

   option.dataZoom[0].end=showPercentage;  //外部滚动条显示的数据占比

   option.dataZoom[1].end=showPercentage;  //内部滑动显示的数据占比

   option.title.subtext=myzj;  //给副标题赋值
 
// 把刚指定的配置项和数据赋值给要绘制图表的“容器”

  myChart.setOption(option);

});

第三步：在javascript中 配置option属性(此处的属性是常用到的)

//定义成变量，方便一会儿赋值使用

var   option = {

    //工具箱

     toolbox : {

        show : true,

        feature : { //特征

        saveAsImage : { //是否保存为图片

        show : true,

        excludeComponents : [ 'toolbox' ], //排除组件

        pixelRatio : 1 //图片的像素比率

                }

            }

    },

//标题

    title : {

        text:'图表的名字（标题）',

        subtextStyle:{ //副标题

             fontSize:14,
    
             color:'red',

            }
    
        },

//工具提示【一般为空】

    tooltip : {

        /*  trigger: 'axis'-->鼠标浮动上去会显示X和Y的交叉点 */

     },

    legend : { //图例

        left : '80%',  

        data : ['第一个含义']  //此处的名字要和“series”中的name一样，否则不显示

    },


//X轴

    xAxis : {

        type : 'category',//类别

        splitLine : {

            show : false
    
            },
    //分割线   

        axisLabel : { //轴标

            interval : 0, //间隔   

            rotate : -30, //旋转

            },

        data : vdate,  //json返回的数据

        boundaryGap : true,

    },

//Y轴

    yAxis :  {

        type : 'value',

        scale:true, //echarts y轴百分比，不写的话系统会自动分配

        axisLabel : {

            formatter : '{value} '

           },

        },

//当数据太多时，可以使用滚动条(在此为X轴数据)

    dataZoom :  

            [{   //外部显示

                     type: 'slider',   //组件的类型：滑块；

                    show: true,

                    start: 0,

                    end:20,

                    handleSize: 8

             },

             { //内部也有效果

                    type: 'inside',

                    start:0,

                    end:20,

              }],

 //图表的一些配置

    series : [{

        name : '第一个含义',

        type : 'line', //折线

        data : intonum, //数据【由连接返回的JSON数据】

        symbol : 'circle', //符号

        symbolSize : 6, //符号大小

        color : [ '#0099FF' ],

        itemStyle : { normal: {label : {show: true}}} ,  

        markLine  : {
 
            lineStyle : {

              normal : {

                  type : 'solid', //实线

                  color : '#FF3300'

                    }

                 },

          data : [ {  //自带的平均值属性，不能改变小数点

                 type : 'average',

                 name : '平均值'

               } ]

           },

    }]

};

第四步：最后把所有的option配置项赋值给“容器”，以便“容器”根据配置项绘制图表
 

myChart.setOption(option);

   最后：看一下效果图

echart html5折线图 echarts绘制折线图_赋值