1、饼图
    image.png

    1. if (this.echartsRightDome != null) {
    2.   this.echartsRightDome.dispose();
    3. }
    4. this.echartsRightDome = this.$echarts.init(
    5.   document.getElementById('echartsRight')
    6. );
    7. performanceget().then((res) => {
    8.   let data = res.data;
    9.   let option = {
    10.     title: {
    11.       text: data.diskSize > 1024 ? (data.diskSize / 1024).toFixed(1) + 'TB' : data.diskSize + 'GB',
    12.       subtext: (data.usage * 100).toFixed(1) + '%',
    13.       x: 'center',
    14.       y: 'center',
    15.       // top: "150",
    16.       // left: "130",
    17.       textVerticalAlign: 'auto',
    18.       textStyle: {
    19.         fontStyle: 'italic', //主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
    20.         color: '#000',
    21.         fontSize: 35,
    22.         fontWeight: 'bolder',
    23.       },
    24.       subtextStyle: {
    25.         fontStyle: 'italic',
    26.         color: '#ff',
    27.         fontSize: 30,
    28.         fontFamily: 'PingFangSC-Regular',
    29.         fontWeight: 'bolder',
    30.       },
    31.       itemGap: 35, //主副标题间距
    32.     },
    33.     series: [{
    34.       name: 'Line 2',
    35.       type: 'pie',
    36.       clockWise: true,
    37.       radius: ['0%', '50%'],
    38.       itemStyle: {
    39.         normal: {
    40.           label: {
    41.             show: false,
    42.           },
    43.           labelLine: {
    44.             show: false,
    45.           },
    46.         },
    47.       },
    48.       hoverAnimation: false,
    49.       data: [{
    50.         value: data.unFreeDiskSize,
    51.         name: '01',
    52.         itemStyle: {
    53.           normal: {
    54.             color: '#C1CCA2',
    55.           },
    56.         },
    57.       },
    58.              {
    59.                name: '02',
    60.                value: data.freeDiskSize,
    61.                itemStyle: {
    62.                  normal: {
    63.                    color: '#E0E5D0',
    64.                  },
    65.                },
    66.              },
    67.             ],
    68.     },
    69.              {
    70.                name: 'Line 1',
    71.                type: 'pie',
    72.                clockWise: true,
    73.                radius: ['50%', '64%'],
    74.                itemStyle: {
    75.                  normal: {
    76.                    label: {
    77.                      show: false,
    78.                    },
    79.                    labelLine: {
    80.                      show: false,
    81.                    },
    82.                  },
    83.                },
    84.                hoverAnimation: false,
    85.                data: [{
    86.                  value: data.unFreeDiskSize,
    87.                  name: '01',
    88.                  itemStyle: {
    89.                    normal: {
    90.                      color: '#839946',
    91.                    },
    92.                  },
    93.                },
    94.                       {
    95.                         name: '02',
    96.                         value: data.freeDiskSize,
    97.                         itemStyle: {
    98.                           normal: {
    99.                             color: '#C1CCA2',
    100.                           },
    101.                         },
    102.                       },
    103.                      ],
    104.              },
    105.             ],
    106.   };
    108.   this.echartsRightDome.setOption(option);
    109.         });