echarts 如何使用

ECharts是一个强大的JavaScript图表库，用于创建各种交互式的数据可视化图表。使用ECharts的基本步骤如下：

1. **引入依赖**：
首先，在HTML文件中通过CDN引入ECharts的JS和CSS文件：

   <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
   <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/theme/macarons.min.css">

2. **初始化图表**：
创建一个DOM元素来容纳图表，并在JavaScript中实例化一个ECharts对象：

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

3. **配置选项**：
根据需要选择图表类型（如柱状图、折线图等），并设置数据和配置项：

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

4. **渲染图表**：
将配置项应用到图表上并显示：

   myChart.setOption(option);

5. **事件监听和交互**：
可以添加事件监听器来响应用户交互，比如点击或鼠标移动事件。

myChart.on('click', function (params) {
  console.log('点击了 ' + params.name);
});