当前位置：首页 > JavaScript

js实现echarts

2026-02-02 08:28:33JavaScript

使用 ECharts 的基本步骤

安装 ECharts 库，可以通过 npm 或直接引入 CDN 链接：

npm install echarts

或直接在 HTML 文件中引入：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

初始化图表容器

在 HTML 中创建一个容器用于渲染图表：

<div id="chart-container" style="width: 600px; height: 400px;"></div>

初始化 ECharts 实例

通过 JavaScript 初始化 ECharts 实例，并绑定到容器：

// 获取 DOM 元素
const chartDom = document.getElementById('chart-container');
// 初始化 ECharts 实例
const myChart = echarts.init(chartDom);

配置图表选项

定义图表的配置项，包括标题、图例、坐标轴、系列数据等：

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

渲染图表

将配置项应用到图表实例中：

myChart.setOption(option);

响应式调整

监听窗口大小变化，动态调整图表尺寸：

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

动态更新数据

通过 setOption 方法动态更新图表数据：

// 模拟动态数据更新
setInterval(function() {
  const newData = [
    Math.round(Math.random() * 100),
    Math.round(Math.random() * 100),
    Math.round(Math.random() * 100),
    Math.round(Math.random() * 100),
    Math.round(Math.random() * 100),
    Math.round(Math.random() * 100)
  ];
  myChart.setOption({
    series: [{
      data: newData
    }]
  });
}, 2000);

销毁图表实例

在不需要时销毁图表实例，释放资源：

myChart.dispose();

使用主题

ECharts 支持主题配置，可以在初始化时指定主题：

// 引入主题文件
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/theme/dark.js"></script>

// 初始化时应用主题
const myChart = echarts.init(chartDom, 'dark');

异步加载数据

通过异步请求加载数据，再渲染图表：

fetch('data.json')
  .then(response => response.json())
  .then(data => {
    myChart.setOption({
      series: [{
        data: data
      }]
    });
  });

事件处理

绑定图表事件，如点击、鼠标悬停等：

myChart.on('click', function(params) {
  console.log('点击了数据:', params.name, params.value);
});

多图表联动

实现多个图表之间的联动交互：

// 假设有两个图表实例 myChart1 和 myChart2
myChart1.on('brushSelected', function(params) {
  const selectedData = params.batch[0].selected;
  myChart2.dispatchAction({
    type: 'highlight',
    dataIndex: selectedData
  });
});

自定义系列

通过自定义系列实现特殊图表需求：

option = {
  series: [{
    type: 'custom',
    renderItem: function(params, api) {
      // 自定义渲染逻辑
    },
    data: data
  }]
};

地图集成

结合 ECharts 地图功能展示地理数据：

// 注册地图数据
echarts.registerMap('china', chinaJson);

option = {
  series: [{
    type: 'map',
    map: 'china',
    data: [
      {name: '北京', value: 100},
      {name: '上海', value: 200}
    ]
  }]
};

以上内容涵盖了 ECharts 的基本使用方法和常见场景的实现方式。根据具体需求，可以进一步探索 ECharts 的高级功能和配置选项。

js实现echarts