Echarts3简单图标是咧

 
 

  
  这个是基于Echarts3做的柱形图，折线图，饼形图，中间还有自定义图标
 
 
 
 


 
 
 
 

  
  <div style="margin-left: auto;margin-right: auto">
 
 
 
 

  
          <div id="mainleft" style="height:300px;border:1px solid #ccc;padding:10px;width: 550px;float: left;"></div>
 
 
 
 

  
          <div id="mainright" style="height:300px;border:1px solid #ccc;padding:10px;width: 550px;float: right;">aaa</div>
 
 
 
 

  
      </div>
 
 
 
 

  
      <script src="${ctxStatic}/echarts/echarts.min.js"></script>
 
 
 
 

  
      <script type="text/javascript">
 
 
 
 

  
          var workTodayCount;
 
 
 
 

  
          var myChart;
 
 
 
 

  
          $(document).ready(function() {
 
 
 
 

  
              workTodayCount = ${fns:toJson(workTodayCount)};
 
 
 
 

  
              pie(workTodayCount);
 
 
 
 

  
              bar(workTodayCount);
 
 
 
 

  
          });
 
 
 
 

  
          function bar(workTodayCount){
 
 
 
 

  
              myChart = echarts.init(document.getElementById('mainleft'));
 
 
 
 

  
              if(!workTodayCount){
 
 
 
 

  
                  myChart.showLoading({
 
 
 
 

  
                      text: '正在努力加载中...'
 
 
 
 

  
                  });
 
 
 
 

  
              }
 
 
 
 

  
              myChart.setOption({
 
 
 
 

  
                  title: {
 
 
 
 

  
                      text: '今日工作',
 
 
 
 

  
                      left:'left'
 
 
 
 

  
                  },
 
 
 
 

  
                  toolbox: {
 
 
 
 

  
                      show : true,
 
 
 
 

  
                      feature : {
 
 
 
 

  
                          //折线，柱形
 
 
 
 

  
                          magicType : {show: true, type: ['line', 'bar']},
 
 
 
 

  
                          //自定义饼形
 
 
 
 

  
                          myTool2: {
 
 
 
 

  
                              show: true,
 
 
 
 

  
                              title: '饼形图切换',
 
 
 
 

  
                              icon: 'image://http://echarts.baidu.com/images/favicon.png',
 
 
 
 

  
                              onclick: function (){
 
 
 
 

  
                                  pie(workTodayCount);
 
 
 
 

  
                              }
 
 
 
 

  
                          },
 
 
 
 

  
                          //换原
 
 
 
 

  
                          restore : {show: true},
 
 
 
 

  
                          //保存
 
 
 
 

  
                          saveAsImage : {show: true}
 
 
 
 

  
                      }
 
 
 
 

  
                  },
 
 
 
 

  
                  xAxis: {
 
 
 
 

  
                      data: [workTodayCount.pfsString,workTodayCount.zcpfsString,workTodayCount.bylasString,workTodayCount.hfsString,workTodayCount.hbsString]
 
 
 
 

  
                  },
 
 
 
 

  
                  yAxis : [{
 
 
 
 

  
                      type : 'value',
 
 
 
 

  
                      splitArea : {show : true}
 
 
 
 

  
                  }],
 
 
 
 

  
                  series: [{
 
 
 
 

  
                      name: '今日工作',
 
 
 
 

  
                      type: 'bar',
 
 
 
 

  
                      data: [workTodayCount.pfs,workTodayCount.zcpfs,workTodayCount.bylas,workTodayCount.hfs,workTodayCount.hbs]
 
 
 
 

  
                  }]
 
 
 
 

  
              });
 
 
 
 

  
          }
 
 
 
 

  
          function pie(workTodayCount){
 
 
 
 

  
              myChart = echarts.init(document.getElementById('mainright'));
 
 
 
 

  
              if(!workTodayCount){
 
 
 
 

  
                  myChart.showLoading({
 
 
 
 

  
                      text: '正在努力加载中...'
 
 
 
 

  
                  });
 
 
 
 

  
              }
 
 
 
 

  
              myChart.setOption({
 
 
 
 

  
                  title: {
 
 
 
 

  
                      text: '今日工作'
 
 
 
 

  
                  },
 
 
 
 

  
                  tooltip : {
 
 
 
 

  
                      trigger: '今日工作',
 
 
 
 

  
                      formatter: "{a} <br/>{b} : {c} ({d}%)"
 
 
 
 

  
                  },
 
 
 
 

  
                  toolbox: {
 
 
 
 

  
                      show : true,
 
 
 
 

  
                      feature : {
 
 
 
 

  
                          mark : {show: true},
 
 
 
 

  
                          magicType : {
 
 
 
 

  
                              show: true,
 
 
 
 

  
                              type: ['pie', 'tiled']
 
 
 
 

  
                          },
 
 
 
 

  
                          myTool2: {
 
 
 
 

  
                              show: true,
 
 
 
 

  
                              title: '柱形图切换',
 
 
 
 

  
                              icon: 'image://http://echarts.baidu.com/images/favicon.png',
 
 
 
 

  
                              onclick: function (){
 
 
 
 

  
                                  bar(workTodayCount);
 
 
 
 

  
                              }
 
 
 
 

  
                          },
 
 
 
 

  
                          restore : {show: true},
 
 
 
 

  
                          saveAsImage : {show: true}
 
 
 
 

  
                      }
 
 
 
 

  
                  },
 
 
 
 

  
                  series : [
 
 
 
 

  
                      {
 
 
 
 

  
                          name:'今日工作',
 
 
 
 

  
                          type:'pie',
 
 
 
 

  
                          radius : '65%',
 
 
 
 

  
                          data:[
 
 
 
 

  
                              {value:workTodayCount.pfs, name:workTodayCount.pfsString},
 
 
 
 

  
                              {value:workTodayCount.zcpfs, name:workTodayCount.zcpfsString},
 
 
 
 

  
                              {value:workTodayCount.bylas, name:workTodayCount.bylasString},
 
 
 
 

  
                              {value:workTodayCount.hfs, name:workTodayCount.hfsString},
 
 
 
 

  
                              {value:workTodayCount.hbs, name:workTodayCount.hbsString}
 
 
 
 

  
                          ]
 
 
 
 

  
                      }
 
 
 
 

  
                  ]
 
 
 
 

  
              });
 
 
 
 

  
          }
 
 
 
 

  
      </script>