关于使用echarts.js插件写的一个折线图demo

   近来由于工作需要，研究了一下echarts.js这个插件，顿时觉得这款插件太过牛逼，不得不拜服。废话不多说，接下来直接上demo.

html部分： <div id="charts" ></div>  //首先定义一个div放置图表

css部分： #charts{//给DIV定义宽高
        width: 300px;
        height: 50px;
        }

js部分：<script src="js/jquery-2.1.4.min.js"></script>//引入路径

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

<script>

 require.config({
           paths: {
               echarts: 'http://echarts.baidu.com/build/dist'
           }
       });
       
       // 使用 
       require(
           [
               'echarts',
               'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
           ],
           function (ec) {
               // 基于准备好的dom，初始化echarts图表
               var myChart = ec.init(document.getElementById('charts')); 
               var option = {
   tooltip: {                                  // 气泡提示配置
       trigger: 'item',                        // 触发类型，默认数据触发，可选为：'axis'
   },
   xAxis: [                                    // 直角坐标系中横轴数组
       {
           type: 'category',                   // 坐标轴类型，横轴默认为类目轴，数值轴则参考yAxis说明
           data: ['07.26', '07.27', '07.28', '07.29', '07.30', '07.31']
       }
   ],
   yAxis: [                                    // 直角坐标系中纵轴数组
       {
           type: 'value',                      // 坐标轴类型，纵轴默认为数值轴，类目轴则参考xAxis说明
       }
   ],
   series: [ 
       {
           name: '',                        // 系列名称
           type: 'bar',                       // 图表类型，折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
           data: [11200, 23000, 45000, 56000, 63300, 94003],
      itemStyle : {
normal : {
color:'#08b5f7',
borderColor:'#08b5f7',

borderRadius: '50%' ,
label : {
show : false,
position : 'top',
textStyle : {
color:'#bbbbbb'
}
},
lineStyle:{
color:'#08b5f7'
}
}
},
       },
   ]
}; 
myChart.setOption(option);
}

）

</script>

最后显示的结果如图所示：