饼状图,含富文本样式

<!--折线图-->
<template>
  <div class="chartBox">
    <!--echart图标-->
    <div id="lineChart" ref="lineChart" :style="{width:width,height:height}"></div>
  </div>

</template>

<script>
// 引入基本模板
const echarts = require('echarts');

export default {
  name: "scatterDiagram",
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    seriesData: {
      type: Array,
      default() {
        return []
      }
    },
    percentTip:{
      type: Object,
      default() {
        return {}
      }
    }

  },
  data() {
    return {
      lineChart: null,
      total: 0
    }
  },
  mounted() {


    let sum = 0
    this.seriesData.forEach(item => {
      console.log(item.value)
      sum += item.value
    })
    this.total = sum
    console.log(this.percentTip)
    this.initEchart();
  },
  methods: {
    initEchart() {
      console.log(this.total)
      // 基于准备好的dom，初始化echarts实例
      this.lineChart = echarts.init(this.$refs.lineChart);
      let that = this

      let option = {
        // backgroundColor: '#ffffff',
        grid: {
          left:0,
          right:0,
          top:40,
          bottom:25
        },
        tooltip: {
          trigger: 'item'
        },


        series: [
          {
            name: '作业分数统计',
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            // data: [
            //   {value: 335, name: 'Direct'},
            //   {value: 310, name: 'Email'},
            //   {value: 274, name: 'Union Ads'},
            //   {value: 235, name: 'Video Ads'},
            //   {value: 400, name: 'Search Engine'}
            // ].sort(function (a, b) {
            //   return a.value - b.value;
            // }),
            data: this.seriesData.sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
              normal: {
                length: 10,
                textStyle: {
                  fontSize: 14,
                  // color:'#1890ff'
                },
                formatter: function (params) {
                  console.log(params)
                  return `{top|${params.name}}` + '\n' + `{down|${params.value}次 ${that.percentTip[params.name]||0}%}`
                },
                rich: {
                  top: {
                    fontSize: 14,
                    lineHeight: 20,
                    color: 'rgba(51, 51, 51, 1)'//改变指出文字样式
                  },
                  down: {
                    color: 'rgba(24, 144, 255, 1)',
                    fontSize: 16,
                  },
                }
              },

            },
            labelLine: {
              // lineStyle: {
              //   color: 'rgba(255, 255, 255, 0.3)'
              // },
              // smooth: 0.2,
              normal: {
                length: 15,
                length2: 20
              },

            },
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = ['#1990FF', '#5EFCE8', '#F8D803', '#29C770', '#8D78EA',]
                  return colorList[colors.dataIndex]
                }
              },
              emphasis: {
                symbolSize: 16,
              }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.lineChart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>

</style>