面试题：Qwik中如何整合第三方图表库实现数据可视化

安装依赖 在Qwik项目根目录下，通过npm或yarn安装Echarts：

npm install echarts
# 或
yarn add echarts

引入模块 在需要使用Echarts的组件文件中引入：

import echarts from 'echarts';

在组件中使用 以一个简单的柱状图为例：

import { component$, useVisibleTask$ } from '@builder.io/qwik';
import echarts from 'echarts';

export default component$(() => {
    useVisibleTask$(async () => {
        const chart = echarts.init(document.getElementById('chart'));
        const option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }]
        };
        chart.setOption(option);
    });

    return (
        <div id="chart" style={{ width: '600px', height: '400px' }}></div>
    );
});

跨域问题及解决办法

问题：如果Echarts请求的数据接口与前端不在同一个域下，会出现跨域问题，导致数据无法正常获取。
解决办法：
- 后端设置CORS：在后端服务器配置允许前端所在域的跨域请求。例如在Node.js中使用cors中间件：

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors({
    origin: 'http://your - qwik - app - domain.com' // 替换为你的Qwik应用域名
}));
// 其他路由及处理逻辑

- **代理（开发环境）**：在开发环境中，可通过配置Qwik的开发服务器代理来解决跨域。在`qwik.config.ts`中配置：

import { defineConfig } from '@builder.io/qwik/next';

export default defineConfig(() => {
    return {
        dev: {
            proxy: {
                '/api': {
                    target: 'http://your - api - domain.com', // 后端API域名
                    changeOrigin: true,
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            }
        }
    };
});

星途面试题库

面试题：Qwik中如何整合第三方图表库实现数据可视化

知识考点

面试题答案