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 查詢功能，根據不同的屏幕尺寸設置不同的圖表配置。