Echarts实现静态和动态图表

Echarts静态图表

Echarts是一个使用 JavaScript 实现的开源可视化库，包含各种各样的图表，静态图表实现步骤如下：
1、引入echarts.js，去Echarts官网下载对应的文件或者使用CDN

<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

2、为Echarts图表准备一个具有大小的Dom

<div id="main" style="width: 600px;height:400px;"></div>

3、复制对应图表的js代码

<script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'));
  // 复制想使用的图表的option
  var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    // X轴数据
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }]
  };
  myChart.setOption(option);
</script>

可以去官网上的官方实例或者社区Gallery寻找想要的图表。
也可以参照Echarts API设计或者修改图表。

Echarts+ajax实现动态图表

// 定义一个柱状图函数
function bar(res1,res2){
  var myChart = echarts.init(document.getElementById('main'));
  var option = {
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      // x轴数据res1
      data: res1
    },
    yAxis: {},
    series: [{
      name: '销量',
      type: 'bar',
      // 数值数据res2
      data: res2
    }]
  };
  myChart.setOption(option);
}

// 使用jquery ajax获取接口的json数据，需要先引入jquery.js
$.ajax({
  // get/post
  type: "get",
  // 同步/异步
  async: false,
  // myurl可以是自定义的路由地址(/index)或者某个接口地址
  url: myurl,
  // 接受的数据类型
  dataType: "json",
  // 成功后的回调函数
  success: function (res) {
    // 根据需要处理res，此图表需要x轴数据res1和数值数据res2
    // 调用上面柱状图函数并传入处理好的值
    bar(res1,res2);
  }
})