echarts圖表的封裝

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

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

1.引入echarts.js文件

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

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

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

3.通過 echarts.init進行綁定DOM初始化--從這里開始下面的步驟都是在立即執行函數中進行(function(){ })()

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();// echarts需要判斷父元素是否有寬高從而做出判斷
  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'
    }]
};