饼图进度条组件

目录结构

pie-progress           // 组件文件加名
	config.json        // 属性配置文件   
	thumbnail.png      // 组件缩略图
    index.js           // 组件解析

config.json

{
  "name": "pie-progress",
  "type": "echarts",
  "width": 500,
  "height": 500,
  "echartsOption": false,
  "option": {
    "title": {
      "type": "title-echarts",
      "name": "标题",
      "default": {
        "show": true,
        "text": "工作完成率"
      }
    },
    "backgroundColor": {
      "type": "color",
      "name": "背景颜色",
      "labelPosition": "left"
    },
    "color": {
      "type": "color",
      "multiple": true,
      "name": "颜色",
      "add": true,
      "remove": true,
      "default": ["#30d2fd", "#fff", "rgba(255,255,255,.2)"]
    },
    "tab": {
      "type": "tab",
      "name": "系列",
      "icon": "",
      "props": {
        "series": {
          "type": "tabs",
          "name": "系列",
          "multiple": true,
          "props": {
            "formatter": {
              "type": "text",
              "name": "内容格式器"
            },
            "color": {
              "type": "color",
              "name": "文字颜色",
              "labelPosition": "left"
            },
            "size": {
              "type": "number",
              "name": "文字大小"
            },
            "xCenter": {
              "type": "slider",
              "name": "X坐标",
              "min": 0,
              "max": 100,
              "step": 1,
              "showInput": true,
              "units": ["px", "%"]
            },
            "yCenter": {
              "type": "slider",
              "name": "X坐标",
              "min": 0,
              "max": 100,
              "step": 1,
              "showInput": true,
              "units": ["px", "%"]
            },
            "inRadius": {
              "type": "slider",
              "name": "内半径",
              "min": 0,
              "max": 100,
              "step": 1,
              "showInput": true,
              "units": ["px", "%"]
            },
            "outRadius": {
              "type": "slider",
              "name": "外半径",
              "min": 0,
              "max": 100,
              "step": 1,
              "showInput": true,
              "units": ["px", "%"]
            }
          },
          "default": [
            {
              "formatter": "{c}",
              "size": 38,
              "xCenter": {
                "value": 50,
                "unit": "%"
              },
              "yCenter": {
                "value": 50,
                "unit": "%"
              },
              "inRadius": {
                "value": 48,
                "unit": "%"
              },
              "outRadius": {
                "value": 50,
                "unit": "%"
              }
            }
          ]
        }
      }
    }
  },
  "data": {
    "type": "all",
    "static": [
      {
        "max": 100,
        "data": 38
      }
    ],
    "matchs": {
      "max": {
        "name": "最大值",
        "template": false,
        "field": [
          {
            "fieldName": "max",
            "fieldAlias": "max"
          }
        ]
      },
      "data": {
        "name": "进度值",
        "template": false,
        "field": [
          {
            "fieldName": "data",
            "fieldAlias": "data"
          }
        ]
      }
    },
    "rowLimit": 1
  }
}

index.js

define(['require', 'exports', 'echarts'], function(require, exports, echarts) {
  'use strict';
  return {
    // 渲染主方法
    render: function(widget) {
      // 初始化图表
      this.myChart = echarts.init(this.$container());
      this.update(widget);
      this.$emit('finish', true);
    },
    // 当widget属性改变时调用update方法更新图表
    update: function(widget) {
      this.myChart.setOption(this.getOption(widget));
    },
    // 当改变组件大小时调用Echarts.resize方法
    resize: function(width, height) {
      this.myChart && this.myChart.resize();
    },
    // 组合option
    getOption(widget) {
      let max = 0;
      let data = 0;
      const maxField = widget.data.dataAnalysis.max.field[0];
      const dataField = widget.data.dataAnalysis.data.field[0];
      if (maxField && dataField && widget.data.objectData) {
        max = widget.data.objectData[0][maxField.fieldName];
        data = widget.data.objectData[0][dataField.fieldName];
      }
      const series = widget.option.tab.series[0];
      return {
        title: widget.option.title,
        tooltip: widget.option.tooltip,
        toolbox: widget.option.toolbox,
        legend: widget.option.legend,
        backgroundColor: widget.option.backgroundColor,
        color: widget.option.color,
        series: [
          {
            type: 'pie',
            center: [
              series.xCenter.value + series.xCenter.unit,
              series.yCenter.value + series.yCenter.unit
            ],
            radius: [
              series.inRadius.value + series.inRadius.unit,
              series.outRadius.value + series.outRadius.unit
            ],
            hoverAnimation: false,
            data: [
              {
                name: '',
                value: data,
                label: {
                  show: true,
                  position: 'center',
                  color: series.color,
                  fontSize: series.size,
                  fontWeight: 'bold',
                  formatter: series.formatter
                }
              },
              {
                //画中间的图标
                name: '',
                value: 0,
                label: {
                  position: 'inside',
                  backgroundColor: '#fff',
                  width: 10,
                  height: 10,
                  borderRadius: 10,
                  padding: 10
                }
              },
              {
                //画剩余的刻度圆环
                name: '',
                value: max - data,
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            ]
          }
        ]
      };
    }
  };
});