百度eCharts 学习笔记

百度eCharts  动态数据绑定     总结

• 使用步骤

• 代码演示

• 效果展示

1. 使用步骤

       （1）、引入eCharts 的js插件( eCharts单文件引入 )

               引入eCharts 的js插件 的方法有种：

               a、直接引入百度echarts的js插件  

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

               b、项目中已部署了eCharts.js的插件

                    <script type="text/javascript" src="${url}/echarts.js"></script>

      （2）、新建<script>标签中为模块加载器配置echarts和所需图表的路径   ）（个人认为可省去）

               <script type="text/javascript">

                   // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } });

                </script>

         （3）、<script>标签内动态加载echarts和所需图表以及动态绑定数据时的

1. 代码演示(前台代码)代码

   <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
      <div id="main"></div>
   <script type="text/javascript">
       var myChart = echarts.init(document.getElementById('main'));
       myChart.setOption({
           title: {
               text: '柱状图的名称',
               x:'left'
           },
           tooltip : {
               trigger: 'axis'
           },
           legend: {
               data:['柱状图的图例1','柱状图的图例1']
           },
           color:['red','blue'],
           xAxis: {
               name:'x轴的名称',   
               data: []       //x轴的数据  
           },
           yAxis: {
               splitLine: { show: false },//去除网格线
               name: 'Y轴的名称'
           },
           series: [{
               barWidth: "20px",
               name: '鼠标提示名称',
               type: 'bar',
               itemStyle: {
                   normal: {
                       label: {
                           show: true, //开启显示
                           position: 'top', //在上方显示
                           textStyle: { //数值样式
                               color: 'black',
                               fontSize: 16
                           }
                       }
                   }
               },
               data: []
           }
           ]
       });
   
       myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
       $("#buttonID").click(function () {
            //获取要传往后台的参数
          var x=...;
          var y=....;
          var  datas={
                   "x":x,
                   "y":y
               };
          myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画
          $.ajax({
              type: 'POST',
              url : "url",//请求数据的地址
              data:datas,
              dataType: "json",        //返回数据形式为json
           success: function (result) {
                //获取从后台返回的数据   为json格式
             var  xx=[];
             var yy=[];
             xx=result.x轴的数据;
             yy=result.y轴的数据;
             myChart.setOption({        //加载数据图表
                      xAxis: {
                          data: xx //['','','']
                      },
                      series: [{
                          // 根据名字对应到相应的系列
                          name:'y轴',
                          type: 'bar',
                          data: yy
                      }
                      ]
                  });
           error: function (errorMsg) {
                  //请求失败时执行该函数
                  alert("图表请求数据失败!");
                  myChart.hideLoading();
              }
          });
       });
   </script>

    

2. 效果展示