echarts绘制圆角方形进度图

案例效果展示：

 
左图旋转整块div 使用CSS3 transform: rotate（45deg）即可得到以左下角为起点向右上角增长的进度条

1.裁剪图形

symbolClip: true,

● false/null/undefined：图形本身表示数值大小，不对图形进行裁剪;
● true：图形被剪裁后剩余的部分表示数值大小;

  symbolClip 常在这种场景下使用：同时表达『总值』和『当前数值』。在这种场景下，可以使用两个系列，一个系列是完整的图形，当做『背景』来表达总数值，另一个系列是使用 symbolClip 进行剪裁过的图形，表达当前数值。

2.图形界限的值

symbolBoundingData: bodyMax,//指的是数据的最大值

  这个属性是『指定图形界限的值』。它指定了一个 data，这个 data 映射在坐标系上的位置，是图形绘制的界限。也就是说，如果设置了 symbolBoundingData，图形的尺寸则由 symbolBoundingData 决定。
当柱子是水平的，symbolBoundingData 对应到 x 轴上，当柱子是竖直的，symbolBoundingData 对应到 y 轴上。

● 没有使用 symbolRepeat 时:
  symbolBoundingData 缺省情况下和『参考柱』的尺寸一样。图形的尺寸由零点和 symbolBoundingData 决定。举例，当柱子是竖直的，柱子对应的 data 为 24，symbolSize 设置为 [30, '50%']，symbolBoundingData 设置为 124，那么最终图形的高度为 124 * 50% = 62。如果 symbolBoundingData 不设置，那么最终图形的高度为 24 * 50% = 12。

● 使用了 symbolRepeat 时：
  symbolBoundingData 缺省情况取当前坐标系所显示出的最值。symbolBoundingData 定义了一个 bounding，重复的图形在这个 bounding 中，依据 symbolMargin 和 symbolRepeat 和 symbolSize 进行排布。这几个变量决定了图形的间隔大小。

● 示例代码：

let bodyMax = 150;//设定象形柱状图的最大值

option = {
    grid: {
        top: 0* this.relativeRate,
        bottom: 0* this.relativeRate,
        left: 0* this.relativeRate,
        right: 0* this.relativeRate,
        height: 165.5* this.relativeRate,
    }
    },
    xAxis: {
        data: ['a'],//只有一个柱，旋转DIV
        axisTick: {
        show: false
        },
        axisLine: {
        show: false
        },
        axisLabel: {
        show: false
        }
    },
    yAxis: {
        max: bodyMax,
        offset: 20,//Y轴相对默认位置偏移
        axisLabel: {
        show: false
        },
        axisLine: {
        show: false
        },
        axisTick: {
        show: false
        },
        splitLine: {
        show: false
        }
    },
    series: [
        {
            name: 'typeA',
            type: 'pictorialBar',//象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图
            symbolClip: true,//1.裁剪图形
            symbolBoundingData: bodyMax,
            label: {show:false},
            data: [{
                value: 123,
                symbol: 'image://static/image/ganZhouimage/baofeiLingRed.svg'//建议使用svg，图片会被拉伸
            }],
            z: 10
        },
        {
            name: 'full',//被填满的底图
            type: 'pictorialBar',
            symbolBoundingData: bodyMax,//2.使用图形被填满状态重要属性
            animationDuration: 0,
            itemStyle: {
                normal: {
                color: '#ccc'
                }
            },
            data: [{
                value: 1,
                symbol: 'image://static/image/ganZhouimage/MaskCopy3.svg',
            }]
        }       
    ]
}