关于Echarts南丁格尔玫瑰图的部分解释

<template>
  <div id="easyEcharts" style="height: 600px;width: 800px"></div>
</template>

<script>
export default {
  name: "easyEcharts",
  data(){
    return{
      easyEcharts:{
        //标题
        title: {
          text: '南丁格尔玫瑰图',//主标题
          subtext: '纯属虚构',//副标题
          left: 'center',//
          link: 'https://www.baidu.com',//主标题超链接
          target: 'self',//指定超链接打开方式，blank是新窗口打开，self是当前窗口打开
          //主标题文字的设置
          textStyle:{
            color : 'blue',//修改主标题文字的字体颜色
            fontStyle: 'oblique',//主标题文字字体风格，有三种样式normal默认，italic倾斜，oblique(也是倾斜...)
            fontWeight: 'normal',//主标题文字字体的粗细
            fontSize: 18,//主标题文字的字体大小
            lineHeight: 10,//行高
          }
        },
        //提示框
        tooltip: {
          trigger: 'item',//触发类型:item是图形触发，axis是坐标轴触发，none是什么都不触发
          formatter: '{a} <br/>{b} : {c} ({d}%)'//提示框浮层内容格式器，支持字符串模板和回调函数两种形式
        },
        //图例组件
        legend: {
          left: 'center',//图例组件离容器左侧得距离
          top: 'bottom',//图例组件离容器上侧的距离
          data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']//图例的数据数值，数组项通常为一个字符串，每一项代表一个系列的name
        },
        //工具栏
        toolbox: {
          show: true,//是否显示工具栏组件
          feature: {//各工具配置项
            mark: {show: true},//辅助线是否展示
            dataView: {//数据视图工具
              show: true,//是否展示数据视图工具
              readOnly: false//是否不可编辑
            },
            magicType: {//动态类型切换
              show: true,//动态类型切换是否显示
              type: ['pie', 'funnel']//启用的动态类型
            },
            restore: {show: true},//是否显示配置项还原
            saveAsImage: {show: true}//是否显示保存为图片
          }
        },
        series: [//系列列表
          {
            name: '半径模式',//系列名称
            type: 'pie',//用来确定系列列表是什么类型，pie就是饼图
            radius: [20, 110],//饼图的半径，第一项是内半径，第二项是外半径，内半径设大可以显示成圆环图
            center: ['25%', '50%'],//饼图的中心(圆心)坐标，第一项是横坐标，第二项是纵坐标
            roseType: 'radius',//用来定义饼形图变成南丁格尔玫瑰图，两种模式，使用redius可以用圆心角展现数据百分比，半径来展示数据大小；使用area圆心角相同，通过半径展示数据，
            label: {//单个扇区的标签配置
              show: false//不显示
            },
            emphasis: {//高亮的图形样式(着重显示)
              label: {//
                show: true
              }
            },
            data: [
              {value: 5, name: 'rose1'},
              {value: 10, name: 'rose2'},
              {value: 15, name: 'rose3'},
              {value: 20, name: 'rose4'},
              {value: 25, name: 'rose5'},
              {value: 30, name: 'rose6'},
              {value: 35, name: 'rose7'},
              {value: 40, name: 'rose8'}
            ]
          },
          {
            name: '面积模式',
            type: 'pie',
            radius: [30, 110],
            center: ['75%', '50%'],
            roseType: 'area',
            data: [
              {value: 5, name: 'rose1'},
              {value: 10, name: 'rose2'},
              {value: 15, name: 'rose3'},
              {value: 20, name: 'rose4'},
              {value: 25, name: 'rose5'},
              {value: 30, name: 'rose6'},
              {value: 35, name: 'rose7'},
              {value: 40, name: 'rose8'}
            ]
          }
        ]
      }
    }
  },
  methods:{
    trueRou(){
      this.a = this.$echarts.init(
        document.getElementById("easyEcharts")
      )
      this.a.setOption(this.easyEcharts,true)
    }
  },
  mounted() {
    this.trueRou();
  }
}
</script>

<style scoped>

</style>