vue+echarts 实现进度条式柱状图根据不同的数值展示不同的颜色并实现滚动

最新推荐文章于 2021-07-19 15:23:46 发布

不想996了的小姑娘

最新推荐文章于 2021-07-19 15:23:46 发布

阅读量1.9k

点赞数

分类专栏： vue-echarts 文章标签： vue html css 数据可视化

本文链接：https://blog.youkuaiyun.com/qq_32332433/article/details/112529628

版权

本文介绍了如何使用Vue和ECharts结合，实现一种进度条式的柱状图，根据数值变化展示不同颜色，并详细讲解了利用datazoom属性实现图表的自动向上滚动效果，参考了相关博客资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：

注意：实际数据要通过一些操作才能展示到最右边
详见代码

<template>
  <div style="width: 100%; height: 86%">
    <div class="legend-top">
      <div><span class="danger"></span>危险4家</div>
      <div><span class="pass"></span>及格3家</div>
      <div><span class="fine"></span>优秀3家</div>
    </div>
    <div
      :class="className"
      ref="chart"
      :style="{
        height: height,
        width: width,
        overflow: overflow,
        padding: padding,
      }"
    ></div>
  </div>
</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../mixins/resize";
import { getAlertMinuteChartInfo } from "@/api/dashboard/inspectplace/inspectChart";
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "85%",
    },
    overflow: {
      type: String,
      default: "hidden",
    },
    padding: {
      type: String,
      default: "0 5%",
    },
  },
  data() {
    return {
      chart: null,
      chartOption: null,
      data: [], // 真实数据
      dataAxis: [], // 坐标轴
      dataShadow: [], //阴影的值
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.data = [93, 90, 89, 83, 70, 65, 60, 46, 43, 26, 12];
      this.dataAxis = [
        "世纪公馆",
        "玫瑰兰亭",
        "海尔华府",
        "鼎盛世家",
        "水田花园",
        "丰裕水岸",
        "丰城安居",
        "锦绣家园",
        "绿水安居",
        "锦绣花园",
        "碧城河畔",
      ];
      this.patchValue();
      this.initChart();
      // this.refreshChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    patchValue() {
      // 为了实际值能显示在阴影的位置，需要把实际值赋值到阴影值上
      for (var i = 0; i < this.data.length; i++) {
        this.dataShadow.push({
          value: 100,
          name: this.data[i],
        });
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart, "macarons");
      this.chart.setOption({
        grid: {
          top: "3%",
          right: "10%",
          left: "18%",
          bottom: "3%",
        },
        xAxi