【开发】【Echarts】饼图组件

饼图组件使用及需求数据格式

前端控件使用
下面展示一些 代码片。

<echarPie 
     :ref="这里写对应图的ref"
     v-loading="控制加载的绑定"
     :height="echart图高" :width="'100%'"
     :options="饼图样式设置" 
     >
</echarPie>

// 这里放一个方法示例   记得给data添加other属性
getSlowSqlEchart(params, apiType).then(res => {

        const data = res.data

        data['other'] = {
          name: this.slowSqlEchartsItem.name,
          unit: this.slowSqlEchartsItem.unit
        }

        setTimeout(() => {
            this.$refs[this.slowSqlEchartsItem.ref].update(data)
            // this.$refs.slowSqlTimeConsumingDistribution.update(data)
          }, 5)
        this.slowSqlEchartsItem.loading = false
      })
      .catch(error => {
        this.slowSqlEchartsItem.loading = false
      })

"{"series":
	[{"type":"pie"}],
  "dataset":
  	{"source":
  		[{"rangescope":"20-30ms","num":183},
  		 {"rangescope":"30-40ms","num":54},
  		 {"rangescope":"40-50ms","num":61},
  		 {"rangescope":"50-60ms","num":14},
  		 {"rangescope":"60-70ms","num":4},
  		 {"rangescope":"70-80ms","num":4},
  		 {"rangescope":"900ms-1s","num":1},
  		 {"rangescope":"2-3s","num":2}],
   "dimensions":
   		["rangescope","num"]}}"