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'
    }]
};