echarts横条条

TtTw-230522

已于 2023-12-01 12:00:04 修改

阅读量80

点赞数

分类专栏： vue echarts 前端文章标签： echarts javascript ecmascript

于 2023-12-01 11:59:49 首次发布

本文链接：https://blog.csdn.net/weixin_42752532/article/details/134731474

版权

vue 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

echarts

6 篇文章 0 订阅

订阅专栏

前端

6 篇文章 0 订阅

订阅专栏

在这里插入图片描述

    <div class="canvas" ref="charts"></div>

export default {
  name: "",
  created() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      const datas = [
        { name: "极低风险", percent: "32", finished: "5" },
        { name: "低风险", percent: "26", finished: "15" },
        { name: "中风险", percent: "40", finished: "25" },
        { name: "高风险", percent: "30", finished: "10" },
        { name: "极高风险", percent: "20", finished: "12" },
      ];
      const yData = datas.map(item => item.name);
      const zData = datas.map(item => item.finished);
      const pData = datas.map(item => item.percent);
      // 设置等长的背景柱状图
      const maxData = new Array(yData.length).fill(100);
      let myChart = echarts.init(this.$refs.charts);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
      myChart.setOption({
        grid: {
          left: "22%",
          right: "8%",
          bottom: "0%",
          top: "5%",
          containLabel: false
        },
        xAxis: [
          {
            show: true
          },
          {
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            show: true,
            data: yData,
            position: "left",
            axisLabel: {
              lineHeight: 0,
              verticalAlign: "bottom",
              fontSize: 14,
              color: "#fff",
              formatter: "{value}"
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            show: true,
            data: zData,
            offset: 5,
            position: "right",
            axisLabel: {
              lineHeight: 0,
              verticalAlign: "bottom",
              fontSize: 14,
              color: "#0AF7B0",
              formatter: "{value}"
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            name: "进度",
            show: true,
            type: "bar",
            barGap: "-100%",
            xAxisIndex: 1,
            barWidth: 15,
            itemStyle: {
              borderRadius: 10,
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: "#009EEC" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0EFFEB" // 0% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            },
            label: {
              show: false,
              position: "insideRight",
              formatter: "{c}%",
              offset: [-10, 2],
              color: "#fff"
            },
            labelLine: {
              show: false
            },
            z: 2,
            data: pData,
            animationDelay: 1000,
            animationDuration: 1000
          },
          {
            name: "百分比",
            z: 1,
            show: true,
            type: "bar",
            xAxisIndex: 1,
            barGap: "-100%",
            barWidth: 15,
            itemStyle: {
              borderRadius: 10,
              color: "#074785"
            },
            label: {
              show: false
            },
            data: maxData
          }
        ]
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.city_box {
  background: url(/img/kanban/aqyh/border_bg1.png) no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  height: 32.75%;
  width: 23.45%;
  top: 4.7rem;
  left: 1.5rem;
  z-index: 100;
  .title {
    height: 3rem;
    padding-left: 1.18rem;
    font-size: 18px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    padding-top: 1.37rem;
    img {
      margin-right: 0.56rem;
    }
  }
  .canvas {
    width: 400px;
    height: 228px;
  }
}
</style>