vscode中使用echarts（横向柱形图）

第一步：安装echarts，再引入echarts

执行npm install echarts

在main.js中引入后，在对应使用图标的vue文件中也引入echarts

//main.js

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

//vue文件中

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，则asis.data的内容会自动从series.data中获取，这会比较方便，不过注意axis.data指明的是'category'轴的取值范围。如果不指定而是从series.data中获取，那么只能获取到series.data中出现的值。比如说，假如series.data为空时，就什么也获取不到。
            data: className,
　　　　　　},
　　　　　　{
　　　　　　　type: 'category',
　　　　　　　inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: "12",
              },
　　　　　　　　　//刻度标签的内容格式器，支持字符串模板和回调函数两种形式，使用字符串模板formatter: '{value} kg',使用函数模板，参数为刻度数值与索引，formatter(value,index){ return value + 'kg'}
              formatter: function (value,index) {
                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为图片的链接，或者dataURL
            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);
    },

第四步：mounted中调用函数，并且给盒子设置宽度和高度，如果不设置的话，图表是不会显示的

mounted() {
    this.drawBar();
  },

 

.bar{
  width:33%;
  height: 300px;
}

最后实现的效果为：