| | |
| | | maskColor: 'rgba(255, 255, 255, 0.8)', |
| | | zlevel: 0 |
| | | }) |
| | | } |
| | | }, |
| | | color: { |
| | | type: Array, |
| | | default: () => [] |
| | | }, |
| | | option: { |
| | | type: Object, |
| | | default: () => ({}) |
| | | }, |
| | | }) |
| | | |
| | | import { watch } from 'vue' |
| | |
| | | function generateChart(option) { |
| | | const copiedOption = JSON.parse(JSON.stringify(option)) // ✅ 深拷贝 |
| | | |
| | | // if (copiedOption.series && copiedOption.series.length > 0) { |
| | | // copiedOption.series.forEach((s, index) => { |
| | | // if (s.type === 'line') { |
| | | // s.itemStyle = { |
| | | // color: props.lineColors[index] || props.lineColors[0] |
| | | // } |
| | | // s.lineStyle = { |
| | | // color: props.lineColors[index] || props.lineColors[0] |
| | | // } |
| | | // } else if (s.type === 'bar') { |
| | | // s.itemStyle = { |
| | | // color: props.barColors[index] || props.barColors[0] |
| | | // } |
| | | // } |
| | | // }) |
| | | // } |
| | | if (copiedOption.series && copiedOption.series.length > 0) { |
| | | copiedOption.series.forEach((s, index) => { |
| | | if (s.type === 'line' && props.lineColors.length) { |
| | | s.itemStyle = s.itemStyle || {} |
| | | s.lineStyle = s.lineStyle || {} |
| | | s.itemStyle.color = props.lineColors[index] || props.lineColors[0] |
| | | s.lineStyle.color = props.lineColors[index] || props.lineColors[0] |
| | | } else if (s.type === 'bar' && props.barColors.length) { |
| | | s.itemStyle = s.itemStyle || {} |
| | | s.itemStyle.color = props.barColors[index] || props.barColors[0] |
| | | } |
| | | }) |
| | | } |
| | | |
| | | chartInstance.setOption(copiedOption) |
| | | } |
| | | |
| | | function renderChart() { |
| | | const option = { |
| | | color: props.color.length ? props.color : undefined, |
| | | backgroundColor: props.options.backgroundColor || '#fff', |
| | | xAxis: props.xAxis, |
| | | yAxis: props.yAxis, |