echarts柱状图

于 2023-12-01 12:02:09 发布
阅读量155 收藏
点赞数 6
分类专栏： vue echarts 前端 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42752532/article/details/134731501
版权
vue 同时被 3 个专栏收录
6 篇文章 0 订阅
订阅专栏
echarts
6 篇文章 0 订阅
订阅专栏
前端
6 篇文章 0 订阅
订阅专栏

在这里插入图片描述

    <el-row type="flex" align="middle" justify="space-around">
      <el-col :span="8" class="list_box">
        <div class="mf_box" :style="{ top: maxValue1 - 80 + 'px' }">满分40</div>
        <div class="canvas" ref="charts1"></div>
        <div class="fh_box">建筑防火</div>
      </el-col>
      <el-col :span="8" class="list_box">
        <div class="mf_box" :style="{ top: maxValue2 - 30 + 'px' }">
          满分30
        </div>
        <div class="canvas" ref="charts2"></div>
        <div class="fh_box">消防设施与器材</div>
      </el-col>
      <el-col :span="8" class="list_box">
        <div class="mf_box" :style="{ top: maxValue2 - 30 + 'px' }">
          满分30
        </div>
        <div class="canvas" ref="charts3"></div>
        <div class="fh_box">消防安全管理</div>
      </el-col>
    </el-row>

