diff --git a/src/views/AI/chat/class/bar.ts b/src/views/AI/chat/class/bar.ts index 84f8ed3..1ff8c39 100644 --- a/src/views/AI/chat/class/bar.ts +++ b/src/views/AI/chat/class/bar.ts @@ -34,7 +34,7 @@ export class BarChart { const option = { backgroundColor: this.styleColor.backgroundColor, title: { - text: '图表标题', + text: this.chartData.title, left: 'center', top: '3%', textStyle: { @@ -63,6 +63,10 @@ export class BarChart { }, yAxis: { type: 'value', + name:this.chartData.unit, + nameTextStyle:{ + color:this.styleColor.axisLabelColor + }, axisLabel: { color: this.styleColor.axisLabelColor, fontSize: 12 @@ -147,6 +151,9 @@ export class BarChart { } //x轴标题 }, yAxis: { + nameTextStyle:{ + color:this.styleColor.axisLabelColor + }, axisLabel: { color: this.styleColor.axisLabelColor }, diff --git a/src/views/AI/chat/class/index.ts b/src/views/AI/chat/class/index.ts index 05779b2..b0d15ff 100644 --- a/src/views/AI/chat/class/index.ts +++ b/src/views/AI/chat/class/index.ts @@ -1,4 +1,4 @@ - +export { LineChart } from './line'; export { BarChart } from './bar'; diff --git a/src/views/AI/chat/class/line.ts b/src/views/AI/chat/class/line.ts new file mode 100644 index 0000000..9241c59 --- /dev/null +++ b/src/views/AI/chat/class/line.ts @@ -0,0 +1,185 @@ +import * as echarts from 'echarts' + +interface BarChartOptions { + title?: string + unit?: string + xData: string[] + data: number[] +} + +export class LineChart { + private chart: echarts.ECharts | null = null + private dom: HTMLElement + private chartData: any = {} + + private styleColor: any = { + backgroundColor: '#30333B', + titleColor: '#fff', + axisLabelColor: '#5C6272', + axisLineColor: '#3F404D', + barColor: '#3071EC', + barValueColor: '#fff' + } + + constructor(containerId: string, chartData: BarChartOptions) { + this.dom = document.getElementById(containerId)! + this.chartData = chartData + this.initChart() + } + + private initChart(): void { + this.chart = echarts.init(this.dom) + this.setChartOptions() + } + + private setChartOptions(): void { + const option = { + backgroundColor: this.styleColor.backgroundColor, + title: { + text: '图表标题', + left: 'center', + top: '3%', + textStyle: { + color: this.styleColor.titleColor, + fontSize: 14 + } + }, + grid: { + top: '18%', + 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:'个', + 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 + }, + itemStyle: { + color: this.styleColor.barColor + } + } + ] + } + 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' + } + } + + 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 + } + } +} diff --git a/src/views/AI/chat/index.vue b/src/views/AI/chat/index.vue index 692bc4f..3163e11 100644 --- a/src/views/AI/chat/index.vue +++ b/src/views/AI/chat/index.vue @@ -56,7 +56,7 @@ import { ref, reactive, onMounted, onUnmounted, watch, nextTick } from 'vue' import { getAiMsg } from '@/api/ai.js' import moment from 'moment' -import { BarChart } from './class/index' +import {LineChart, BarChart } from './class/index' import userIcon from '@/assets/images/ai/user-icon.png' import aiIcon from '@/assets/images/ai/ai-icon.png' //输入框加载 @@ -76,7 +76,9 @@ let bar = null * 页面初始完成 */ onMounted(() => { - bar = new BarChart('barEcharts', { + bar = new LineChart('barEcharts', { + title:'图表标题', + unit:'元', xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: [120, 200, 150, 80, 70, 110, 130] })