其實echarts官網有個快速上手的教程，一般人看一遍也知道是怎麼回事，先給個傳送門吧--五分鐘上手

引入方式多種多樣就自己去官網看了--這裡簡單介紹echarts怎麼用，下方的封裝函式比較重要

1.引入echarts.js檔案

<script src="echarts.min.js"></script>

2.定義一個DOM容器，設定寬高

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

var myChart = echarts.init(document.getElementById('main'));
 

4.指定圖表的配置項

var option = { 
title: { text: 'ECharts 入門示例' },
tooltip: {}, legend: { data:['銷量'] }, 
xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, 
yAxis: {},
series: [{ 
        name: '銷量', 
        type: 'bar', 
        data: [5, 20, 36, 10, 10, 20] }]
};

5.將其兩者進行結合，把option的資料渲染到mychart內

myChart.setOption(option);
 

6.做好適配工作，進行縮放

window.addEventListener("resize",function(){
    myChart.resize()
})

**當然你也可以給echarts封裝成一個函式**

/**
  * title: 圖表顯示設定
  * obj：指定物件，必須為id
  * data：圖表資料
  * themeStyle：圖表主題
  **/
function chartSet(obj, data, themeStyle) {
  themeStyle = themeStyle || '';// 判斷是否擁有主題,一般可以不用寫，echarts方法init中第二個引數
  if ($(obj).length == '0') { // jq判斷是否存在這個物件
    return 0;
  }
  that.ratio(obj); // 設定物件的寬高
  var docObj = document.getElementById(obj.replace('#', ''));//拿到物件的id進行轉換
  var myChart = echarts.init(docObj, themeStyle);//初始化echarts圖表
  myChart.setOption(data, true);// 將data資料渲染到圖表中
  myChart.resize();// echarts的圖表縮放自適應
  $(window).on('resize', function () { //resize不能off否則其他地方失效
    if ($(obj).is(':visible')) {
      ratio(obj);
      myChart.setTheme(themeStyle);
      myChart.resize();
    }
  });
  return myChart;
};
/**
  * title: 定義圖表寬高
  * obj：指定物件
  * callback：回撥函式，預設為空
  **/
function ratio(obj, callback) {
  var $obj = $(obj);
  callback = callback || null;
  if ($obj.length == '0') {
    return;
  }
  var objH, objW, HH;
  objH = $obj.parent().height();
  objW = $obj.parent().width();
  HH = objH > objW ? objW : objH; //按最小值計算
  $obj.css({
    "height": HH,
    "width": "100%"
  });
  callback && callback(objH, objW);
};
 

對於上表的資料data，就是正常編寫的option資料格式，如下--官網找了個最簡單的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'
    }]
};