export default {
  name: "",
  data() {
    return {
      colorList1: [
        "rgba(0,191,255)",
        "rgba(0,161,212)",
        "rgba(0,161,212)",
        "rgba(0,88,187)",
        "rgba(11,52,125)"
      ],
      colorList2: [
        "rgba(197,134,0)",
        "#C58600",
        "rgba(212,144,0)",
        "rgba(218,179,0)",
        "rgba(11,52,125)"
      ],
      maxValue1: 80,
      maxValue2: 60,
      value1: 32,
      value2: 20,
      value3: 15
    };
  },
  created() {
    this.$nextTick(() => {
      this.initCharts(
        this.$refs["charts1"],
        this.colorList1,
        this.value1,
        this.maxValue1
      );
      this.initCharts(
        this.$refs["charts2"],
        this.colorList2,
        this.value2,
        this.maxValue2
      );
      this.initCharts(
        this.$refs["charts3"],
        this.colorList1,
        this.value3,
        this.maxValue2
      );
    });
  },
  methods: {
    initCharts(charts, colorList, value, maxValue) {
      let myChart = echarts.init(charts);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
      myChart.setOption({
        grid: {
          bottom: "10%",
          top: "10%",
          right: "0%",
          left: "0%"
        },

        xAxis: {
          data: [],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [50, 15],
            symbolOffset: [0, -7],
            z: 12,
            data: [
              {
                name: "",
                value: value * 2,

                symbolPosition: "end",
                itemStyle: {
                  normal: {
                    color: colorList[0] //内部圆柱 顶部颜色
                  }
                }
              }
            ]
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [50, 15],
            symbolOffset: [0, 6],
            z: 12,
            data: [
              {
                name: "",
                value: value,

                itemStyle: {
                  normal: {
                    color: colorList[1] //内部圆柱 底部颜色
                  }
                }
              }
            ]
          },
          {
            type: "bar",
            // silent: true,
            barWidth: 50,
            data: [
              {
                name: "",
                value: value * 2,
                label: {
                  normal: {
                    show: true,
                    formatter: function(value, index) {
                      return ((value.value / maxValue) * 100).toFixed(0) + "%";
                    },
                    position: ["102%", "-20%"],
                    distance: 10,
                    textStyle: {
                      color: "#2CFFDB", //百分比 文字颜色
                      fontSize: 12,
                      fontWeight: 600
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: "linear",
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: colorList[2]
                        },
                        {
                          offset: 1,
                          color: colorList[3] //内部圆柱 侧面 颜色
                        }
                      ]
                    }
                  }
                }
              }
            ]
          },
          //往上是内部柱状图
          //往下是外部柱状图
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [25, 10],
            symbolOffset: [0, -7],
            z: 12,
            data: [
              {
                name: "",
                value: maxValue - 1,
                symbolPosition: "end",
                itemStyle: {
                  normal: {
                    color: "rgba(0,191,255,0.2)",
                    borderColor: colorList[4], // 设置边框颜色
                    borderWidth: 1 // 设置边框宽度
                  }
                }
              }
            ]
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [50, 20],
            symbolOffset: [0, -10],
            z: 12,
            data: [
              {
                name: "",
                value: maxValue,

                symbolPosition: "end",
                itemStyle: {
                  normal: {
                    color: "rgba(0,191,255,0.2)" //圆柱顶部颜色 0.190.255
                  }
                }
              }
            ]
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [53, 18],
            symbolOffset: [0, 10],
            z: 12,
            data: [
              {
                name: "",
                value: maxValue,

                itemStyle: {
                  normal: {
                    color: colorList[1], // 虚线与内圆柱中间的 底颜色
                    borderColor: "rgba(0,88,187)", // 设置边框颜色
                    borderWidth: 1 // 设置边框宽度
                  }
                }
              }
            ]
          },
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [70, 30],
            symbolOffset: [0, 15],
            z: 10,
            data: [
              {
                name: "",
                value: "100",

                itemStyle: {
                  normal: {
                    color: "transparent",
                    borderColor: "rgb(5,142,188)", //底部虚线外圆圈颜色
                    borderType: "dashed",
                    borderWidth: 2
                  }
                }
              }
            ]
          },
          {
            type: "bar",
            silent: true,
            barWidth: 50,
            barGap: "-100%",
            data: [
              {
                name: "",
                value: maxValue,

                label: {
                  normal: {
                    show: false
                  }
                },
                itemStyle: {
                  normal: {
                    color: {
                      x: 1,
                      y: 1,
                      x2: 1,
                      y2: 0,
                      type: "linear",
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: "rgba(7,30,63, 0)"
                        },
                        {
                          offset: 0.3,
                          color: "rgba(2,40,118, 0.5)"
                        },
                        {
                          offset: 0.5,
                          color: "rgba(2,40,118, 0.5)"
                        },
                        {
                          offset: 0.8,
                          color: "rgba(2,40,118, 0.5)"
                        },
                        {
                          offset: 1,
                          color: "rgba(2,40,118, 1)" //外部圆柱 侧面颜色
                        }
                      ]
                    }
                  }
                }
              }
            ]
          },
          {
            //上部立体柱
            stack: "1",
            type: "bar",
            label: {
              show: true,
              position: "top",
              distance: maxValue,
              color: "#fff", // 顶部文字颜色
              fontSize: 16
            },
            silent: true,
            barWidth: 50,

            data: [
              {
                name: "",
                value: value,
                itemStyle: {
                  color: "rgba(255, 0, 0, 0)" //透明
                }
              }
            ],
            z: 12
          }
        ]
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.score_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: 24.2rem;
  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;
    }
  }
  .list_box {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    .mf_box {
      width: 52px;
      height: 18px;
      background: rgba(0, 88, 178, 0.28);
      border-radius: 2px;
      line-height: 18px;
      text-align: center;
      font-size: 12px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #15ffd5;
      margin-top: 26px;
      position: relative;
    }
    .fh_box {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      margin-top: 10px;
    }
    .canvas {
      width: 120px;
      height: 160px;
    }
  }
}
</style>
TtTw-230522
关注
  • 6
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 柱状图设置边框_echarts柱状图
weixin_39707941的博客
12-20 1万+
vue组件中使用//创建一个dom元素用来放echats图表script中的export default {mounted() {var chart = this.$echarts.init(document.getElementById("xline"));var Colors = ["#10B9E7","#F57474","#56D0E3","#F8B448","#F8B78F"]var op...
Echarts 柱状图使用
weixin_48164975的博客
04-12 1071
Echarts 柱状图使用 横向展示
Echarts柱状图
~~
03-16 2万+
图1： <template> <div id="chartBar" style="width: 700px; height: 300px"></div> </template> <script> import echarts from "echarts"; export default { data() { return { chartBar: null, category: [
Echarts 柱状图设置颜色
热门推荐
qq_45222558的博客
05-03 5万+
echarts柱状图设置不同的颜色
echarts 柱状图滚动
qq_41954585的博客
11-23 5906
zoomOnMouseWheel 关闭滚轮缩放, 关闭后滚轮滚到最后不会有回弹抖动。这里的startValue和endValue代表初始只显示七个，七组柱子。实现效果：柱形图展示水平滚动条，并且鼠标滚动支持让滚动条平移。minValueSpan代表放大到最少到显示几个。maxValueSpan代表缩小到最多显示几个。既要内置型的能在图中滚动，又要滚动条的样式。echarts文档里，图形的滚动条分两种。而我们要实现的就是综合了这两种。开启后滚轮往下滚数据往后移动。再添加到option里即可。
echarts 柱状图【立体】
weixin_43957384的博客
04-28 1万+
立体柱状 echarts 柱状图上面显示文字 series: [ { name: 'a', tooltip: { show: false, }, data: this.data, type: 'bar', barWidth: 16, // 柱条的宽度，不设时自适应。 barGap: 200, // 不同系列的柱间距离
echarts柱状图属性
m0_63223221的博客
10-25 844
柱状图的标题组件title、直角坐标系的X轴xAxis、提示框组件tooltip组件、柱状图series-bar的属性设置
echarts 柱状图-斜线
最新发布
leyu_miss的博客
04-20 1826
【代码】echarts 柱状图-斜线。
Echarts柱状图配置
熊米
09-25 1426
Echarts 柱状图配置
echarts柱状图滚动轮播显示
02-02
场景：echarts中的柱状图当在数据过多时会挤压柱子，所以想实现数据项过多时，进行数据项的轮播显示。 代码：初始显示n个，超出数据定时滑动实现柱子轮播
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
Echarts 柱状图自动刷新数据
11-01
Echarts 柱状图自动刷新数据,前台js的写法,不涉及到后台,下载打开即可查看效果
echarts 柱状图
01-02
echarts 实现简单柱状图绘制（示例代码为uap项目上实现，包括前台js相关代码、java代码、echarts.js ）
echarts柱状图统计表特效代码
03-20
echarts柱状图统计表代码是一款jQuery基于echarts图表插件制作多组品牌销售数据统计柱状图表代码。
springboot动态加载Echarts柱状图
08-25
主要为大家详细介绍了springboot动态加载Echarts柱状图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于vue的echarts柱状图封装
09-17
采用vue对echarts柱状图的封装，可简单方便地配置/设计图表
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值