js实现echarts
使用 ECharts 的基本步骤
安装 ECharts 可以通过 npm 或直接引入 CDN 链接。以下是两种方式的实现方法。
通过 CDN 引入 在 HTML 文件中直接引入 ECharts 的 CDN 链接：
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>通过 npm 安装 在项目中运行以下命令安装 ECharts：
npm install echarts --save初始化图表容器
在 HTML 中创建一个容器用于渲染图表：
<div id="chart-container" style="width: 600px; height: 400px;"></div>初始化 ECharts 实例
在 JavaScript 中获取容器并初始化 ECharts 实例：
const chartDom = document.getElementById('chart-container');
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]
}
]
};渲染图表
将配置项设置到 ECharts 实例中：
myChart.setOption(option);响应式调整
监听窗口大小变化，动态调整图表大小：
window.addEventListener('resize', function() {
myChart.resize();
});按需引入模块（适用于 npm 安装）
如果项目体积敏感，可以按需引入模块以减少打包体积：
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([
BarChart,
GridComponent,
TooltipComponent,
LegendComponent,
CanvasRenderer
]);
const myChart = echarts.init(document.getElementById('chart-container'));动态更新数据
通过 setOption 方法动态更新图表数据：
function updateChart(newData) {
myChart.setOption({
series: [{
data: newData
}]
});
}销毁图表实例
在不需要图表时，调用 dispose 方法释放资源：
myChart.dispose();
