jobticket/ui/src/views/SortNumChart.vue

<template>
  <div class="app-container-Sortnum">
    <div id="SortnumChart" :style="{height:height,width:width}"></div>
  </div>
</template>

<script>
  require('echarts/theme/macarons')

  const animationDuration = 6000

  export default {
    name: "SortNumChart",
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '330px'
      },
      year: {
        type: Number,
      }
    },
    mounted() {
      this.$nextTick(() => {
        /*this.queryParams.year = this.searchFormField.year;*/
        this.getList()
      })
    },
    methods: {
      getList() {
        this.initChart()
      },
      initChart() {
        // 基于准备好的dom，初始化echarts实例
        this.chart = this.echarts.init(document.getElementById('SortnumChart'))

        this.chart.setOption({
          /* 周围边距 */
          grid: {
            left: '3%',
            right: '3%',
            bottom: '1%',
            top: '1%',
            containLabel: true
          },
          tooltip: {
            trigger: 'item'
          },
          visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
              colorLightness: [0, 1]
            }
          },
          series: [
            {
              type: 'pie',
              radius: '80%',
              center: ['50%', '50%'],
              data: [
                {value: 335, name: this.$t('会议中的EHS开项')},
                {value: 310, name: this.$t('5S管理')},
                {value: 274, name: this.$t('风险查勘')},
                {value: 235, name: this.$t('现场EHS检查')},
                {value: 400, name: this.$t('政府检查')}
              ].sort(function (a, b) { return a.value - b.value; }),
              roseType: 'radius',
              label: {
                color: '#ffffff'
              },
              labelLine: {
                lineStyle: {
                  color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
              },
              itemStyle: {
                color: '#30B08F',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },

              animationType: 'scale',
              animationEasing: 'elasticOut',
              animationDelay: function (idx) {
                return Math.random() * 200;
              }
            }
          ]
        })
      }
    }
  }
</script>

<style scoped>

</style>