Echarts使用指南

一.介绍

ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

二.使用

结构目录：

引用：

<script src="<%=ctx%>/scripts/echarts/build/dist/echarts.js"></script>

html代码：

  <!--功能 start-->
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="height:400px;width:1000px;float:left;text-align:center;"></div>

js代码：

 var myChart;
  var eCharts;
  var table;

  // 路径配置
  require.config({
    paths: {
      echarts: '<%=ctx%>/scripts/echarts/build/dist'
    }
  });

  require(
          [
            'echarts',
            'echarts/chart/pie'  // 使用饼状图就加载pie模块，按需加载
          ],
          DrawEChart //异步加载的回调函数绘制图表
  );

  //创建ECharts图表方法
  function DrawEChart(ec) {
    eCharts = ec;
    //实例化需要加载数据的div
    myChart = eCharts.init(document.getElementById('main1'));
    myChart.showLoading({
      text : "图表数据正在努力加载..."
    });

    //定义图表option
    var option = {
      tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient : 'vertical',
        x : 'left',
        data:['出国','失业','录研','较好就业','一般就业','较差就业','其他']
      },
      toolbox: {
        show : true,
        feature : {
          mark : {show: true},
          dataView : {show: true, readOnly: false},
          magicType : {
            show: true,
            type: ['pie', 'funnel']
          },
          restore : {show: true},
          saveAsImage : {show: true}
        }
      },
      calculable : false,
      series : [
        {
          name:'访问来源',
          type:'pie',
          selectedMode: 'single',
          radius : [0, 70],

          // for funnel
          x: '20%',
          width: '40%',
          funnelAlign: 'right',
          max: 1548,

          itemStyle : {
            normal : {
              label : {
                position : 'inner'
              },
              labelLine : {
                show : false
              }
            }
          },
          data:[
            {value:2000, name:'就业'},
            {value:500, name:'录研'},
            {value:500, name:'其他', selected:true}
          ]
        },
        {
          name:'访问来源',
          type:'pie',
          radius : [100, 140],

          // for funnel
          x: '60%',
          width: '35%',
          funnelAlign: 'left',
          max: 1048,
          data:[
            {value:1000, name:'较好就业'},
            {value:700, name:'一般就业'},
            {value:300, name:'较差就业'},
            {value:500, name:'录研'},
            {value:320, name:'出国'},
            {value:180, name:'失业'}
          ]
        }
      ]
    };

    myChart.setOption(option); //先把可选项注入myChart中
    myChart.hideLoading();
// getChartData();//aja后台交互

  };

附加ajax请求返回数据渲染相关代码：

    function getChartData() {
      //获得图表的options对象
      var options = myChart.getOption();
      //通过Ajax获取数据
      $.ajax({
        type : "post",
        async : false, //同步执行
        url : "getJson_TrackCharts_getDeviceLocation",
        data: {floorNo:$("#floorNo").val(), floorLayer:$("#floorLayer").val()},
        dataType : "json", //返回数据形式为json
        success : function(result) {
          if (result) {
            options.series[0].geoCoord =eval("("+result.geoCoord+")");
            options.series[0].markPoint.data=eval("("+result.markPoint+")");
            myChart.hideLoading();
            myChart.setOption(options);
          }
        },
        error : function(errorMsg) {
          alert("不好意思，大爷，图表请求数据失败啦!");
          myChart.hideLoading();
        }
      });
    }

效果：

echarts官网：点击打开实例