Echarts渲染男女比例象形图
Echarts渲染男女比例象形图
示例：
源码：
这里Echarts的demo应用场景为普通html,需引入echarts.js文件
js:
var loadEcharts13 = function () {
var myChartss = echarts.init(document.getElementById('Echarts13'));
var symbols = ['path://M694.7 248.2c-6.3-43.6-43.9-77.2-89.3-77.2L498.9 171l0 0.2-92.8 0c-45.4 0-82.9 33.5-89.3 77.2-0.6 3-1 6-1 9.2L315.8 441l0 120c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-46.8 0-228.4 14.5 0 0 685.4c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3L495.1 622.5l21.4 0 0-0.2 0 348.9c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3l0-685.5 14.5 0 0 275.1c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-303.4C695.8 254.3 695.4 251.2 694.7 248.2z M503.1 145.8c40.3 0 72.9-32.6 72.9-72.9 0-40.3-32.6-72.9-72.9-72.9s-72.9 32.6-72.9 72.9C430.2 113.2 462.9 145.8 503.1 145.8z',
'path://M511.6 190.5c-39.4 0-71.3-39.9-71.3-89.1 0-49.2 31.9-89.1 71.3-89.1s71.3 39.9 71.3 89.1c0 49.2-31.8 89.1-71.3 89.1zM706 500.3c12.4 51-42.5 72.1-55.7 23l-53.8-216h-17.2l94.3 379.5h-88.7V972c0 51.6-63.2 51.6-63.2 0V686.7h-20.4v285.2c0 51.6-65.4 51.6-65.4 0V686.7H349.5l92.4-379.5H427l-53.6 216c-13.6 48-68.6 28.1-55.8-23.1L377.7 266c7-27.1 35.8-73.3 86-75.5h96.6c48.6 2.1 77.7 48.8 85.7 75.3l60 234.5z m0 0'
];
var bodyMax = 100//指定图形界限的值
var labelSetting = {
normal: {
show: false,
position: 'bottom',
offset: [0, 10],
formatter: function (param) {
return (param.value / bodyMax * 100).toFixed(0) + '%';
},
textStyle: {
fontSize: 18,
fontFamily: 'Arial',
color: '#686868'
}
}
};
var markLineSetting = { //设置标线
symbol: 'none',
lineStyle: {
normal: {
opacity: 0.3
}
},
data: [{
type: 'max',
label: {
normal: {
formatter: 'max: {c}'
}
}
}, {
type: 'min',
label: {
normal: {
formatter: 'min: {c}'
}
}
}]
};
var option = {
tooltip: {
show: false, //鼠标放上去显示悬浮数据
},
grid: {
// left: '20%',
// right: '20%',
top: '8%',
bottom: '0',
left: '1%',
right: '1%',
containLabel: true
},
xAxis: {
data: ['男', '女'],
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#fff',
fontSize: chartsRelativeSize(1.1, 'r'),
},
}
},
yAxis: {
splitLine: {
show: false
},
axisTick: {
// 刻度线
show: false
},
axisLine: {
// 轴线
show: false
},
axisLabel: {
show: true,
textStyle: {
color: '#00badb',
fontSize: chartsRelativeSize(0.9, 'r'),
},
},
splitLine: {
lineStyle: {
color: '#393d60'
},
}
},
tooltip: {
show: true,
trigger: 'axis',
formatter: '{a}
{b}:{c}%',
textStyle: {
color: '#ffffff',
fontSize: chartsRelativeSize(0.8, 'r')
},
axisPointer: {
type: 'shadow',
}
},
series: [
{
name: '男女比例',
type: 'pictorialBar',
symbolClip: true,
symbolBoundingData: bodyMax,
label: labelSetting,
barWidth: chartsRelativeSize(3.2, 'r'),
data: [
{
value: 35,
symbol: symbols[0],
itemStyle: {
normal: {
color: 'rgb(146,250,53)' //单独控制颜色
}
}
},
{
value: 65,
symbol: symbols[1],
itemStyle: {
normal: {
color: 'rgb(255,128,98)' //单独控制颜色
}
}
}],
// markLine: markLineSetting,
z: 10
},
{
// 设置背景底色，不同的情况用这个
name: 'full',
type: 'pictorialBar', //异型柱状图 图片、SVG PathData
symbolBoundingData: bodyMax,
animationDuration: 0,
barWidth: chartsRelativeSize(3.2, 'r'),
itemStyle: {
normal: {
color: '#ccc' //设置全部颜色，统一设置
}
},
z: 10,
data: [{
itemStyle: {
normal: {
color: 'rgba(146,250,53,0.30)' //单独控制颜色
}
},
value: 100,
symbol: symbols[0]
},
{
itemStyle: {
normal: {
color: 'rgba(255,128,98,0.30)' //单独控制颜色
}
},
value: 100,
symbol: symbols[1]
}
]
}
]
}
myChartss.setOption(option);
};