第一步：引入echarts
import * as echarts from "echarts";
第二步：准备一个放入echarts的盒子
<template>
<div>
<div class="bar"></div>
</div>
</template>
第三步：绘制图表
drawBar() {
let myChart = echarts.init(document.querySelector(".bar"));
// 左侧名称列表
let className = [
"维修工单",
"巡检",
"保养",
"安全检查",
"备品备件",
];
let data = [50, 28, 17, 38, 90];
// 设置默认值
var defaultData = [100, 100, 100, 100, 100];
let that = this
let option = {
grid: {
left: "5%", // 组件离容器左侧的位置
right: "5%",// 组件离容器右侧的位置
bottom: "0%",// 组件离容器底部的位置
top: "0%",// 组件离容器顶部的位置
containLabel: true,// containLabel 为 true 的时候，grid.left grid.right grid.top grid.bottom grid.width grid.height 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。
},
backgroundColor: "rgb(49,69,81)",//背景色
xAxis: { //X轴，如果想要改为竖向的柱状图，则在xAxis中type设置为category，并设置data值就行
show: false,//是否显示x轴
type: "value",//value为数值轴，适用于连续数据
},
yAxis: [
{
type: "category",//类目轴，适用于离散的类目数据，为该类型时数据可自动从series.data或dataset.source中取，或者可通过xAxis.data设置类目数据
inverse: true,//是否反向坐标轴
axisLabel: {//坐标轴刻度标签的相关设置
show: true,//是否显示刻度标签
margin: 60,//标签刻度与轴线之间的距离
textStyle: {//文本样式
color: "#B9E4E6",//刻度标签文本颜色
align: "left"//文字水平对齐方式
},
},
splitLine: {
show: false,//是否显示分隔线，默认数值轴显示，类目轴不显示
},
axisTick: {
show: false,//是否显示坐标轴刻度
},
axisLine: {
show: false,//是否显示坐标轴轴线
},
//类目数据，在类目轴（type:'category'）中有效，如果没有设置type，但设置了axis.data.则认为type是category。如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。不过注意，axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到。
data: className,
},
{//右边的y轴
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true,
axisLabel: {
textStyle: {
color: "#fff",
fontSize: "12",
},
formatter: function (value,index) {//刻度标签的内容格式器，支持字符串模板和回调函数两种形式，// 使用字符串模板，模板变量为刻度默认标签 {value} formatter: '{value} kg' // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引 formatter: function (value, index) { return value + 'kg'; }
return "已完成 "+ value + "/待完成 " + that.todo[index];
},
},
data: data,
},
],
series: [
{
name: "进度条",//系列名称
type: "bar",//柱状图
zlevel: 1,//用于分层，大的在小的上面
itemStyle: {//图形样式
normal: {
barBorderRadius: 0,//圆角半径
color: function (params) {//颜色
// 大于等于50%的是黄色 反之为蓝色
var colorList = [
["rgba(252, 210, 152, .2)", "rgba(252, 210, 152, 1)"],
["rgba(36, 253, 231, .2)", "rgba(36, 253, 231, 1)"],
];
var colorItem;
if (params.data >= 50) {
colorItem = colorList[0];
} else {
colorItem = colorList[1];
}
// 设置线条渐变色
return new echarts.graphic.LinearGradient(
0,
0,
1,
0,
[
{
offset: 0,
color: colorItem[0],
},
{
offset: 1,
color: colorItem[1],
},
],
false
);
},
},
},
barWidth: 4,//柱条宽度
data: data,
},
{
name: "背景",
type: "bar",
barWidth: 4,
barGap: "-100%",//不同系列的柱间距离，为百分比，如果想要两个系列的柱子重叠，可以设置为-100%，在同一坐标系上，此属性会被多个‘bar’系列共享。此属性应设置于此坐标系中最后一个‘bar’系列上才会生效，并且是对次坐标系中所有‘bar’系列生效
data: defaultData,
itemStyle: {
normal: {
color: "#1B375E",
barBorderRadius: 0,
},
},
},
{
name: "XXX",//柱形图后面的发光小圆点
type: "pictorialBar",//象形柱图，设置各种具象图形元素（如图片、svg pathdata等）的柱状图
//图形类型，可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI
symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhNJREFUeNq0llsoLVEcxme27ZJEPLimXJI4yaMQxZOkePN0IukQdZIXOiFFSrnkQUnigTydDkleSOLxpJRc6qBc6uSE3G8P+P71zWns9phlX776tWdmrzXfrFlrffPXt19fNQUlglLwBTjBM6/L8R1YA4vg6aOb6DZmOeAbOAYzYBO8uLQJA8V8mL9gCFx+xiwIdIFbMMhfFaWBFvALLKiYRYNuMAB2Nc9UD4I5yv9yuDSK4khavTASjYBD0G5lpoM+voYLzXvNglNQ4c6sBvwEJ5rvNArKQKTZLATkuptUH6gHNJvNKsGk5h8dcGQhhlkeWNX8J3ljJQ6mwCNQiZJkMAfuObdtIECh3wooEKMUsKfQIRQsgySeJ3DjSwB02PSVhwuUkcUwZuxUbjIy6zu3ja0cXImPCm3jLK5H8B5KZtdMDjutWVxfBw8K/XUH5ytFofFv16yDrkCD4orUZYGcc95U1ATmQRGNphUTRwZz5OTJDV+lSiYukc9IFte8sanlCav8tKHFIwtsG2YbIAOE+8HsKwP+Xer3cpP6UrEg3wh4s9k+V1ydj4wkcfrBD6sv9RQbVXtpJEXQMOgEZ1ZmGssC46sd5oFRNssCmZI/5j+cFh0mQCYYY3KMK6REKmhkGVfrLgJ1hSK1kB9X0Q4T54zVUyyXdbxsWpYB/zwtUl33Szprw3BWv2K69ZGBWW8CDAD7MHTPqrySXgAAAABJRU5ErkJggg==',
symbolPosition: "end",//图形的定位位置，可取值‘start’：图形边缘与柱子开始的地方内切；‘end’：图形边缘与柱子结束的地方内切；‘center’：图形在柱子里居中
symbolSize: [30, 30],//图形的大小【宽，高】
symbolOffset: [10, 0],//图形对于原本位置的偏移，可以设置为绝对值，也可以设置为百分比
z: 20,//y轴组件的所有图形的z值，控制图形的前后顺序。z值小的图形会被z值大的图形覆盖
data: data,
},
],
};
myChart.setOption(option);
},
第四步：给盒子设置宽度和高度，如果不设置的话，图表是不会显示的
.bar{ width:33%; height: 300px; }
最后实现的效果为：
