| | |
|---|
| | | <template> |
|---|
| | | <div> |
|---|
| | | <div style="position: relative;"> |
|---|
| | | <div ref="chartRef" :style="chartStyle"></div> |
|---|
| | | <slot></slot> |
|---|
| | | </div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | |
|---|
| | | |
|---|
| | | // Methods |
|---|
| | | function generateChart(option) { |
|---|
| | | const copiedOption = JSON.parse(JSON.stringify(option)) // ✅ 深拷贝 |
|---|
| | | const copiedOption = option |
|---|
| | | |
|---|
| | | if (copiedOption.series && copiedOption.series.length > 0) { |
|---|
| | | copiedOption.series.forEach((s, index) => { |
|---|
| | |
|---|
| | | series: props.series, |
|---|
| | | grid: props.grid, |
|---|
| | | legend: props.legend, |
|---|
| | | tooltip: props.tooltip |
|---|
| | | tooltip: props.tooltip, |
|---|
| | | } |
|---|
| | | |
|---|
| | | chartInstance.clear() |
|---|
| | |
|---|
| | | |
|---|
| | | // Watch all reactive props that affect the chart |
|---|
| | | watch( |
|---|
| | | () => [props.xAxis, props.series], |
|---|
| | | () => [props.xAxis, props.series, props.legend, props.tooltip], |
|---|
| | | () => { |
|---|
| | | if (chartInstance) { |
|---|
| | | renderChart() |
|---|
