diff --git a/src/views/AI/chat/class/line.ts b/src/views/AI/chat/class/line.ts index 36bc1c2..af13fe8 100644 --- a/src/views/AI/chat/class/line.ts +++ b/src/views/AI/chat/class/line.ts @@ -27,159 +27,159 @@ export class LineChart { this.initChart() } - private initChart(): void { - this.chart = echarts.init(this.dom) - this.setChartOptions() - } + private initChart(): void { + this.chart = echarts.init(this.dom) + this.setChartOptions() + } - private setChartOptions(): void { - const option = { - backgroundColor: this.styleColor.backgroundColor, - title: { - text:this.chartData.title , - left: 'center', - top: '3%', - textStyle: { - color: this.styleColor.titleColor, - fontSize: 14 - } - }, - grid: { - top: '25%', - left: '3%', - right: '3%', - bottom: '3%', - containLabel: true - }, - xAxis: { - type: 'category', - data: this.chartData.xData, - axisLine: { lineStyle: { color: this.styleColor.axisLineColor, width: 1 } }, //x轴线 - axisTick: { - show: false //不显示X轴刻度线 - }, - axisLabel: { - color: this.styleColor.axisLabelColor, - fontSize: 12 - } //x轴标题 - }, - yAxis: { - type: 'value', - name:this.chartData.unit, - nameTextStyle:{ - color:this.styleColor.axisLabelColor - }, - axisLabel: { - color: this.styleColor.axisLabelColor, - fontSize: 12 - }, - splitLine: { - lineStyle: { - color: this.styleColor.axisLineColor, - opacity: 0.5 - } - } + private setChartOptions(): void { + const option = { + backgroundColor: this.styleColor.backgroundColor, + title: { + text: this.chartData.title, + left: 'center', + top: '3%', + textStyle: { + color: this.styleColor.titleColor, + fontSize: 14 + } + }, + grid: { + top: '25%', + left: '3%', + right: '3%', + bottom: '3%', + containLabel: true + }, + xAxis: { + type: 'category', + data: this.chartData.xData, + axisLine: { lineStyle: { color: this.styleColor.axisLineColor, width: 1 } }, //x轴线 + axisTick: { + show: false //不显示X轴刻度线 + }, + axisLabel: { + color: this.styleColor.axisLabelColor, + fontSize: 12 + } //x轴标题 + }, + yAxis: { + type: 'value', + name: this.chartData.unit, + nameTextStyle: { + color: this.styleColor.axisLabelColor + }, + axisLabel: { + color: this.styleColor.axisLabelColor, + fontSize: 12 + }, + splitLine: { + lineStyle: { + color: this.styleColor.axisLineColor, + opacity: 0.5 + } + } + }, + series: [ + { + type: 'line', + data: this.chartData.data, + smooth: true, + label: { + show: true, + position: 'top', + color: this.styleColor.barValueColor }, - series: [ - { - type: 'line', - data: this.chartData.data, - smooth: true, - label: { - show: true, - position: 'top', - color: this.styleColor.barValueColor - }, - itemStyle: { - color: this.styleColor.barColor - } - } - ] + itemStyle: { + color: this.styleColor.barColor + } } - this.chart?.setOption(option) + ] + } + this.chart?.setOption(option) + } + + /** + * 主题切换 0-简约 ,1-商务 ,2-科技 + * @param index + */ + changeColorStyle(index: number): void { + if (!this.chart) { + console.warn('未读取到元素!') + return + } + if (index === 0) { + this.styleColor = { + backgroundColor: '#30333B', + titleColor: '#fff', + axisLabelColor: '#5C6272', + axisLineColor: '#3F404D', + barColor: '#3071EC', + barValueColor: '#fff' + } + } else if (index === 1) { + this.styleColor = { + backgroundColor: '#FFFFFF', + titleColor: '#333', + axisLabelColor: '#737373', + axisLineColor: '#D9D9D9', + barColor: '#6790EA', + barValueColor: '#333' + } + } else { + this.styleColor = { + backgroundColor: 'rgba(80,122,252,0.1)', + titleColor: '#fff', + axisLabelColor: '#7A8195', + axisLineColor: '#3F404D', + barColor: '#0A50FF', + barValueColor: '#fff' } + } - /** - * 主题切换 0-简约 ,1-商务 ,2-科技 - * @param index - */ - changeColorStyle(index: number): void { - if (!this.chart) { - console.warn('未读取到元素!') - return + this.chart.setOption({ + backgroundColor: this.styleColor.backgroundColor, + title: { + textStyle: { + color: this.styleColor.titleColor + } + }, + xAxis: { + axisLine: { lineStyle: { color: this.styleColor.axisLineColor } }, //x轴线 + axisLabel: { + color: this.styleColor.axisLabelColor + } //x轴标题 + }, + yAxis: { + nameTextStyle: { + color: this.styleColor.axisLabelColor + }, + axisLabel: { + color: this.styleColor.axisLabelColor + }, + splitLine: { + lineStyle: { + color: this.styleColor.axisLineColor } - if (index === 0) { - this.styleColor = { - backgroundColor: '#30333B', - titleColor: '#fff', - axisLabelColor: '#5C6272', - axisLineColor: '#3F404D', - barColor: '#3071EC', - barValueColor: '#fff' - } - } else if (index === 1) { - this.styleColor = { - backgroundColor: '#FFFFFF', - titleColor: '#333', - axisLabelColor: '#737373', - axisLineColor: '#D9D9D9', - barColor: '#6790EA', - barValueColor: '#333' - } - }else{ - this.styleColor = { - backgroundColor: 'rgba(80,122,252,0.1)', - titleColor: '#fff', - axisLabelColor: '#7A8195', - axisLineColor: '#3F404D', - barColor:'#0A50FF', - barValueColor: '#fff' - } + } + }, + series: [ + { + label: { + color: this.styleColor.barValueColor + }, + itemStyle: { + color: this.styleColor.barColor } - - this.chart.setOption({ - backgroundColor: this.styleColor.backgroundColor, - title: { - textStyle: { - color: this.styleColor.titleColor - } - }, - xAxis: { - axisLine: { lineStyle: { color: this.styleColor.axisLineColor } }, //x轴线 - axisLabel: { - color: this.styleColor.axisLabelColor - } //x轴标题 - }, - yAxis: { - nameTextStyle:{ - color:this.styleColor.axisLabelColor - }, - axisLabel: { - color: this.styleColor.axisLabelColor - }, - splitLine: { - lineStyle: { - color: this.styleColor.axisLineColor - } - } - }, - series: [ - { - label: { - color: this.styleColor.barValueColor - }, - itemStyle: { - color: this.styleColor.barColor - } - } - ] - }) } + ] + }) + } - dispose(): void { - if (this.chart) { - this.chart.dispose() - this.chart = null - } - } + dispose(): void { + if (this.chart) { + this.chart.dispose() + this.chart = null + } + } } diff --git a/src/views/AI/components/aiChart/index.vue b/src/views/AI/components/aiChart/index.vue index ecbc486..4843e47 100644 --- a/src/views/AI/components/aiChart/index.vue +++ b/src/views/AI/components/aiChart/index.vue @@ -38,7 +38,11 @@ - + @@ -76,7 +80,7 @@