ECharts插件使用封装示例,改变窗口自适应大小

  ·   echarts     浏览量:

封装示例

var chart = {}
chart.areaLine = function (options) {
  var defaults = {
    element: '', // echarts着陆元素
    title: '',   // 标题
    xAxis: '',   // X坐标
    legend:'',   // 图例名字  需要和data数据名相同
    data: ''     // 表格数据
  };

  // 默认值覆盖
  var opts = $.extend({}, defaults, options);

  // 基于准备好的dom,初始化echarts实例
  var myChart = echarts.init(document.getElementById(opts.element));

  // 指定图表的配置项和数据
  var option = {
    title: {
      text: opts.title
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: opts.legend
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      boundaryGap: false,
      data: opts.xAxis
    }],
    yAxis: [{
      type: 'value'
    }],
    series: opts.data
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);

  // 重置窗口自适应大小
  window.onresize = function(){
    setTimeout(function(){
      myChart.resize();
    }, 300)
  }
}

defaults中可根据需要自行添加变量,具体参数参考ECharts官网

调用

chart.areaLine({
    element: 'tbl-one',
    xAxis: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
    data: [{
      name: '邮件营销',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '联盟广告',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '视频广告',
      type: 'line',
      stack: '总量',
      areaStyle: {},
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '直接访问',
      type: 'line',
      stack: '总量',
      areaStyle: {
        normal: {}
      },
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: '搜索引擎',
      type: 'line',
      stack: '总量',
      label: {
        normal: {
          show: true,
          position: 'top'
        }
      },
      areaStyle: {
        normal: {}
      },
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
})

重置大小代码

// 重置窗口自适应大小
window.onresize = function(){
setTimeout(function(){
  myChart.resize();
}, 300)
}

在上面的封装示例中已将加入了,需要说明的是添加setTimeout是因为我原本的页面中有自定义缩放,如果不添加延迟,echarts获取的是上一次变化的大小结果,不需要可以删掉



收起 >>
ECharts插件使用封装示例,改变窗口自适应大小