vue利用echarts绘制项目进度条，实例详解

如图所示，想要实现清晰表达当前项目的进度，还要清晰的表达当前项目进度的4种状态：当前进度，是否落后，是否超前，正确进度。可以使用百度的免费插件echarts。官网地址：https://echarts.apache.org/zh/index.html

里面文档和api都很齐全，如果还是不太懂，可以去看看echarts社区的开发者开源的各种实例，非常齐全。地址：点击进入

百度echarts安装我这里就不赘述，有大量的资料可以查询。下面我们就开始开发我们的项目进度条。

一、封装一个进度条的echarts公共组件

<!--进度条-->
<template>
  <div class="c_chart" ref="progressChartRef"></div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    chartData: {
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  computed: {
    queryChartData() {
      return this.chartData || [];
    },
  },
  mounted() { 
    this.initChart();
  },
  methods: {
    initChart() {
      // 根据状态值 设置颜色
      let chartColor = {};
      if (this.chartData.jd === "进度落后") {
        chartColor = "#FF7A06"
      } else if (this.chartData.jd === "进度刚好") {
        chartColor = "#38C8B5"
      } else if (this.chartData.jd === "进度超前") {
        chartColor = "#2D6EFB"
      }
      // 基于准备好的dom，初始化echarts
      this.chart = echarts.init(this.$refs["progressChartRef"]);
      let option = {
        grid: {
          left: "0",
          right: "0",
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: [""], //数据点名称
          },
        ],
        legend: {
          orient: "vertical",
          x: "left",
          show: false,
        },
        series: [
          {
            name: "计划完成",
            type: "bar",
            silent: true, //取消点击高亮
            zlevel: 1,
            itemStyle: {
              normal: {
                color: "rgba(255,122,6,0.2)", 
              },
            },
            barWidth: 16,
            data: [this.chartData.fjhwc], //值
          },
          {
            name: "实际完成",
            type: "bar",
            silent: true, //取消点击高亮
            zlevel: 2,
            itemStyle: {
              normal: {
                color: chartColor
              },
            },
            barWidth: 16,
            data: [this.chartData.fsjwc], //值
          },
          {
            name: "总占比",
            type: "bar",
            silent: true, //取消点击高亮
            barWidth: 16,
            barGap: "-100%",
            data: [100],
            itemStyle: {
              normal: {
                color: "#1D2639", 
              },
            },
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.clear();
      this.chart.dispose();
    }
  },
};
</script>
<style lang="scss" scoped>
</style>

二、再父组件调用这个echarts子组件

这个时候是没有当前正确进度的白色竖线的，如果想要实现在当前进度这个百分百有个小竖线，如图所示。

我们可以在同级写一个div，然后，设置一个相对定位，距离左侧的距离就是他的百分比

如此，便能清晰的展示这个当前项目进度的4种状态。