+
@@ -40,9 +37,7 @@
-
-
\ No newline at end of file
diff --git a/src/views/components/element/ChartElement/chartOption.ts b/src/views/components/element/ChartElement/chartOption.ts
new file mode 100644
index 00000000..2f2ed087
--- /dev/null
+++ b/src/views/components/element/ChartElement/chartOption.ts
@@ -0,0 +1,276 @@
+import * as echarts from 'echarts'
+import type { ChartData, ChartType } from '@/types/slides'
+
+export interface ChartOptionPayload {
+ type: ChartType
+ data: ChartData
+ themeColors: string[]
+ textColor?: string
+}
+
+export const getChartOption = ({
+ type,
+ data,
+ themeColors,
+ textColor,
+}: ChartOptionPayload): echarts.EChartsOption | null => {
+ if(type === 'bar') {
+ return {
+ color: themeColors,
+ textStyle: textColor ? {
+ color: textColor,
+ } : {},
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ legend: data.series.length > 1 ? {
+ top: 'bottom',
+ textStyle: textColor ? {
+ color: textColor,
+ } : {},
+ } : undefined,
+ xAxis: {
+ type: 'category',
+ data: data.labels,
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: data.series.map((item, index) => ({
+ data: item,
+ name: data.legends[index],
+ type: 'bar',
+ label: {
+ show: true,
+ },
+ })),
+ }
+ }
+ if(type === 'column') {
+ return {
+ color: themeColors,
+ textStyle: textColor ? {
+ color: textColor,
+ } : {},
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ legend: data.series.length > 1 ? {
+ top: 'bottom',
+ textStyle: textColor ? {
+ color: textColor,
+ } : {},
+ } : undefined,
+ yAxis: {
+ type: 'category',
+ data: data.labels,
+ },
+ xAxis: {
+ type: 'value',
+ },
+ series: data.series.map((item, index) => ({
+ data: item,
+ name: data.legends[index],
+ type: 'bar',
+ label: {
+ show: true,
+ },
+ })),
+ }
+ }
+ if(type === 'line') {
+ return {
+ color: themeColors,
+ textStyle: textColor ? {
+ color: textColor,
+ } : {},
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ legend: data.series.length > 1 ? {
+ top: 'bottom',
+ textStyle: textColor ? {
+ color: textColor,
+ } : {},
+ } : undefined,
+ xAxis: {
+ type: 'category',
+ data: data.labels,
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: data.series.map((item, index) => ({
+ data: item,
+ name: data.legends[index],
+ type: 'line',
+ label: {
+ show: true,
+ },
+ })),
+ }
+ }
+ if(type === 'pie') {
+ return {
+ color: themeColors,
+ textStyle: textColor ? {
+ color: textColor,
+ } : {},
+ tooltip: {
+ trigger: 'item',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ legend: {
+ top: 'bottom',
+ textStyle: textColor ? {
+ color: textColor,
+ } : {},
+ },
+ series: [
+ {
+ data: data.series[0].map((item, index) => ({ value: item, name: data.labels[index] })),
+ label: textColor ? {
+ color: textColor,
+ } : {},
+ type: 'pie',
+ radius: '70%',
+ emphasis: {
+ itemStyle: {
+ shadowBlur: 10,
+ shadowOffsetX: 0,
+ shadowColor: 'rgba(0, 0, 0, 0.5)',
+ },
+ label: {
+ show: true,
+ fontSize: 14,
+ fontWeight: 'bold'
+ },
+ },
+ }
+ ],
+ }
+ }
+ if(type === 'ring') {
+ return {
+ color: themeColors,
+ textStyle: textColor ? {
+ color: textColor,
+ } : {},
+ tooltip: {
+ trigger: 'item',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ legend: {
+ top: 'bottom',
+ textStyle: textColor ? {
+ color: textColor,
+ } : {},
+ },
+ series: [
+ {
+ data: data.series[0].map((item, index) => ({ value: item, name: data.labels[index] })),
+ label: textColor ? {
+ color: textColor,
+ } : {},
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: '#fff',
+ borderWidth: 2
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: 14,
+ fontWeight: 'bold'
+ },
+ },
+ }
+ ],
+ }
+ }
+ if(type === 'area') {
+ return {
+ color: themeColors,
+ textStyle: textColor ? {
+ color: textColor,
+ } : {},
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ legend: data.series.length > 1 ? {
+ top: 'bottom',
+ textStyle: textColor ? {
+ color: textColor,
+ } : {},
+ } : undefined,
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: data.labels,
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: data.series.map((item, index) => ({
+ data: item,
+ name: data.legends[index],
+ type: 'line',
+ areaStyle: {},
+ label: {
+ show: true,
+ },
+ })),
+ }
+ }
+ if(type === 'scatter') {
+ const formatedData = []
+ for(let i = 0; i < data.series[0].length; i++) {
+ const x = data.series[0][i]
+ const y = data.series[1] ? data.series[1][i] : x
+ formatedData.push([x, y])
+ }
+
+ return {
+ color: themeColors,
+ textStyle: textColor ? {
+ color: textColor,
+ } : {},
+ tooltip: {
+ trigger: 'item',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ xAxis: {},
+ yAxis: {},
+ series: [
+ {
+ symbolSize: 12,
+ data: formatedData,
+ type: 'scatter',
+ }
+ ],
+ }
+ }
+
+ return null
+}
\ No newline at end of file
diff --git a/src/views/components/element/ChartElement/index.vue b/src/views/components/element/ChartElement/index.vue
index 3c2aa06c..9846e53f 100644
--- a/src/views/components/element/ChartElement/index.vue
+++ b/src/views/components/element/ChartElement/index.vue
@@ -32,11 +32,9 @@
:height="elementInfo.height"
:type="elementInfo.chartType"
:data="elementInfo.data"
- :options="elementInfo.options"
- :themeColor="elementInfo.themeColor"
- :gridColor="elementInfo.gridColor"
+ :themeColors="elementInfo.themeColors"
+ :textColor="elementInfo.textColor"
:legends="elementInfo.data.legends"
- :legend="elementInfo.legend || ''"
/>