正文

手机端也能轻松看！ECharts图表如何实现完美适配

/0 浏览量
0926

在移动时代，手机端展示图表已经成为数据分析报告和网站应用中的一个重要环节。ECharts作为一款功能强大的图表库，提供了丰富的图表类型和高度灵活的配置项。但如何让ECharts图表在手机端也能轻松展示并达到完美适配，是需要我们深入探讨的话题。

一、响应式设计

1. 响应式布局

首先，我们需要保证图表容器能够适应不同屏幕尺寸。这可以通过CSS媒体查询（Media Queries）来实现，针对不同的屏幕宽度设置不同的样式。

<style>
@media screen and (max-width: 600px) {
  .chart-container {
    width: 100%;
    height: 200px;
  }
}

@media screen and (min-width: 601px) {
  .chart-container {
    width: 500px;
    height: 300px;
  }
}
</style>

2. ECharts配置适配

在ECharts配置中，我们也可以通过media属性来对不同屏幕尺寸进行适配。

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

var option = {
  media: [
    {
      query: {
        maxWidth: 600
      },
      option: {
        series: [
          {
            type: 'pie',
            radius: '50%',
            center: ['50%', '60%'],
            data: [
              {value: 1048, name: '搜索引擎'},
              {value: 735, name: '直接访问'},
              {value: 580, name: '邮件营销'},
              {value: 484, name: '联盟广告'},
              {value: 300, name: '视频广告'}
            ]
          }
        ]
      }
    },
    {
      query: {
        minWidth: 601
      },
      option: {
        series: [
          {
            type: 'pie',
            radius: '60%',
            center: ['50%', '60%'],
            data: [
              {value: 1048, name: '搜索引擎'},
              {value: 735, name: '直接访问'},
              {value: 580, name: '邮件营销'},
              {value: 484, name: '联盟广告'},
              {value: 300, name: '视频广告'}
            ]
          }
        ]
      }
    }
  ]
};

myChart.setOption(option);

二、触摸屏优化

在移动设备上，用户主要通过手指进行操作。以下是一些优化建议：

1. 按钮点击区域

确保图表中的按钮和元素足够大，便于用户点击。

2. 放大和缩小

提供手势缩放功能，使用户能够更容易查看细节。

option = {
  series: [
    {
      type: 'line',
      data: [120, 200, 150, 80, 70, 110, 130],
      markPoint: {
        data: [
          {type: 'max', name: '最大值'},
          {type: 'min', name: '最小值'}
        ]
      },
      markLine: {
        data: [
          {type: 'average', name: '平均值'}
        ]
      }
    }
  ],
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'horizontal',
    left: 'left'
  },
  toolbox: {
    show: true,
    feature: {
      dataZoom: {
        yAxisIndex: 'none'
      },
      dataView: {
        readOnly: false
      },
      magicType: {
        type: ['line', 'bar', 'stack', 'tiled']
      },
      restore: {},
      saveAsImage: {}
    }
  },
  xAxis: {
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: {},
  dataZoom: [{
    type: 'inside',
    start: 0,
    end: 10
  }, {
    start: 0,
    end: 10
  }]
};

myChart.setOption(option);

myChart.on('dataview:refresh', function (params) {
  var size = myChart.getSize();
  var dataZoomRange = params.start + params.end;
  var dataZoomStart = params.start / 10;
  var dataZoomEnd = dataZoomRange / 10;

  if (size.width < 600) {
    myChart.resize();
    myChart.setOption({
      xAxis: {
        boundaryGap: true
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      dataZoom: [{
        type: 'inside',
        start: dataZoomStart,
        end: dataZoomEnd
      }]
    });
  }
});

3. 禁用鼠标滚动

在移动端，禁用鼠标滚轮滚动可以防止用户在查看图表时意外触发滚动条。

myChart.on('click', function (params) {
  myChart.getZr().on('mousewheel', null);
});

三、性能优化

1. 减少资源大小

对图表资源进行压缩和优化，例如合并图片、减少字体数量等。

2. 动画优化

合理使用动画效果，避免在移动端造成卡顿。

option = {
  animationDurationUpdate: 1000,
  series: [
    {
      type: 'graph',
      symbolSize: 50,
      roam: true,
      label: {
        normal: {
          position: 'right',
          formatter: '{b}'
        }
      },
      edgeSymbol: ['circle', 'arrow'],
      edgeSymbolSize: [4, 10],
      data: [
        {name: '节点1', x: 100, y: 100},
        {name: '节点2', x: 300, y: 300},
        {name: '节点3', x: 500, y: 500}
      ],
      links: [
        {source: '节点1', target: '节点2'},
        {source: '节点1', target: '节点3'},
        {source: '节点2', target: '节点3'}
      ]
    }
  ]
};

myChart.setOption(option);

3. 减少事件监听

尽量减少图表中事件监听的数量，避免对性能造成影响。

四、总结

通过以上几个方面的优化，我们可以在手机端实现ECharts图表的完美适配。在实际应用中，我们需要根据具体需求进行调整，以达到最佳效果。希望这篇文章能够帮助你解决在移动端展示ECharts图表时遇到的问题。

-- 展开阅读全文 --