echarts 象形柱图pictorialBar

象形柱图可以被想象为是个柱状图,但是柱状图的柱子并不显示,这些柱子称为基准柱,根据基准柱来定位和显示各种象形图形

1、配置data
	data:[{
		value:n,
		symbol:'circle',	自定义图像
		symbolSize:['100%','100%']
			当symbolBoundingData未设置时,默认填充整个图像高度到value对应的高度
				['30%', '50%']，那么最终图形的尺寸是：
					宽度：基准柱的宽度 * 30%。
					高度：
						如果 symbolRepeat 为 false:基准柱的高度 * 50%。
						如果 symbolRepeat 为 true:基准柱的宽度 * 50%。
			当设置了symbolBoundingData
				symbolSize设置为[30, '50%'],symbolBoundingData设置为124,那么最终图形的高度为124 * 50% = 62
		symbolPosition:'start'|'center'|'end',	图像在基准柱的位置
		symbolOffset:[0, 0]		根据当前位置进行位移,设置成百分比时,是根据自身大小进行
		symbolRepeat
			false/null/undefined：不重复，即每个数据值用一个图形元素表示。
			true：使图形元素重复，即每个数据值用一组重复的图形元素表示。重复的次数依据 data 计算得到。
			n：使图形元素重复，即每个数据值用一组重复的图形元素表示。重复的次数是给定的定值。
			'fixed'：使图形元素重复，即每个数据值用一组重复的图形元素表示。重复的次数依据symbolBoundingData计算得到，即与 data 无关。这在此图形被用于做背景时有用。
		symbolClip
			false:图形本身表示value数值大小,当symbolBoundingData设置时,表示symbolBoundingData大小
			true:图形被剪裁后剩余的部分表示数值大小,当symbolBoundingData为80,value为40,图形高度为symbolBoundingData大小,但要裁剪一半
	}]
	或data:[-12, -60, 34, 23, -21, 0, -25];	只设置value,其他在series中进行统一设置
2、配置series
	series:[{
		type: 'pictorialBar',
		symbol: 'circle',	设置统一图像
		barWidth,	设置基准柱宽度
		symbolBoundingData:n|[n,n],		图像绘制的界限,及当设置了此属性后,图像的绘制只和这个值有关,value只是搭配剪裁等使用,但必须设置value
			当为单个值时,图像会占满这个值
			当为数组[n,m],图像会占满对应的value的方向的值,与value反向的不绘制
		data, 
	},{...}]
	
3、达成图像进度的效果
	同时表达『总值』和『当前数值,在这种场景下,可以使用两个系列,一个系列是完整的图形,当做『背景』来表达总数值,另一个系列是使用symbolClip进行剪裁过的图形,表达当前数值。

效果图:

代码示例:
图一:

var paperDataURI = 'data:image/png;base64,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';

option = {
    backgroundColor: '#0f375f',
    tooltip: {},
    legend: {
        data: ['all'],
        textStyle: {color: '#ddd'}
    },
    xAxis: [{
        data: ['圣诞节儿童愿望清单', '', '珠穆朗玛\nQomolangma', '乞力马扎罗\nKilimanjaro'],
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {
            margin: 20,
            textStyle: {
                color: '#ddd',
                fontSize: 14
            }
        }
    }],
    yAxis: {
        splitLine: {show: false},
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {show: false}
    },
    markLine: {
        z: -1
    },
    animationEasing: 'elasticOut',
    series: [{
        type: 'pictorialBar',
        name: 'all',
        hoverAnimation: true,
        label: {
            show: true,
            position: 'top',
            formatter: '{c} m',
            fontSize: 16,
            color: '#e54035'
        },
        data: [{
            value: 13000,
            symbol: 'image://' + paperDataURI,
            symbolRepeat: true,
            symbolSize: ['100%', '20%'],
            symbolOffset: [0, 20],
            symbolMargin: '-30%',
            animationDelay: function (dataIndex, params) {
                return params.index * 30;
            }
        }, {
            value: '-',
            symbol: 'none',
        }, {
            value: 8844,
            symbol: 'image://' + ROOT_PATH + '/data/asset/img/hill-Qomolangma.png',
            symbolSize: ['200%', '105%'],
            symbolPosition: 'end',
            z: 10
        }, {
            value: 5895,
            symbol: 'image://' + ROOT_PATH + '/data/asset/img/hill-Kilimanjaro.png',
            symbolSize: ['200%', '105%'],
            symbolPosition: 'end'
        }],
        markLine: {
            symbol: ['none', 'none'],
            label: {
                show: false
            },
            lineStyle: {
                color: '#e54035',
                width: 2
            },
            data: [{
                yAxis: 8844
            }]
        }
    }, {
        name: 'all',			//底座系列
        type: 'pictorialBar',
        barGap: '-100%',
        symbol: 'circle',
        itemStyle: {
            color: '#185491'
        },
        silent: true,
        symbolOffset: [0, '50%'],
        z: -10,
        data: [{
            value: 1,
            symbolSize: ['150%', 50]
        }, {
            value: '-'
        }, {
            value: 1,
            symbolSize: ['200%', 50]
        }, {
            value: 1,
            symbolSize: ['200%', 50]
        }]
    }]
};

