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();