echars的使用+案例展示

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

Staticfile CDN（国内） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
jsDelivr：https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

vue的小伙伴可以直接用npm下载最新的echarts版本

$ npm install echarts --save

简单使用

准备一个DOM容器

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

创建一个简单的折现图

var chartDom = document.getElementById('chartmain');
var myChart = echarts.init(chartDom);
var option;

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
};

option && myChart.setOption(option);

效果如下图：

案例

请把一个数组加入1到100的数字，随机打乱，以折线图的形式展现出来。

  <div id="chartmain" style="width:600px; height: 400px;"></div>
  <script>
    var arr = []
    var newarr = []
    for (var i = 1; i <= 100; i++) {
      arr.push(i)
      newarr.push(i)
    }
    newarr.sort(() => Math.random() - 0.5);

    var option = {
      tooltip: {},
      xAxis: {
        data: arr
      },
      yAxis: {
		type:'value'
      },
      series: [{
        name: '晚星good',
        type: 'line',
        data: newarr
      }]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);
  </script>

效果如下图：

小伙伴们也动手做做把。

自适应刷新