饼图指示线的格式

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)
    })
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容