图二:

var path = 'path://M36.7,102.84c-1.17,2.54-2.99,4.98-3.39,7.63c-1.51,9.89-3.31,19.58-1.93,29.95 c0.95,7.15-2.91,14.82-3.57,22.35c-0.64,7.36-0.2,14.86,0.35,22.25c0.12,1.68,2.66,3.17,4.67,5.4c-0.6,0.82-1.5,2.22-2.58,3.48 c-0.96,1.12-1.96,2.35-3.21,3.04c-1.71,0.95-3.71,2.03-5.51,1.9c-1.18-0.08-3.04-2.13-3.16-3.43c-0.44-4.72,0-9.52-0.41-14.25 c-0.94-10.88-2.32-21.72-3.24-32.61c-0.49-5.84-1.63-12.01-0.35-17.54c3.39-14.56,2.8-28.84,0.36-43.4 c-2.71-16.16-1.06-32.4,0.54-48.59c0.91-9.22,4.62-17.36,8.53-25.57c1.32-2.77,1.88-6.84,0.87-9.62C21.89-3.77,18.09-11,14.7-18.38 c-0.56,0.1-1.13,0.21-1.69,0.31C10.17-11.52,6.29-5.2,4.71,1.65C2.05,13.21-4.42,22.3-11.43,31.28c-1.32,1.69-2.51,3.5-3.98,5.04 c-4.85,5.08-3.25,10.98-2.32,16.82c0.25,1.53,0.52,3.06,0.77,4.59c-0.53,0.22-1.07,0.43-1.6,0.65c-1.07-2.09-2.14-4.19-3.28-6.44 c-6.39,2.91-2.67,9.6-5.23,15.16c-1.61-3.31-2.77-5.68-3.93-8.06c0-0.33,0-0.67,0-1c6.96-16.08,14.63-31.9,20.68-48.31 C-5.24-4.07-2.03-18.55,2-32.73c0.36-1.27,0.75-2.53,0.98-3.82c1.36-7.75,4.19-10.23,11.88-10.38c1.76-0.04,3.52-0.21,5.76-0.35 c-0.55-3.95-1.21-7.3-1.45-10.68c-0.61-8.67,0.77-16.69,7.39-23.19c2.18-2.14,4.27-4.82,5.25-7.65c2.39-6.88,11.66-9,16.94-8.12 c5.92,0.99,12.15,7.93,12.16,14.12c0.01,9.89-5.19,17.26-12.24,23.68c-2.17,1.97-5.35,4.77-5.17,6.94c0.31,3.78,4.15,5.66,8.08,6.04 c1.82,0.18,3.7,0.37,5.49,0.1c5.62-0.85,8.8,2.17,10.85,6.73C73.38-27.19,78.46-14.9,84.2-2.91c1.52,3.17,4.52,5.91,7.41,8.09 c7.64,5.77,15.57,11.16,23.45,16.61c2.28,1.58,4.64,3.23,7.21,4.14c5.18,1.84,8.09,5.63,9.82,10.46c0.45,1.24,0.19,3.71-0.6,4.18 c-1.06,0.63-3.15,0.27-4.44-0.38c-7.05-3.54-12.84-8.88-19.14-13.5c-3.5-2.57-7.9-4-12.03-5.6c-9.44-3.66-17.73-8.42-22.5-18.09 c-2.43-4.94-6.09-9.27-9.69-14.61c-1.2,10.98-4.46,20.65,1.14,31.19c6.62,12.47,5.89,26.25,1.21,39.49 c-2.52,7.11-6.5,13.74-8.67,20.94c-1.91,6.33-2.2,13.15-3.23,19.75c-0.72,4.63-0.84,9.48-2.36,13.84 c-2.49,7.16-6.67,13.83-5.84,21.82c0.42,4.02,1.29,7.99,2.1,12.8c-3.74-0.49-7.47-0.4-10.67-1.66c-1.33-0.53-2.43-4.11-2.07-6.01 c1.86-9.94,3.89-19.69,0.07-29.74C34.55,108.63,36.19,105.52,36.7,102.84c1.25-8.45,2.51-16.89,3.71-24.9 c-0.83-0.58-0.85-0.59-0.87-0.61c-0.03,0.16-0.07,0.32-0.09,0.48C38.53,86.15,37.62,94.5,36.7,102.84z';

