目录
一、结构分析
二、配置图表各部分
1.名称及排序
2.进度条绘制
3.数据末端圆形绘制
（1）基本配置
（2）数据
（3）坐标轴配置
（4）点的样式
（5）项的样式（itemStyle）
（6）层级配置
三、示例代码
最终实现的样子：
一、结构分析
根据UI设计图，要实现如图效果的横向排列表
开始想用elementui进度条组件，但是它不够能定义太多的样式（如渐变、数据末端圆形等）。因为觉得麻烦，也不想用原生的html\css\js书写，所以还是采用echarts绘制。
想这个分为两部分：左侧名称，右侧进度条及数据展示，并没有思路不知如何下手。
参考了一位博主大大的文：echarts横向进度条-CSDN博客
思路有了：就如这位博主的思路，通过 ECharts 创建了一个包含多个 y 轴、渐变条形图、背景条形图和散点数据点完成这个效果。
二、配置图表各部分
1.名称及排序
都是常用的一些属性
grid：设置图表的内边距。
xAxis：隐藏 x 轴。
yAxis：定义了多个 y 轴，分别用于：显示地区名称、显示排序（数字）等
series：定义了多个图表的数据系列，包括条形图系列，用于显示每个地区的数据条。另一个条形图系列，用作进度条的背景......
let option={
// 间距
grid: {
left: '10%',
top: '10%',
right: '10%',
bottom: '10%',
containLabel: true
},
xAxis: [{
show: false,
}],
// 名称
yAxis: [
{
axisTick: 'none',
axisLine: 'none',
offset: '20',
axisLabel: {
textStyle: {
color: '#8CBAEE',
fontSize: '12',
}
},
data: ['大足区', '秀山县', '涪陵区', '万州区', '忠县']
},
// 排序
{
axisTick: 'none',
axisLine: 'none',
axisLabel: {
textStyle: {
color: 'red',
fontSize: '12',
}
},
data: ['5', '4', '3', '2', '1']
},
{
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0)'
}
},
data: [],
}
],
}
2.进度条绘制
柱状图模拟进度条
series: [
// 数据
{
name: '条',
type: 'bar',
yAxisIndex: 0,
data: [900, 470, 850, 610, 340],
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: '#ffffff',
fontSize: '12',
}
}
},
barWidth: 4,
itemStyle: {
normal: {
color: function (params) {
let colorList = [
['#0A083A', '#5F74E9','#A03EF5'],
['#0A083A', '#33A6FF','#07C1FE'],
['#0A083A', '#4A6DEB','#20B3F9'],
['#0A083A', '#496EF2','#AE2EFD'],
['#0A083A', '#895ADE','#D987C5'],
]
let index = params.dataIndex % colorList.length; //确保索引在colorList的范围内循环
return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{offset: 0,color: colorList[index][0]},
{offset: 0.4,color: colorList[index][1]},
{offset: 1,color: colorList[index][2]}
]);
}
}
},
z:2
},
// 进度条背景
{
name: '背景',
type: 'bar',
yAxisIndex: 1,
data: [1000,1000,1000,1000,1000], // 总数据，可动态绑定
barWidth: 6,
itemStyle: {
normal: {
color: 'blue',
barBorderRadius: 10,
}
},
z: 1
},
]
3.数据末端圆形绘制
echarts官网scatter：Documentation - Apache ECharts
（1）基本配置
name: 图表的名称。
type: 图表的类型，这里是'scatter'，表示这是一个散点图。
hoverAnimation: 设置为false，表示鼠标悬停在数据点上时，数据点不会有动画效果。
（2）数据
data: 这是一个数组，包含了散点图中所有点的坐标。每个点由两个值组成，分别代表X轴和Y轴的坐标。例如，[340, 4]表示一个点的X坐标为340，Y坐标为4。
（3）坐标轴配置
yAxisIndex: 设置为0，表示这个散点图使用图表中第一个Y轴。这在图表中有多个Y轴时特别有用，确保散点图与特定的Y轴对应。
（4）点的样式
symbol: 设置为'circle'，表示散点图中的点使用圆形符号。
symbolSize: 设置为6，表示每个圆形符号的大小。
（5）项的样式（itemStyle）
这里只设置了color: 这是一个函数，用于动态设置每个点的颜色。函数接受一个参数params，其中params.dataIndex是当前数据点的索引。根据这个索引，函数从一个颜色数组colors中选择一个颜色返回。
（6）层级配置
z: 设置为4，这用于控制图表的堆叠顺序。在ECharts中，数值越大的系列（series）会被绘制在数值较小的系列之上。
三、示例代码
其他样式在调整下，在从后端获取数据，就跟UI图大差不差了。以下是我实现效果图与示例代码，可供参考：
完整代码如下：
getholdTop(){
let holdTopDom = document.getElementById("showprogress");
this.holdTop = echarts.init(holdTopDom);
let option={
// 间距
grid: {
left: '10%',
top: '10%',
right: '10%',
bottom: '10%',
containLabel: true
},
xAxis: [{
show: false,
}],
// 名称
yAxis: [
{
axisTick: 'none',
axisLine: 'none',
offset: '20',
axisLabel: {
textStyle: {
color: '#8CBAEE',
fontSize: '12',
}
},
data: ['大足区', '秀山县', '涪陵区', '万州区', '忠县']
},
],
series: [
// 数据
{
name: '条',
type: 'bar',
yAxisIndex: 0,
data: [900, 470, 850, 610, 340],
label: {
normal: {
show: true,
position: 'right',
textStyle: {
color: '#ffffff',
fontSize: '12',
}
}
},
barWidth: 4,
itemStyle: {
normal: {
color: function (params) {
let colorList = [
['#0A083A', '#5F74E9','#A03EF5'],
['#0A083A', '#33A6FF','#07C1FE'],
['#0A083A', '#4A6DEB','#20B3F9'],
['#0A083A', '#496EF2','#AE2EFD'],
['#0A083A', '#895ADE','#D987C5'],
]
let index = params.dataIndex % colorList.length; //确保索引在colorList的范围内循环
return new echarts.graphic.LinearGradient(0, 0, 1, 1, [
{offset: 0,color: colorList[index][0]},
{offset: 0.4,color: colorList[index][1]},
{offset: 1,color: colorList[index][2]}
]);
}
}
},
z:2
},
// 散点圆圈
{
name: '数据点',
type: 'scatter',
hoverAnimation: false,
data: [
[340, 4], // 需要x|y坐标来定位点
[610, 3],
[850, 2],
[470, 1],
[900, 0]
],
yAxisIndex: 0, // 使用与条形图相同的y轴
symbol: 'circle', // 使用圆形符号
symbolSize: 6, // 调整圆点的大小
itemStyle: {
color: function (params) {
let colors = ['#D987C5', '#AE2EFD', '#20B3F9', '#07C1FE', '#A03EF5'];
return colors[params.dataIndex];
}
},
z: 4
},
{
name: '数据点',
type: 'scatter',
hoverAnimation: false,
data: [
[340, 4],
[610, 3],
[850, 2],
[470, 1],
[900, 0]
],
yAxisIndex: 0,
symbol: 'circle',
symbolSize: 12,
itemStyle: {
color: function (params) {
let colors = ['rgba(217,135,197,0.5)', 'rgba(147,46,253,0.5)', 'rgba(32,172,249,0.5)', 'rgba(7,193,254,,,0.5)', 'rgba(160,62,245,0.5'];
return colors[params.dataIndex];
}
},
z: 3
}
]
};
option&&this.holdTop.setOption(option);
},若文章对你有帮助，点赞、收藏加关注吧！
