ECharts 配置項生成提示詞（option 寫法：折線柱狀組合、提示框格式化、圖例、數據縮放、自適應與深色主題）
做數據大屏、後台報表或網頁圖表要寫 ECharts 配置，卻記不住那麼多配置項，或者提示框格式、雙 Y 軸、數據縮放、窗口縮放自適應調不好時用：給出數據和想要的效果，AI 生成完整可運行的 option，逐項註釋，並給出在 Vue 或 React 中正確初始化與銷燬的寫法。
通用大模型 對話模型通用
你是一名精通 ECharts 的前端可視化工程師。請根據我的數據和需求生成圖表配置。 - ECharts 版本：[ECharts 版本]（例：5.x） - 數據樣例（JSON 或表格，幾條即可）： [數據樣例] - 想要的圖表：[想要的圖表]（例：按月的銷售額柱狀圖 + 同比增長率折線，雙 Y 軸） - 交互需求：[交互需求]（例：提示框顯示金額與百分比、可以拖動縮放時間範圍、點擊柱子跳轉詳情） - 使用場景與主題：[使用場景]（例：深色數據大屏、後台白色頁面） - 前端框架：[前端框架]（例：Vue 3、React、原生 HTML） 要求： 1. 用數據集（dataset）組織數據，或說明為什麼這裏直接寫在系列中更合適。 2. 完整的 option，每個配置項加中文註釋：標題、圖例、提示框、座標軸（雙 Y 軸時兩個軸的刻度對齊與單位）、系列、數據縮放、顏色。 3. 提示框格式化：用格式化函數顯示千分位金額、百分比、單位，並處理空值。 4. 數據量大時的性能設定（如採樣、大數據量模式、關閉動畫）。 5. 自適應：窗口或容器尺寸變化時重新調整圖表大小（建議監聽容器尺寸變化，而不只是窗口變化）。 6. 框架集成：在我的框架中正確初始化、更新數據、在組件卸載時銷燬實例，避免內存泄漏和重複初始化。 7. 點擊等事件的綁定方式。 8. 可訪問性與可讀性：顏色區分度、是否需要在圖上直接標註數值。 配置項名稱以 ECharts 官方文檔為準，你不確定的配置項要註明「請以官方配置手冊為準」。
高亮處換成你自己的內容：[ECharts 版本]、[數據樣例]、[想要的圖表]、[交互需求]、[使用場景]、[前端框架]
ChatGPT Plus 充值
已被複製 0 次
使用說明
怎麼填變量：[數據樣例] 給幾條真實結構的數據即可，AI 會據此決定用數據集還是直接寫數組。[想要的圖表] 寫清楚哪個指標用什麼圖形、放在哪個座標軸上。[前端框架] 決定了初始化和銷燬的寫法，單頁應用中忘記銷燬實例是常見的內存問題。
常見坑：
- 雙 Y 軸兩邊的刻度線數量不一致，網格線看起來錯亂。需要分別設定兩個軸的刻度分段，或者隱藏其中一側的分隔線。
- 只監聽窗口大小變化，圖表放在可以摺疊的側邊欄或標籤頁裏，容器尺寸變了圖表卻不跟着變。
- 在單頁應用中每次進入頁面都重新初始化圖表、離開時不銷燬，切換幾次後頁面越來越卡。
追問技巧：追問「把這個圖表封裝成通用組件，只需要傳入數據和配置差異」，或「數據每 5 秒更新一次，怎麼只更新數據而不重繪整個圖表」。
示例輸出
示例，僅供參考（節選）
js
const option = {
dataset: { source: [
['月份', '銷售額', '同比'],
['1月', 1200000, 0.18], ['2月', 1280000, 0.15], ['3月', 1330000, 0.11],
] },
tooltip: {
trigger: 'axis',
formatter: (params) => params.map((p) => {
const v = p.value[p.encode.y[0]]
const text = p.seriesName === '同比' ? `${(v * 100).toFixed(1)}%` : `${(v / 10000).toLocaleString()} 萬元`
return `${p.marker}${p.seriesName}：${v == null ? '—' : text}`
}).join('<br/>'),
},
legend: { top: 0 },
xAxis: { type: 'category' },
yAxis: [
{ type: 'value', name: '萬元', axisLabel: { formatter: (v) => v / 10000 } },
{ type: 'value', name: '同比', axisLabel: { formatter: (v) => `${v * 100}%` }, splitLine: { show: false } },
],
series: [
{ type: 'bar', name: '銷售額', encode: { x: '月份', y: '銷售額' } },
{ type: 'line', name: '同比', yAxisIndex: 1, encode: { x: '月份', y: '同比' } },
],
}
// 自適應：監聽容器尺寸變化
const chart = echarts.init(el)
chart.setOption(option)
const ro = new ResizeObserver(() => chart.resize())
ro.observe(el)
// 組件卸載時：ro.disconnect(); chart.dispose()同款作品
用這條提示詞做出來的作品；原作者會因此獲得積分
還沒有同款，來做第一個。
0 條評論
還沒有評論，來搶沙發～