目录
一、结构分析
二、配置图表各部分
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);},若文章对你有帮助，点赞、收藏加关注吧！
