人体模型echarts pictorialBar配置项内容和展示
项目中做到的一个功能，还有很多不足的地方
配置项如下
var symbols = [
'path://m 39.989407,21.914195 2.559322,1.759534 2.239407,1.119703 2.239406,1.279661 2.71928,1.599576 3.199153,1.759534 2.399364,2.079449 1.599576,2.879238 0.639831,3.519068 0.479873,2.879237 0,4.318856 0,15.51589 0.159957,6.71822 0.959746,3.039195 1.599576,4.638771 1.599577,3.679025 1.919491,2.879238 1.439619,0.63983 0.959746,2.559322 0,2.239407 -1.119704,0.319915 -1.759534,-0.319915 0.479873,3.519068 -0.63983,1.919491 -2.239407,0.799789 -2.559322,0 -2.71928,-2.559322 -0.63983,-1.439619 -0.319916,-1.119704 -0.159957,-2.399364 -0.479873,-2.079449 -0.639831,-5.598517 0,-4.318856 c 0,0 -0.159957,-1.599576 -0.319915,-2.239407 -0.159957,-0.63983 -1.439619,-3.519068 -1.439619,-3.519068 l -0.959745,-2.239406 -0.959746,-0.799788 -0.799788,1.759533 -0.479873,3.359111 0,10.717161 -1.119703,9.4375 -1.599577,13.436438 -0.959745,4.63877 -0.959746,7.51801 -1.119704,8.15784 -1.759534,10.5572 -0.63983,4.47882 1.119703,4.79873 1.279661,1.75953 0.319916,2.71928 -0.319916,2.23941 -3.35911,-0.47988 -4.798729,-0.47987 -3.199152,0.63983 -4.638771,-0.15996 -2.559322,0 0.159957,-1.91949 1.119704,0.15996 0.959745,-2.07945 0.959746,-2.55932 -0.159957,-4.63877 -0.639831,-5.2786 -0.159958,-5.11865 -1.279661,-10.87712 -1.279661,-6.87817 -0.959745,-8.3178 -1.119704,-6.078391 -1.279661,-7.677966 -1.919491,-8.157839 0,-6.238347 -0.479873,-4.958687 -1.279661,-3.519068 -1.119704,-1.439618 -1.599576,3.519067 0,7.358051 -0.479873,9.597458 -0.479873,4.318856 -1.599576,3.039195 -1.759534,1.599576 L 6.5582627,93.095339 4.7987288,89.736229 5.1186441,87.176907 5.598517,86.537076 5.7584746,87.176907 6.2383475,85.57733 5.7584746,84.457627 4.3188559,85.257415 3.6790254,85.737288 2.8792373,85.097458 3.6790254,83.337924 4.1588983,81.57839 5.9184322,80.618644 7.3580509,80.138771 8.4777542,78.539195 9.1175848,75.5 l 0.6398305,-3.998941 0.3199157,-3.35911 1.279661,-7.518008 -0.479873,-14.87606 0.159957,-5.598517 1.279661,-4.318856 1.759534,-3.679025 5.43856,-4.318856 4.478813,-2.079449 5.118644,-2.399365 -0.159957,-7.997881 -2.399365,-1.279661 -2.239407,-1.279661 0.479873,-0.63983 -0.959746,-1.439619 0.959746,-1.4396188 1.439619,-1.279661 1.119703,0.1599576 0,-1.9194915 1.439619,-2.7192797 1.919491,-1.1197034 1.759534,-0.4798728 3.199153,-0.3199153 2.239407,0.3199153 1.599576,1.1197034 1.439619,1.9194915 1.119703,2.3993644 0,1.4396186 0.63983,1.1197034 1.279662,0 0.479872,1.9194913 -0.319915,1.599577 -2.399364,1.119703 -1.759534,0.799788 0.159957,4.158898 z',
'path://m 39.989407,21.914195 2.559322,1.759534 2.239407,1.119703 2.239406,1.279661 2.71928,1.599576 3.199153,1.759534 2.399364,2.079449 1.599576,2.879238 0.639831,3.519068 0.479873,2.879237 0,4.318856 0,15.51589 0.159957,6.71822 0.959746,3.039195 1.599576,4.638771 1.599577,3.679025 1.919491,2.879238 1.439619,0.63983 0.959746,2.559322 0,2.239407 -1.119704,0.319915 -1.759534,-0.319915 0.479873,3.519068 -0.63983,1.919491 -2.239407,0.799789 -2.559322,0 -2.71928,-2.559322 -0.63983,-1.439619 -0.319916,-1.119704 -0.159957,-2.399364 -0.479873,-2.079449 -0.639831,-5.598517 0,-4.318856 c 0,0 -0.159957,-1.599576 -0.319915,-2.239407 -0.159957,-0.63983 -1.439619,-3.519068 -1.439619,-3.519068 l -0.959745,-2.239406 -0.959746,-0.799788 -0.799788,1.759533 -0.479873,3.359111 0,10.717161 -1.119703,9.4375 -1.599577,13.436438 -0.959745,4.63877 -0.959746,7.51801 -1.119704,8.15784 -1.759534,10.5572 -0.63983,4.47882 1.119703,4.79873 1.279661,1.75953 0.319916,2.71928 -0.319916,2.23941 -3.35911,-0.47988 -4.798729,-0.47987 -3.199152,0.63983 -4.638771,-0.15996 -2.559322,0 0.159957,-1.91949 1.119704,0.15996 0.959745,-2.07945 0.959746,-2.55932 -0.159957,-4.63877 -0.639831,-5.2786 -0.159958,-5.11865 -1.279661,-10.87712 -1.279661,-6.87817 -0.959745,-8.3178 -1.119704,-6.078391 -1.279661,-7.677966 -1.919491,-8.157839 0,-6.238347 -0.479873,-4.958687 -1.279661,-3.519068 -1.119704,-1.439618 -1.599576,3.519067 0,7.358051 -0.479873,9.597458 -0.479873,4.318856 -1.599576,3.039195 -1.759534,1.599576 L 6.5582627,93.095339 4.7987288,89.736229 5.1186441,87.176907 5.598517,86.537076 5.7584746,87.176907 6.2383475,85.57733 5.7584746,84.457627 4.3188559,85.257415 3.6790254,85.737288 2.8792373,85.097458 3.6790254,83.337924 4.1588983,81.57839 5.9184322,80.618644 7.3580509,80.138771 8.4777542,78.539195 9.1175848,75.5 l 0.6398305,-3.998941 0.3199157,-3.35911 1.279661,-7.518008 -0.479873,-14.87606 0.159957,-5.598517 1.279661,-4.318856 1.759534,-3.679025 5.43856,-4.318856 4.478813,-2.079449 5.118644,-2.399365 -0.159957,-7.997881 -2.399365,-1.279661 -2.239407,-1.279661 0.479873,-0.63983 -0.959746,-1.439619 0.959746,-1.4396188 1.439619,-1.279661 1.119703,0.1599576 0,-1.9194915 1.439619,-2.7192797 1.919491,-1.1197034 1.759534,-0.4798728 3.199153,-0.3199153 2.239407,0.3199153 1.599576,1.1197034 1.439619,1.9194915 1.119703,2.3993644 0,1.4396186 0.63983,1.1197034 1.279662,0 0.479872,1.9194913 -0.319915,1.599577 -2.399364,1.119703 -1.759534,0.799788 0.159957,4.158898 z',
'path://m 39.989407,21.914195 2.559322,1.759534 2.239407,1.119703 2.239406,1.279661 2.71928,1.599576 3.199153,1.759534 2.399364,2.079449 1.599576,2.879238 0.639831,3.519068 0.479873,2.879237 0,4.318856 0,15.51589 0.159957,6.71822 0.959746,3.039195 1.599576,4.638771 1.599577,3.679025 1.919491,2.879238 1.439619,0.63983 0.959746,2.559322 0,2.239407 -1.119704,0.319915 -1.759534,-0.319915 0.479873,3.519068 -0.63983,1.919491 -2.239407,0.799789 -2.559322,0 -2.71928,-2.559322 -0.63983,-1.439619 -0.319916,-1.119704 -0.159957,-2.399364 -0.479873,-2.079449 -0.639831,-5.598517 0,-4.318856 c 0,0 -0.159957,-1.599576 -0.319915,-2.239407 -0.159957,-0.63983 -1.439619,-3.519068 -1.439619,-3.519068 l -0.959745,-2.239406 -0.959746,-0.799788 -0.799788,1.759533 -0.479873,3.359111 0,10.717161 -1.119703,9.4375 -1.599577,13.436438 -0.959745,4.63877 -0.959746,7.51801 -1.119704,8.15784 -1.759534,10.5572 -0.63983,4.47882 1.119703,4.79873 1.279661,1.75953 0.319916,2.71928 -0.319916,2.23941 -3.35911,-0.47988 -4.798729,-0.47987 -3.199152,0.63983 -4.638771,-0.15996 -2.559322,0 0.159957,-1.91949 1.119704,0.15996 0.959745,-2.07945 0.959746,-2.55932 -0.159957,-4.63877 -0.639831,-5.2786 -0.159958,-5.11865 -1.279661,-10.87712 -1.279661,-6.87817 -0.959745,-8.3178 -1.119704,-6.078391 -1.279661,-7.677966 -1.919491,-8.157839 0,-6.238347 -0.479873,-4.958687 -1.279661,-3.519068 -1.119704,-1.439618 -1.599576,3.519067 0,7.358051 -0.479873,9.597458 -0.479873,4.318856 -1.599576,3.039195 -1.759534,1.599576 L 6.5582627,93.095339 4.7987288,89.736229 5.1186441,87.176907 5.598517,86.537076 5.7584746,87.176907 6.2383475,85.57733 5.7584746,84.457627 4.3188559,85.257415 3.6790254,85.737288 2.8792373,85.097458 3.6790254,83.337924 4.1588983,81.57839 5.9184322,80.618644 7.3580509,80.138771 8.4777542,78.539195 9.1175848,75.5 l 0.6398305,-3.998941 0.3199157,-3.35911 1.279661,-7.518008 -0.479873,-14.87606 0.159957,-5.598517 1.279661,-4.318856 1.759534,-3.679025 5.43856,-4.318856 4.478813,-2.079449 5.118644,-2.399365 -0.159957,-7.997881 -2.399365,-1.279661 -2.239407,-1.279661 0.479873,-0.63983 -0.959746,-1.439619 0.959746,-1.4396188 1.439619,-1.279661 1.119703,0.1599576 0,-1.9194915 1.439619,-2.7192797 1.919491,-1.1197034 1.759534,-0.4798728 3.199153,-0.3199153 2.239407,0.3199153 1.599576,1.1197034 1.439619,1.9194915 1.119703,2.3993644 0,1.4396186 0.63983,1.1197034 1.279662,0 0.479872,1.9194913 -0.319915,1.599577 -2.399364,1.119703 -1.759534,0.799788 0.159957,4.158898 z',
'path://m 39.989407,21.914195 2.559322,1.759534 2.239407,1.119703 2.239406,1.279661 2.71928,1.599576 3.199153,1.759534 2.399364,2.079449 1.599576,2.879238 0.639831,3.519068 0.479873,2.879237 0,4.318856 0,15.51589 0.159957,6.71822 0.959746,3.039195 1.599576,4.638771 1.599577,3.679025 1.919491,2.879238 1.439619,0.63983 0.959746,2.559322 0,2.239407 -1.119704,0.319915 -1.759534,-0.319915 0.479873,3.519068 -0.63983,1.919491 -2.239407,0.799789 -2.559322,0 -2.71928,-2.559322 -0.63983,-1.439619 -0.319916,-1.119704 -0.159957,-2.399364 -0.479873,-2.079449 -0.639831,-5.598517 0,-4.318856 c 0,0 -0.159957,-1.599576 -0.319915,-2.239407 -0.159957,-0.63983 -1.439619,-3.519068 -1.439619,-3.519068 l -0.959745,-2.239406 -0.959746,-0.799788 -0.799788,1.759533 -0.479873,3.359111 0,10.717161 -1.119703,9.4375 -1.599577,13.436438 -0.959745,4.63877 -0.959746,7.51801 -1.119704,8.15784 -1.759534,10.5572 -0.63983,4.47882 1.119703,4.79873 1.279661,1.75953 0.319916,2.71928 -0.319916,2.23941 -3.35911,-0.47988 -4.798729,-0.47987 -3.199152,0.63983 -4.638771,-0.15996 -2.559322,0 0.159957,-1.91949 1.119704,0.15996 0.959745,-2.07945 0.959746,-2.55932 -0.159957,-4.63877 -0.639831,-5.2786 -0.159958,-5.11865 -1.279661,-10.87712 -1.279661,-6.87817 -0.959745,-8.3178 -1.119704,-6.078391 -1.279661,-7.677966 -1.919491,-8.157839 0,-6.238347 -0.479873,-4.958687 -1.279661,-3.519068 -1.119704,-1.439618 -1.599576,3.519067 0,7.358051 -0.479873,9.597458 -0.479873,4.318856 -1.599576,3.039195 -1.759534,1.599576 L 6.5582627,93.095339 4.7987288,89.736229 5.1186441,87.176907 5.598517,86.537076 5.7584746,87.176907 6.2383475,85.57733 5.7584746,84.457627 4.3188559,85.257415 3.6790254,85.737288 2.8792373,85.097458 3.6790254,83.337924 4.1588983,81.57839 5.9184322,80.618644 7.3580509,80.138771 8.4777542,78.539195 9.1175848,75.5 l 0.6398305,-3.998941 0.3199157,-3.35911 1.279661,-7.518008 -0.479873,-14.87606 0.159957,-5.598517 1.279661,-4.318856 1.759534,-3.679025 5.43856,-4.318856 4.478813,-2.079449 5.118644,-2.399365 -0.159957,-7.997881 -2.399365,-1.279661 -2.239407,-1.279661 0.479873,-0.63983 -0.959746,-1.439619 0.959746,-1.4396188 1.439619,-1.279661 1.119703,0.1599576 0,-1.9194915 1.439619,-2.7192797 1.919491,-1.1197034 1.759534,-0.4798728 3.199153,-0.3199153 2.239407,0.3199153 1.599576,1.1197034 1.439619,1.9194915 1.119703,2.3993644 0,1.4396186 0.63983,1.1197034 1.279662,0 0.479872,1.9194913 -0.319915,1.599577 -2.399364,1.119703 -1.759534,0.799788 0.159957,4.158898 z',
'path://m 39.989407,21.914195 2.559322,1.759534 2.239407,1.119703 2.239406,1.279661 2.71928,1.599576 3.199153,1.759534 2.399364,2.079449 1.599576,2.879238 0.639831,3.519068 0.479873,2.879237 0,4.318856 0,15.51589 0.159957,6.71822 0.959746,3.039195 1.599576,4.638771 1.599577,3.679025 1.919491,2.879238 1.439619,0.63983 0.959746,2.559322 0,2.239407 -1.119704,0.319915 -1.759534,-0.319915 0.479873,3.519068 -0.63983,1.919491 -2.239407,0.799789 -2.559322,0 -2.71928,-2.559322 -0.63983,-1.439619 -0.319916,-1.119704 -0.159957,-2.399364 -0.479873,-2.079449 -0.639831,-5.598517 0,-4.318856 c 0,0 -0.159957,-1.599576 -0.319915,-2.239407 -0.159957,-0.63983 -1.439619,-3.519068 -1.439619,-3.519068 l -0.959745,-2.239406 -0.959746,-0.799788 -0.799788,1.759533 -0.479873,3.359111 0,10.717161 -1.119703,9.4375 -1.599577,13.436438 -0.959745,4.63877 -0.959746,7.51801 -1.119704,8.15784 -1.759534,10.5572 -0.63983,4.47882 1.119703,4.79873 1.279661,1.75953 0.319916,2.71928 -0.319916,2.23941 -3.35911,-0.47988 -4.798729,-0.47987 -3.199152,0.63983 -4.638771,-0.15996 -2.559322,0 0.159957,-1.91949 1.119704,0.15996 0.959745,-2.07945 0.959746,-2.55932 -0.159957,-4.63877 -0.639831,-5.2786 -0.159958,-5.11865 -1.279661,-10.87712 -1.279661,-6.87817 -0.959745,-8.3178 -1.119704,-6.078391 -1.279661,-7.677966 -1.919491,-8.157839 0,-6.238347 -0.479873,-4.958687 -1.279661,-3.519068 -1.119704,-1.439618 -1.599576,3.519067 0,7.358051 -0.479873,9.597458 -0.479873,4.318856 -1.599576,3.039195 -1.759534,1.599576 L 6.5582627,93.095339 4.7987288,89.736229 5.1186441,87.176907 5.598517,86.537076 5.7584746,87.176907 6.2383475,85.57733 5.7584746,84.457627 4.3188559,85.257415 3.6790254,85.737288 2.8792373,85.097458 3.6790254,83.337924 4.1588983,81.57839 5.9184322,80.618644 7.3580509,80.138771 8.4777542,78.539195 9.1175848,75.5 l 0.6398305,-3.998941 0.3199157,-3.35911 1.279661,-7.518008 -0.479873,-14.87606 0.159957,-5.598517 1.279661,-4.318856 1.759534,-3.679025 5.43856,-4.318856 4.478813,-2.079449 5.118644,-2.399365 -0.159957,-7.997881 -2.399365,-1.279661 -2.239407,-1.279661 0.479873,-0.63983 -0.959746,-1.439619 0.959746,-1.4396188 1.439619,-1.279661 1.119703,0.1599576 0,-1.9194915 1.439619,-2.7192797 1.919491,-1.1197034 1.759534,-0.4798728 3.199153,-0.3199153 2.239407,0.3199153 1.599576,1.1197034 1.439619,1.9194915 1.119703,2.3993644 0,1.4396186 0.63983,1.1197034 1.279662,0 0.479872,1.9194913 -0.319915,1.599577 -2.399364,1.119703 -1.759534,0.799788 0.159957,4.158898 z',
];
var typeAData= [{
value: 150,
symbol: symbols[0]
}, {
value: 80,
symbol: symbols[1]
}, {
value: 70,
symbol: symbols[2]
}, {
value: 60,
symbol: symbols[3]
}, {
value: 50,
symbol: symbols[4]
}];
var typeBData=[{
value: 12,
symbol: symbols[0],
color: 'red'
}, {
value: 44,
symbol: symbols[1],
color: 'blue'
}, {
value: 131,
symbol: symbols[2]
}, {
value: 33,
symbol: symbols[3]
}, {
value: 142,
symbol: symbols[4]
}];
var bothData= [{
value: 10,
symbol: symbols[0]
}, {
value: 100,
symbol: symbols[1]
}, {
value: 9,
symbol: symbols[2]
}, {
value: 80,
symbol: symbols[3]
}, {
value: 7,
symbol: symbols[4]
}]
var bodyMax = 150; //最大值
var labelSetting = {
normal: {
position: 'outside',
offset: [0, -10],
formatter: function (param) {
return (param.value / bodyMax * 100).toFixed(0) + '%';
},
textStyle: {
fontSize: 18,
fontFamily: 'Arial'
}
}
};
var option = {
tooltip:{},
legend: {
data: ['typeA', 'typeB'],
selectedMode: 'single',
right: '0',
top: '35',
orient: 'vertical',
},
xAxis: {
data: ['体重', '脂肪量', '推定骨量', '蛋白质等', '细胞液量'],
axisTick: { show: false },
// axisLine: { show: false },
// axisLabel: { show: false },
},
yAxis: {
show: true,
},
grid: {
top: '10',
width: '85%',
height: 150,
left: 15
},
markLine: {
z: -100
},
series: [{
name: 'typeA',
type: 'pictorialBar',
symbolClip: true,
symbolBoundingData: bodyMax,
label: labelSetting,
itemStyle: {
normal: {
color: function (idx) {
var color = ['#6B8BC6', '#F9A990', '#E9A5CA', '#6EB0E0', '#6C8CC6']
return color[idx.dataIndex];
}
}
},
data:typeAData,
z: 10
}, {
name: 'typeB',
type: 'pictorialBar',
symbolClip: true,
symbolBoundingData: bodyMax,
label: labelSetting,
itemStyle: {
normal: {
color: function (idx) {
var color = ['#6C8CC7', '#FFCF7B', '#C7A1CA', '#447DBF', '#006CB6']
return color[idx.dataIndex];
}
}
},
data:typeBData,
z: 5
}, {
name: '身体成分构成',
type: 'pictorialBar',
symbolBoundingData: bodyMax,
animationDuration: 0,
itemStyle: {
normal: {
color: '#ccc'
}
},
data:bothData
}]
};
截图如下
