田源
2023-11-24 726df452c8749f9f208f67ede9864f223d44ff49
Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
@@ -1,5 +1,5 @@
<template>
  <basic-container>
  <basic-container style="width: 100%">
    <v-chart :options="chartOptions" :auto-resize="true" id="chart"></v-chart>
  </basic-container>
</template>
@@ -11,6 +11,16 @@
import 'echarts/lib/component/legend'
export default {
  name: "pieChart",
  props:{
    pieData:{
      type:Array,
      default:[]
    },
    chartName:{
      type:String,
      default: ""
    }
  },
  data() {
    return {
      chartOptions: {
@@ -21,7 +31,7 @@
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            var result = '';
            let result = '';
            if (params.componentType === 'series') {
              result += params.name + '<br/>';
              result += '新增:' + params.data.newValue + '<br/>';
@@ -50,7 +60,7 @@
            itemStyle: {
              color: function(params) {
                // 根据具体需求设置颜色
                var colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
                const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
                return colorList[params.dataIndex % colorList.length];
              }
            },
@@ -78,7 +88,8 @@
<style scoped lang="scss">
#chart {
  width: 800px;
  height: 600px;
  width: 90%;
  height: 530px;
}
</style>