Echarts如何适配移动端

ECharts 是一个使用 JavaScript 实现的开源可视化库，用于制作各种图表。为了让 ECharts 在移动端适配良好，可以遵循以下步骤：

1. 引入 ECharts 库

在 HTML 文件中通过 script 标签引入 ECharts 库。你可以从 ECharts 官网下载最新版本的库文件，或者使用 CDN 链接。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

2. 创建图表容器

在 HTML 文件中创建一个用于显示图表的 div 元素，并设置其宽高。为了适配移动端，可以使用 vw（视口宽度的百分比）和 vh（视口高度的百分比）单位。

<div id="myChart" style="width: 100vw; height: 100vh;"></div>

3. 初始化 ECharts 实例

在 JavaScript 文件中，首先获取图表容器的 DOM 元素，然后使用 echarts.init() 方法初始化一个 ECharts 实例。

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

4. 配置图表选项

创建一个包含图表配置的对象。为了适配移动端，可以设置一些响应式的选项，例如调整字体大小、图例位置等。

var option = {
  title: {
    text: 'ECharts 示例'
  },
  tooltip: {},
  legend: {
    data:['销量']
  },
  xAxis: {
    data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};

5. 设置图表选项

将配置好的图表选项设置到 ECharts 实例中。

myChart.setOption(option);

6. 监听窗口大小变化

为了让图表在移动端设备上自适应屏幕大小，需要监听窗口大小变化事件，并调用 ECharts 实例的 resize() 方法。

window.addEventListener('resize', function () {
  myChart.resize();
});

按照以上步骤，ECharts 图表就可以在移动端设备上良好地适配了。如果需要进一步优化移动端体验，可以考虑使用 ECharts 提供的 media 查询功能，根据不同的屏幕尺寸设置不同的图表配置。