echarts动态图表

一款非常实用的图表插件工具echarts。首先贴上官网地址http://echarts.baidu.com/，截取了官网实例的一个图，可以看到官方提供的图表类型非常的丰富，也有详细的使用文档。

官网截图

下面简单介绍echarts的使用

第一步：下载官网的echarts源代码

第二步：创建一个项目，页面中引入echarts.js，并且创建一个元素用来初始化图表

  <!DOCTYPE html>
  <html>
  <head>
     <title>echarts</title>
  </head> 
  <script type="text/javascript" src="js/echarts.js"></script>
  <body>
      <div id="echarts" style="width: 600px;height:400px;"></div> 
  </body> 
  </html>

第三步：初始化与数据配置（图表的配置项可以在官网实例中找到自己合适的图表点开复制里面的配置参数即可），如下：

<script type="text/javascript">
//初始化容器 init()
var myChart = echarts.init(document.getElementById('echarts'));
// 指定图表的配置项和数据
var option = {
         color:['#999'], 
         xAxis: {  //X轴 
             type: 'category', 
             data: ['1', '2', '3', '4', '5', '6', '7'], //X轴文字项 
             axisLabel:{ 
                 color:"#666"  //X轴文字颜色 
             }, 
         }, 
         yAxis: {  //Y轴，注意 如果Y轴是数据的话 那不需要进行每项设置，会根据下面设置的数据进行自动展示数据组 
             type: 'value', 
             axisLabel:{ 
                 color:"#666" 
             }, 
         }, 
         series: [{  //图标数据展示 
             data: [120, 200, 150, 80, 70, 110, 130], 
             type: 'bar'  //图表类型 bar 柱状图 
         }] 
     }; 
     // 设置数据 setOption 
     myChart.setOption(option); 
 </script>

官方文档：在文档的配置项中，可以看到对图表的详细配置参数，比如下图X坐标轴的配置项

图表参数截图

最后附上我上面贴的代码的效果图

demo效果图

echarts动态图表

推荐阅读更多精彩内容