jinz_screen/src/components/chart/chartState.vue

<template>
  <div id="chart-state" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  name: "chartState",
  data() {
    return {
      myChart: null
    }
  },
  methods: {
    init() {
      let options = {
        graphic: [
          {
            type: 'text',
            left: '45%',
            top: '42%',
            style: {
              text: '总存栏',
              fontSize: 14,
              fill: 'rgb(192, 188, 189)'
            }
          },
          {
            type: 'text',
            left: '45%',
            top: '50%',
            style: {
              text: '120',
              fontSize: 16,
              fontWeight: 700,
              fill: 'rgb(192, 188, 189)'
            }
          }
        ],
        series: [
          {
            name: '',
            type: 'pie',
            hoverAnimation: false,
            legendHoverLink: false,
            cursor: 'default',
            radius: ['45%', '30%'],
            center: ['50%', '50%'],
            color: [
              'rgba(0, 150, 254, 0.2)',
              'rgba(2, 205, 206, 0.2)',
              'rgba(253, 160, 0, 0.2)',
              'rgba(191, 40, 18, 0.2)',
            ],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            zlevel: 1,
            itemStyle: {
              normal: {
                borderColor: '#0a1a2a',
              },
              ellipsis: {
                borderColor: '#0a1a2a',
              },
            },
            tooltip: {
              show: false,
            },
            data: [
              {
                value: 41,
                name: '',
              },
              {
                value: 20,
                name: '',
              },
              {
                value: 20,
                name: '',
              },
              {
                value: 20,
                name: '',
              },
            ],
          },
          {
            name: '',
            type: 'pie',
            zlevel: 2,
            cursor: 'default',
            hoverAnimation: false,
            legendHoverLink: false,
            radius: ['60%', '45%'],
            center: ['50%', '50%'],
            color: [
              'rgba(0, 150, 254, 0.9)',
              'rgba(2, 205, 206, 0.9)',
              'rgba(253, 160, 0, 0.9)',
              'rgba(191, 40, 18, 0.9)',
            ],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            itemStyle: {
              normal: {
                // shadowBlur: 15,
                // shadowColor: 'rgba(0, 0, 0, 0.5)',
                borderColor: '#0a1a2a',
                // borderWidth:'10',
              },
              ellipsis: {
                borderColor: '#0a1a2a',
              },
            },
            tooltip: {
              show: false,
            },
            data: [
              {
                value: 41,
                name: '',
              },
              {
                value: 20,
                name: '',
              },
              {
                value: 20,
                name: '',
              },
              {
                value: 20,
                name: '',
              },
            ],
          },
          {
            name: 'title',
            type: 'pie',
            zlevel: 3,
            hoverAnimation: false,
            legendHoverLink: false,
            radius: ['80%', '60%'],
            center: ['50%', '50%'],
            color: ['rgba(0, 150, 254, 1)', 'rgba(2, 205, 206, 1)', 'rgba(253, 160, 0, 1)', 'rgba(191, 40, 18, 1)'],
            label: {
              show: true,

              formatter: (params) => {
                              return `
               ${params.name}: ${params.percent}%
               ${params.data.value}个
               `;
              },
              padding:[0,-30],
              textStyle:{
                lineHeight: 25
              }
            },
            labelLine: {
              show: true,
              // showAbove:true,
              length: 30,
              length2: 50,

            },
            itemStyle: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.3)',
              borderColor: '#0a1a2a',
            },
            data: [
              {
                value: 41,
                name: '低级',
                label: {
                  color: '#fff',
                },
              },
              {
                value: 20,
                name: '中级',
                label: {
                  color: '#fff',
                },
              },
              {
                value: 20,
                name: '⾼级',
                label: {
                  color: '#fff',
                },
              },
              {
                value: 20,
                name: '极⾼',
                label: {
                  color: '#fff',
                },
              },
            ],
          },
        ],
      }
      this.myChart.setOption(options)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('chart-state'));
    this.init()
    let that = this;
    window.addEventListener('resize', function() {
      that.myChart.resize();
    })
  }
}
</script>

<style scoped>

</style>