需求：
//布局
<div class="gender-model">
<div style="display: flex;align-items:center;width: 100%;height: 33%">
<div style="font-size:14px;font-weight: 500">男性</div>
<div ref="man_main" style="width:80%; height: 100%;"></div>
<div style="font-size:14px;font-weight: 500">72.8%</div>
</div>
<div style="display: flex;align-items:center;width: 100%;height: 33%">
<div style="font-size:14px;font-weight: 500">女性</div>
<div ref="woman_main" style="width:80%; height: 100%;"></div>
<div style="font-size:14px;font-weight: 500">20.4%</div>
</div>
</div>
</div>
//样式
.gender-model{
width: 500px;
height: 160px;
position: absolute;
right: 70px;
top: 0px;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.gender-model-item{
display: flex;
margin-right: 20px;
}
获取图片的矢量路径: juejin.cn/post/729814…
//echarts图表配置
//定义男，女两种图片的矢量路径
let man = `path://M516.608 217.6c40.448 0 72.704-32.768 72.704-72.704 0-40.448-32.768-72.704-72.704-72.704-40.448 0-72.704 32.768-72.704 72.704s32.256 72.704 72.704 72.704z m80.384 18.432H435.712c-51.2 0-93.696 41.472-93.696 93.184v225.28c0 17.408 13.824 31.744 31.232 31.744s31.744-14.336 31.744-31.744V351.744h16.384v565.76c0 23.552 18.944 42.496 43.008 42.496 23.552 0 42.496-18.944 42.496-42.496V588.8h17.408v328.192c0 23.552 18.944 42.496 42.496 42.496 23.552 0 43.008-18.944 43.008-42.496V351.744h16.384v203.264c0 17.408 14.336 31.744 31.744 31.744 17.408 0 31.232-14.336 31.232-31.744v-225.28c1.024-51.712-40.96-93.696-92.16-93.696z`;
let girl = `path://M693.064905 504.590142l-55.845778-202.954549c-7.532724-22.967796-34.488553-63.372358-79.685923-65.239925h-89.777337c-46.750604 1.927976-73.520086 41.894316-80.000256 65.365863l-55.777177 202.707792c-11.954885 44.266658 39.220951 61.57032 51.857744 19.985218l49.867311-187.020846h14.008799l-85.85176 328.529989h80.247012v246.909946c0 44.697714 60.764522 44.697714 60.764522 0v-246.909946h18.924473v246.909946c0 44.697714 58.766922 44.697714 58.766922 0v-246.909946h82.427888l-87.654823-328.529989h15.938823l49.988129 187.020846c12.331675 42.517862 63.256659 24.280417 51.801431-19.864399zM512.336858 219.833299c38.471467 0 69.538196-32.435663 69.538196-72.527941 0-40.031868-31.066729-72.528965-69.538196-72.528965-38.415154 0-69.48393 32.497096-69.48393 72.528965 0 40.030845 31.0698 72.527941 69.48393 72.527941z`;
const chartManOption={
//图表两种颜色定义
color: ["#6c7efa", "#c6dffe"],
tooltip: {
show: true,
trigger:'item',
//鼠标悬浮图表后显示的文字
formatter: (params) => {
return `男：728人，72.8%`;
} else {
return ``;
}
},
},
xAxis: {
type: "value",
max: 10,
splitLine: { show: false },
offset: 10,
axisLine: {
show: false,
lineStyle: {
color: "#999",
},
},
axisLabel: {
show: false,
margin: 10,
},
},
yAxis: {
type: "category",
data: ["男"],
inverse: true,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
show: false,
margin: 10,
color: "#999",
fontSize: 12,
},
},
series: [
{
type: "pictorialBar",
symbol: man,
symbolRepeat: "false",
symbolMargin: [10, 0],
symbolClip: true,
symbolSize: [17, 44],
symbolBoundingData: 10,
data: [7.6],
z: 10,
},
{
type: "pictorialBar",
label: {
show: false,
},
animationDuration: 0,
symbolRepeat: "fixed",
symbolMargin: [10, 0],
symbol: man,
symbolSize: [17, 44],
symbolBoundingData: 10,
data: [10],
z: 5,
},
],
};
const chartWomanOption={
color: ["#6c7efa", "#c6dffe"],
tooltip: {
show: true,
trigger:'item',
formatter: (params) => {
if (params.componentIndex === 0) {
return `女：204人，20.4%`;
} else {
return ``;
}
},
},
xAxis: {
type: "value",
max: 10,
splitLine: { show: false },
offset: 10,
axisLine: {
show: false,
lineStyle: {
color: "#999",
},
},
axisLabel: {
show: false,
margin: 10,
},
},
yAxis: {
type: "category",
data: ["女"],
inverse: true,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
show: false,
margin: 10,
color: "#999",
fontSize: 12,
},
},
series: [
{
type: "pictorialBar",
symbol: girl,
symbolRepeat: "false",
symbolMargin: [10, 0],
symbolClip: true,
symbolSize: [17, 44],
symbolBoundingData: 10,
data: [3],
z: 10,
},
{
type: "pictorialBar",
label: {
show: false,
},
animationDuration: 0,
symbolRepeat: "fixed",
symbolMargin: [10, 0],
symbol: girl,
symbolSize: [17, 44],
symbolBoundingData: 10,
data: [10],
z: 5,
},
],
};
//创建Echarts图表方法
manRequestData(){
let chartDom = this.$refs.man_main;
const option = deepClone(chartManOption);
let myChart = echarts.init(chartDom);
option && myChart.setOption(option);
},
womanRequestData(){
let chartDom = this.$refs.woman_main;
const option = deepClone(chartWomanOption);
let myChart = echarts.init(chartDom);
option && myChart.setOption(option);
},
//挂载阶段调用
mounted(){
this.manRequestData();
this.womanRequestData();
}
实际效果：
