feat: 完善饼图

src/views/AI/chat/class/index.ts

@@ -2,3 +2,4 @@
 
 export { LineChart } from './line';
 export { BarChart } from './bar';
+export { PieChart } from './pie';

src/views/AI/chat/class/pie.ts

@@ -0,0 +1,167 @@
+import * as echarts from 'echarts'
+import { color } from 'html2canvas/dist/types/css/types/color'
+
+interface BarChartOptions {
+  title?: string
+  unit?: string
+  xData: string[]
+  data: number[]
+}
+
+export class PieChart {
+  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', '#41B7FD', '#54D360', '#DAE8F7', '#F6A451', '#EA7261', '#CA68F5'],
+    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: this.chartData.title,
+        left: 'center',
+        top: '3%',
+        textStyle: {
+          color: this.styleColor.titleColor,
+          fontSize: 14
+        }
+      },
+      legend: {
+        orient: 'vertical',
+        top: 'center',
+        // left:'center',
+        right: '10%',
+        itemWidth: 10,
+        itemHeight: 5,
+        textStyle: {
+          color: this.styleColor.axisLabelColor,
+          fontSize: 12
+        }
+      },
+      tooltip: {
+        trigger: 'item',
+        formatter:`{b0}: {c0}${this.chartData.unit}`
+      },
+      grid: {
+        top: '18%',
+        left: '3%',
+        right: '3%',
+        bottom: '3%',
+        containLabel: true
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: ['35%', '60%'],
+          center: ['30%', '50%'],
+          data: this.chartData.data,
+          color: this.styleColor.barColor,
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          }
+        }
+      ]
+    }
+    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'
+      this.styleColor.axisLabelColor = '#5C6272'
+      ;(this.styleColor.titleColor = '#fff'),
+        (this.styleColor.barColor = ['#3071EC', '#41B7FD', '#54D360', '#DAE8F7', '#F6A451', '#EA7261', '#CA68F5'])
+    } else if (index === 1) {
+      this.styleColor.backgroundColor = '#FFFFFF'
+      this.styleColor.axisLabelColor = '#737373'
+      this.styleColor.titleColor = '#333'
+      this.styleColor.barColor = ['#6790EA', '#F17E7E', '#F99774', '#F3D088', '#CFEE5F', '#88DE95', '#63C8EA']
+    } else {
+      this.styleColor.backgroundColor = 'rgba(80,122,252,0.1)'
+      this.styleColor.axisLabelColor = '#7A8195'
+      this.styleColor.titleColor = '#fff'
+      this.styleColor.barColor = [
+        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                      { offset: 0, color: 'rgba(80, 122, 252, 1)' },
+                      { offset: 1, color: 'rgba(80, 122, 252, 0)' }
+                    ]), 
+                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: 'rgba(35, 202, 244, 1)' },
+                        { offset: 1, color: 'rgba(35, 202, 244, 0)' }
+                      ]), 
+                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: 'rgba(255, 101, 98, 1)' },
+                        { offset: 1, color: 'rgba(255, 101, 98, 0)' }
+                      ]), 
+                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: 'rgba(242, 247, 248, 1)' },
+                        { offset: 1, color: 'rgba(242, 247, 248, 0)' }
+                      ]), 
+                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: 'rgba(53, 199, 93, 1)' },
+                        { offset: 1, color: 'rgba(53, 199, 93, 0)' }
+                      ]), 
+                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: 'rgba(255, 186, 71, 1)' },
+                        { offset: 1, color: 'rgba(255, 186, 71, 0)' }
+                      ]), 
+                      new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        { offset: 0, color: 'rgba(230, 250, 114, 1)' },
+                        { offset: 1, color: 'rgba(230, 250, 114, 0)' }
+                      ]), 
+        ]
+    }
+
+    this.chart.setOption({
+      backgroundColor: this.styleColor.backgroundColor,
+      title: {
+        textStyle: {
+          color: this.styleColor.titleColor
+        }
+      },
+      series: [
+        {
+          color: this.styleColor.barColor,
+          itemStyle:index === 2 ? {
+            shadowBlur: 20,
+            shadowColor: 'rgba(0, 0, 0, 0.3)',
+            shadowOffsetX: 2,
+            shadowOffsetY: 2
+          } : undefined
+        }
+      ]
+    })
+  }
+
+  dispose(): void {
+    if (this.chart) {
+      this.chart.dispose()
+      this.chart = null
+    }
+  }
+}

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 {LineChart, BarChart } from './class/index'
+import {LineChart, BarChart ,PieChart} from './class/index'
 import userIcon from '@/assets/images/ai/user-icon.png'
 import aiIcon from '@/assets/images/ai/ai-icon.png'
 //输入框加载
@@ -76,11 +76,19 @@ let bar = null
  * 页面初始完成
  */
 onMounted(() => {
-  bar = new LineChart('barEcharts', {
+  bar = new PieChart('barEcharts', {
     title:'图表标题',
     unit:'元',
-    xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
-    data: [120, 200, 150, 80, 70, 110, 130]
+    
+    data: [
+    { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' },
+        { value: 200, name: 'qq Ads' },
+        { value: 100, name: 'vx Ads' }
+    ]
   })
 })