美文网首页
饼图指示线的格式

饼图指示线的格式

作者: 兰夏天 | 来源:发表于2019-07-26 16:43 被阅读0次

templete中

  <div ref="hazardratio" style="width:99%;height:260px;" ></div>

data中

data () {
    return {
      chart: null,
      data: [],
      pielegend: ['暂无数据'],
      pieseriedata: [
        { value: 0, name: '暂无数据' }
      ]
    }
  },

methods中

  piechart (pielegend, pieseriedata) {
      return {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          y: '92%',
          data: pielegend
        },
        series: [
          {
            center: ['50%', '45%'],
            name: '隐患类别',
            type: 'pie',
            radius: '75%',
            label: {
              normal: {
                show: true,
                //  position: 'inside',
                formatter: '{b}{d}%', // 模板变量有 {a}、{b}、{c}、{d},分别表示系列名,数据名,数据值,百分比。{d}数据会根据value值计算百分比

                textStyle: {
                  align: 'center',
                  baseline: 'middle',
                  fontFamily: '微软雅黑',
                  fontSize: 15,
                  fontWeight: 'bolder'
                }
              }
            },
            data: pieseriedata,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }

mounted中

 this.$nextTick(() => {
      this.chart = echarts.init(this.$refs.hazardratio)
      var that = this
      this.chart.setOption(that.piechart(that.pielegend, that.pieseriedata))
      //   on(window, 'resize', this.resize)
    })

相关文章

网友评论

      本文标题:饼图指示线的格式

      本文链接:https://www.haomeiwen.com/subject/llsdrctx.html