zhgkpt-datav/app/src/components/rate3D.vue

<template>
    <div ref="chart" class="item" style="width: 94px; height:138px" />
  </template>
  
  <script>
  import * as echarts from "echarts";
  export default {
    props: {
        data: Number,
        text: String,
        title: String
    },
    data() {
      return {
        chart: null,
      };
    },
    mounted() {
      const chartDom = this.$refs.chart;
      //   // 初始化图表实例
      this.chart = echarts.init(chartDom);
      this.initChart();
      
    },
    methods: {
      initChart() {
      const  option = {
            // backgroundColor: '#111',
    title: [{
        text: this.title,
        x: 'center',
        top: '84%',
        textStyle: {
            color: '#fff',
            fontSize:12,
            // fontWeight: '100',
        }
    }, {
        text: this.text,
        x: 'center',
        top: '42%',
        textStyle: {
            fontSize: '12',
            color: '#fdf914',
            fontFamily: 'Lato',
            // foontWeight: '600',
        },
    }],
    polar: {
        radius: ['38%', '53%'],
        center: ['50%', '50%'],
    },
    angleAxis: {
        max: 100,
        show: false,
    },
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,

        },
        axisTick: {
            show: false
        },
    },
    series: [
        {
            name: '',
            type: 'bar',
            roundCap: true,
            barWidth: 60,
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(66, 66, 66, .3)',
            },
            data: [this.data],
            coordinateSystem: 'polar',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                        offset: 0,
                        color: '#fdf914'
                    }, {
                        offset: 1,
                        color: '#38a700'
                    }]),
                }
            }
        }, 
        {
            type: 'gauge',
            name: '',
            radius: '100%',
            startAngle: '0',
            endAngle: '-359.99',
            splitNumber: '200',
            center: ['50%', '50%'],
            pointer: {
                show: false
            },
            title: {
                show: false
            },
            detail: {
                show: false
            },
            data: [{
                value: 95,
                name: ''
            }],
            axisLine: {
                lineStyle: {
                    width: 20,
                    opacity: 0
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                length: 0,
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 1,
                        y: 0,
                        x2: 0,
                        y2: 0,
                        colorStops: [{
                            offset: 0,
                            color: '#111'
                        }, {
                            offset: 0.5,
                            color: 'rgba(66, 66, 66, 1)',
                        }, {
                            offset: 1,
                            color: '#111'
                        }],
                        globalCoord: false
                    },
                    width: 1,
                    type: 'solid',
                },
            },
            axisLabel: {
                show: false
            }
        },
        {
            name: '',
            type: 'pie',
            startAngle: 90,
            radius: ['100%', '82%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
                normal: {
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(66, 66, 66, .4)',
                    shadowBlur: 10,
                    shadowColor: 'rgba(253, 249, 20, .3)',
                }
            },
            data: [{
                value: 100,

            }]
        },
        {
            name: '',
            type: 'pie',
            startAngle: 90,
            radius: ['62.5%', '64%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
                normal: {
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(66, 66, 66, .3)',
                    shadowBlur: 10,
                    shadowColor: 'rgba(253, 249, 20, .3)',
                }
            },
            data: [{
                value: 100,

            }]
        },
        {
            name: '',
            type: 'pie',
            startAngle: 90,
            radius: ['64.5%', '65.8%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
                normal: {
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(66, 66, 66, .2)',
                    shadowBlur: 10,
                    shadowColor: 'rgba(253, 249, 20, .3)',
                }
            },
            data: [{
                value: 100,

            }]
        },
        {
            name: '',
            type: 'pie',
            startAngle: 90,
            radius: ['66.5%', '67.5%'],
            hoverAnimation: false,
            center: ['50%', '50%'],
            itemStyle: {
                normal: {
                    labelLine: {
                        show: false
                    },
                    color: 'rgba(66, 66, 66, .1)',
                    shadowBlur: 10,
                    shadowColor: 'rgba(253, 249, 20, .3)',
                }
            },
            data: [{
                value: 100,

            }]
        },
    ]
};
        this.chart.setOption(option);
        //自适应图表
        window.onresize = this.chart.resize;
      },
       numb(){
    
    myChart.setOption(option, true)
},

    }
    
  };
  </script>
  
  <style scoped></style>