option = {
    color: ['#bb0004', '#ccc'],
    xAxis: {
        data: [
            'symbolClip: true\nsymbolRepeat: false',
            'symbolClip: true\nsymbolRepeat: true',
            'symbolClip: false\nsymbolRepeat: true'
        ],
        axisTick: {
            show: false
        },
        axisLabel: {
            interval: 0
        }
    },
    yAxis: {
        max: 80,	设置最值
        splitLine: {show: false}
    },
    series: [{		当前值系列
        type: 'pictorialBar',
        name: 'realValue',
        symbol: path,
        // 'real value' series should has higher z than 'background'
        // series.
        z: 10,
        symbolBoundingData: 80,		使得图形都以此为基准
        data: [{
            value: 40,			表示裁剪数值为80图像的一半高度
            symbolClip: true
        }, {
            value: 40,
            symbolSize: ['50%', '80%'],
            symbolClip: true,
            symbolRepeat: true
        }, {
            value: 40,
            symbolSize: ['50%', '80%'],
            symbolClip: false,			不裁剪的情况
            symbolRepeat: true
        }]
    }, {		总值系列
        type: 'pictorialBar',
        name: 'background',
        symbol: path,
        symbolBoundingData: 80,
        label: {
            normal: {
                show: true,
                position: 'outside',
                formatter: 'value: {c}',
                textStyle: {
                    color: '#bb0004'
                }
            }
        },
        data: [{
            value: 40,
            animationDuration: 0	取消背景图动画
        }, {
            value: 40,
            symbolSize: ['50%', '80%'],
            symbolRepeat: 'fixed',		当做背景重复时,使用'fixed'而非true
            animationDuration: 0
        }, {
            value: 40,
            symbolSize: ['50%', '80%'],
            // When a series is used as background, it is
            // recommended that set symbolRepeat as 'fixed'.
            symbolRepeat: 'fixed'
        }]
    }]
};

图三:

// Thanks [anoosurf](https://github.com/anoosurf) ~.
var starPath = 'path://m15.5,19c-0.082,0 -0.164,-0.02 -0.239,-0.061l-5.261,-2.869l-5.261,2.869c-0.168,0.092 -0.373,0.079 -0.529,-0.032s-0.235,-0.301 -0.203,-0.49l0.958,-5.746l-3.818,-3.818c-0.132,-0.132 -0.18,-0.328 -0.123,-0.506s0.209,-0.31 0.394,-0.341l5.749,-0.958l2.386,-4.772c0.085,-0.169 0.258,-0.276 0.447,-0.276s0.363,0.107 0.447,0.276l2.386,4.772l5.749,0.958c0.185,0.031 0.337,0.162 0.394,0.341s0.01,0.374 -0.123,0.506l-3.818,3.818l0.958,5.746c0.031,0.189 -0.048,0.379 -0.203,0.49c-0.086,0.061 -0.188,0.093 -0.29,0.093z';

var categoryData = ['DTA', 'Fin', 'Tool', 'VTG', 'CAAT', 'UYL', 'TC'];
var data = [-12, -60, 34, 23, -21, 0, -25];	 //表示每行要剪切的value

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: 120
    },
    xAxis: {
        splitLine: {show: false},
        axisLine: {show: false},
        axisTick: {show: false},
        axisLabel: {show: false}
    },
    yAxis: {
        data: categoryData,
        axisTick: {show: false},
        axisLine: {
            lineStyle: {color: '#ccc'}		//坐标轴线
        },
        axisLabel: {
            margin: 40,
            textStyle: {
                color: '#999',
                fontSize: 16
            }
        },
        splitLine: {show: true},
        position: 'top'
    },
    series: [{
        name: 'bg',
        type: 'pictorialBar',
        symbol: starPath,
        tooltip: {trigger: 'none'},
        itemStyle: {
            normal: {
                color: '#ddd'
            }
        },
        silent: true,
        symbolRepeat: 'fixed',
        symbolClip: false,	
        symbolBoundingData: 40,		//右边背景的绘图范围为40
        symbolSize: ['80%', '80%'],
        z: -1,
        data: data
    }, {
        name: 'bg',
        type: 'pictorialBar',
        symbol: starPath,
        tooltip: {trigger: 'none'},
        itemStyle: {
            normal: {
                color: '#ddd'
            }
        },
        silent: true,
        symbolRepeat: 'fixed',
        symbolClip: false,
        symbolBoundingData: -60,	//左边背景的绘图范围为-60
        symbolSize: ['80%', '80%'],
        z: -1,
        data: data
    }, {
        name: 'data',
        type: 'pictorialBar',
        symbol: starPath,
        symbolRepeat: true,
        symbolClip: true,
        symbolSize: ['80%', '80%'],
        symbolBoundingData: [-60, 40],	
        data: data
    }]
};