SOURCE

// 柱状图
var myChart = echarts.init(document.getElementById('charts1'));
// 指定图表的配置项和数据

var option = {
  title: {
    text: '综合能力',
    left: 'center',
    top: 20
  },
  legend: {
    bottom: 3,
    orient: 'horizontal',
    textStyle: {
      fontSize: 14
    },
    data: ['父母', '肌萌', '妈妈的', '假妈', '母婴', '育儿', '妈力奥', '试试']
  },
  xAxis: {
    data: ['6月25日', '7月2日', '7月9日', '7月16日', '7月23日', '7月30日', '8月6日', '8月13日']
  },
  yAxis: {
    min: 300,

  },
  grid: {
    x: '10%',
    y: '13%',
    width: '78%',
    height: '68%'
  },
  dataZoom:{type:'slider',
            start:50,
            end:100,
           },
  series: [{
    name: '父母',
    type: 'line',
    itemStyle: {
      normal: {
        color: 'rgb(64,111,207)'
      }
    },
    data: [518, 515, 511, 505, 504, 515, 512, 513]
  },
  {
    name: '肌萌',
    type: 'line',
    itemStyle: {
      normal: {
        color: 'rgb(217,38,0)'
      }
    },
    data: [365, 373, 369, 364, 347, 353, 352, 366]
  },
  {
    name: '妈妈的',
    type: 'line',
    itemStyle: {
      normal: {
        color: 'rgb(20,152,28)'
      }
    },
    data: [384, 390, 385, 376, 368, 389, 387, 392],
  },
  {
    name: '假妈',
    type: 'line',
    itemStyle: {
      normal: {
        color: 'rgb(153,1,153)'
      }
    },
    data: [379, 386, 392, 379, 363, 387, 387, 395],
  },
  {
    name: '母婴',
    type: 'line',
    itemStyle: {
      normal: {
        color: 'rgb(0,145,193)'
      }
    },
    data: [377, 380, 368, 352, 340, 351, 373, 359],
  },
  {
    name: '育儿',
    type: 'line',
    itemStyle: {
      normal: {
        color: 'rgb(255,146,0,0.9)'
      }
    },
    data: [339, 343, 341, 346, 337, 351, 361, 372],
  },
  {
    name: '妈力奥',
    type: 'line',
    itemStyle: {
      normal: {
        color: 'rgb(221,68,119)'
      }
    },
    data: [371, 375, 358, 350, 364, 376, 378, 386],
  },
  {
    name: '试试',
    type: 'line',
    itemStyle: {
      normal: {
        color: 'rgb(83,160,0)'
      }
    },
    data: [382, 386, 387, 384, 375, 381, 385, 397]
  }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//Ajax动态改变数据
/*setInterval(function () {
        $.ajax({
            type: "post",
            url: "",
            //data: {arg1:'',arg2: ''},
            dataType: "json",
            success: function (data) {
                myChart.setOption({
                    series: [{
                        data: data
                    }]
                });
            }
        });
    }, 1000);*/

<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js">
</script>
<script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.js">
</script>
<div id="charts1" style="width:600px;height:400px;margin-top:10px;">
</div>