echarts立体柱状图，正负极不同颜色的设置

已于 2023-04-13 16:10:15 修改
阅读量899 收藏 2
点赞数
分类专栏： 项目 文章标签： echarts javascript vue
于 2023-04-13 15:54:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45272038/article/details/130132549
版权

文章目录

效果图

在这里插入图片描述

代码

<template>
    <div
      ref="bar_3d"
      class="echarts"
      :id="indData_id"
      style="width: 50%; height: 22rem"
    ></div>
  </template>
  
  <script>
  import * as echarts from "echarts";
//   import { handleQfNumberStr } from "@/utils/QfNumberStr";
  
  export default {
    data() {
      return {
        axis: [],
        value: [],
        observer: null,
      };
    },
    props: {
      //表格数据
      incAxis: {
        type: Array,
        default: () => [
          [
            "202201",
            "202202",
            "202203",
            "202204",
            "202205",
            "202206",
            "202207",
            "202208",
            "202209",
            "202210",
            "202211",
            "202212",
          ],
          [-60, 82, -10, 16, 24, 28, 51, 55.8, -80, 10, 14, 0],
        ],
      },
      //表格id
      indData_id: {
        type: String,
        default: "echarts3D",
      },
      //表格标题
      title: {
        type: String,
        default: "标题",
      },
      //单位
      indicatorUnit: {
        type: String,
        default: "元",
      },
      //横坐标是否倾斜
      isrotate: {
        type: Boolean,
        default: false,
      },
    },
    watch: {
      incAxis: {
        handler(newVal) {
          this.init(newVal);
        },
        immediate: true, // 首次加载时执行监听
        deep: true, // 值改变时执行监听
      },
    },
    mounted() {
      this.init(this.incAxis);
    },
    methods: {
      init(newVal) {
        if (newVal.length === 2) {
          this.axis = newVal[0];
          this.value = newVal[1];
          this.initEchart(this.axis, this.value);
        } else {
          this.initEchart(newVal, "");
        }
      },
      //立体柱状图
      getEcharts3DBar(xAxisData, data, _this) {
        var colorArr = [];
        var colorArrdown = [];
        var shadowArr = [];
        var shadowArrdown = [];
        let backArr = [];
        let floatArr = [];
        let floatArrdown = [];
        // 遍历data找到最大值赋予特殊符号
        // debugger
        let yMax = 100;
        var maxVal = Math.max.apply(
          Math,
          data.map((e) => {
            return Math.abs(e);
          })
        );
        if (maxVal < 1) {
          // 最大值小于1 设置阴影1
          yMax = 1;
        } else if (maxVal < 10) {
          // 最大值小于10 设置阴影10
          yMax = 10;
        } else if (maxVal < 50) {
          // 最大值小于50 设置阴影50
          yMax = 50;
        } else if (maxVal < 100) {
          // 最大值小于100 设置阴影100
          yMax = 100;
        } else {
          // 最大值大于100 按前两位数+1取整计算阴影
          let maxvalue = Number(`${Math.ceil(maxVal)}`.slice(0, 2)) + 1;
          let i = `${Math.ceil(maxVal)}`.length - 2;
          for (let e = 0; e < i; e++) {
            maxvalue = maxvalue * 10;
          }
          yMax = maxvalue;
        }
        for (let i = 0; i < data.length; i++) {
          let ymax = yMax;
          if (data[i] >= 0) {
            ymax = yMax;
          } else {
            ymax = -yMax;
          }
          backArr.push(ymax);
        }
        // 立体柱状图三面颜色
        colorArr = [
          "rgba(80, 129, 241, 1)",
          "rgba(61, 123, 231, 1)",
          "rgba(108, 158, 255, 1)",
        ];
        colorArrdown = [
          "RGBA(78, 205, 228, 1)",
          "RGBA(90, 214, 236, 1)",
          "RGBA(124, 223, 240, 1)",
        ];
        shadowArr = [
          "rgba(212, 225, 255, 0.70)",
          "rgba(211, 223, 253, 0.50)",
          "rgba(200, 216, 249, 1)",
        ];
        shadowArrdown = [
          "RGBA(216, 240, 251, 1)",
          "RGBA(230, 244, 253, 1)",
          "RGBA(212, 238, 248, 1)",
        ];
        floatArr = [
          "rgba(86, 145, 255, 1)",
          "rgba(134, 171, 255, 1)",
          "rgba(110, 163, 255, 1)",
          "rgba(161, 189, 255, 1)",
        ];
        floatArrdown = [
          "RGBA(78, 205, 228, .8)",
          "RGBA(90, 214, 236, .6)",
          "RGBA(124, 223, 240, .8)",
          "RGBA(78, 205, 228, .5)",
        ];
        var color = {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: colorArr[0],
            },
            {
              offset: 0.5,
              color: colorArr[0],
            },
            {
              offset: 0.5,
              color: colorArr[1],
            },
            {
              offset: 1,
              color: colorArr[1],
            },
          ],
        };
        var colorDown = {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: colorArrdown[0],
            },
            {
              offset: 0.5,
              color: colorArrdown[0],
            },
            {
              offset: 0.5,
              color: colorArrdown[1],
            },
            {
              offset: 1,
              color: colorArrdown[1],
            },
          ],
        };
        var shadow = {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: shadowArr[0] },
            { offset: 0.5, color: shadowArr[0] },
            { offset: 0.5, color: shadowArr[1] },
            { offset: 1, color: shadowArr[1] },
          ],
        };
        var shadowDown = {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: shadowArrdown[0] },
            { offset: 0.5, color: shadowArrdown[0] },
            { offset: 0.5, color: shadowArrdown[1] },
            { offset: 1, color: shadowArrdown[1] },
          ],
        };
        // 悬浮高亮颜色
        var float = {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: floatArr[1] },
            { offset: 0.5, color: floatArr[1] },
            { offset: 0.5, color: floatArr[3] },
            { offset: 1, color: floatArr[3] },
          ],
        };
        // 悬浮高亮颜色
        var floatDown = {
          type: "linear",
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            { offset: 0, color: floatArrdown[1] },
            { offset: 0.5, color: floatArrdown[1] },
            { offset: 0.5, color: floatArrdown[3] },
            { offset: 1, color: floatArrdown[3] },
          ],
        };
        // 不同类目的柱间距
        var barWidth = 29;
        var constData = [];
        var showData = [];
        data?.filter(function (item) {
          if (item != null) {
            constData.push(item);
            showData.push(item);
          } else {
            constData.push(0);
            showData.push({
              value: 1,
              itemStyle: {
                normal: {
                  borderColor: "rgba(0,0,0,0)",
                  borderWidth: 2,
                  color: "rgba(0,0,0,0)",
                },
              },
            });
          }
        });
        function showGrid() {
          let object = {
            left: "2%", //图表距边框的距离
            right: "2%",
            top: "10%",
            bottom: _this.isrotate ? "15px" : "40px",
            containLabel: true,
          };
          return object;
        }
        function showLegend() {
          let object = {
            selectedMode: false,
            bottom: "0",
            data: [_this.title],
            // color: "#5081F1",
            itemWidth: 10,
            itemHeight: 10,
            itemStyle: {
              color: "#4C7CEE",
            },
          };
          return object;
        }
        return {
          tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0,0,0,0.55)",
            boxShadow: "3px 3px 9px 0px rgba(106,106,106,0.3)",
            backdropFilter: "blur(4px)",
            borderWidth: 0,
            className: "tooltips-box",
            textStyle: {
              fontSize: "12",
              color: "#ffffff",
            },
            axisPointer: {
              type: "shadow",
              shadowStyle: {
                opacity: 0,
              },
            },
            // 鼠标悬浮显示的数据样式
            formatter: function (params) {
              var str = params[1].axisValue;
              // params.filter(function (item) {
              //   if (item.componentSubType == "bar") {
              if (_this.indicatorUnit === "户") {
                str +=
                  "<br/>" +
                  params[1].seriesName +
                  "  " +
                  `${
                    params[1].value != null
                      ? params[1].value
                      : "--"
                  }` +
                  _this.indicatorUnit;
              } else {
                str +=
                  "<br/>" +
                  params[1].seriesName +
                  "  " +
                  `${
                    params[1].value != null
                      ? params[1].value
                      : "--"
                  }` +
                  _this.indicatorUnit;
              }
              //   }
              // });
              return str;
            },
            textStyle: {
              color: "#fff",
              fontStyle: "normal",
              fontWeight: "normal",
              fontFamily: "sans-serif",
              fontSize: 14,
            },
          },
          legend: showLegend(),
          grid: showGrid(),
          // x轴的坐标
          xAxis: {
            axisLine: {
              show: false, //不显示坐标轴轴线
            },
            axisTick: {
              show: false, //不显示坐标轴刻度
            },
            data: xAxisData,
            axisLabel: {
              show: true,
              interval: 0,
              color: "#232323",
              margin: _this.isrotate ? 30 : 25,
              rotate: _this.isrotate ? 30 : 0, //横坐标是否倾斜
              align: "center",
            },
            type: "category",
          },
          yAxis: {
            max: yMax,
            interval: yMax / 5,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
            },
          },
          series: [
            //   背景阴影
            {
              z: 1,
              name: _this.title,
              type: "bar",
              barWidth: barWidth,
              data: backArr.map((item) => {
                return {
                  value: item,
                  emphasis: {
                    itemStyle: {
                      color: item < 0 ? shadowDown : shadow,
                    },
                  },
                };
              }),
              itemStyle: {
                normal: {
                  color: (val) => {
                    var color_index = val.value;
                    return color_index < 0 ? shadowDown : shadow;
                  },
                },
              },
              emphasis: {
                itemStyle: {
                  // normal: {
                  // color: (val)=>{
                  //   console.log(val);
                  //   var color_index=val.value;
                  //   return color_index<0?shadowDown: shadow;
                  // },
                  color: shadow,
                  // },
                },
              },
            },
            // {
            //   z: 2,
            //   name: _this.title,
            //   type: "pictorialBar",
            //   data: backArr,
            //   symbol: "diamond",
            //   symbolOffset: ["0%", "50%"],
            //   symbolSize: [barWidth, barWidth * 0.5],
            //   itemStyle: {
            //     normal: {
            //       color: (val)=>{
            //         var color_index=val.value;
            //         return color_index<0?shadowDown: shadow;
            //       },
            //     },
            //   },
            //   emphasis: {
            //     itemStyle: {
            //       color: (val)=>{
            //         var color_index=val.value;
            //         return color_index<0?shadowDown: shadow;
            //       },
            //     },
            //   },
            //   tooltip: {
            //     show: false,
            //   },
            //   barCategoryGap: "40",
            // },
            {
              z: 3,
              name: _this.title,
              type: "pictorialBar",
              symbolPosition: "end",
              data: backArr.map((item) => {
                return {
                  value: item,
                  symbolOffset: item < 0 ? [0, "50%"] : [0, "-50%"],
                  emphasis: {
                    itemStyle: {
                      color: item < 0 ? shadowDown : shadow,
                    },
                  },
                };
              }),
              symbol: "diamond",
              symbolOffset: [0, "-50%"],
              symbolSize: [barWidth, barWidth * 0.5],
              itemStyle: {
                normal: {
                  color: (val) => {
                    var color_index = val.value;
                    return color_index < 0 ? shadowArrdown[2] : shadowArr[2];
                  },
                },
              },
              // emphasis: {
              //   itemStyle: {
              //     color: (val) => {
              //       var color_index = val.value;
              //       return color_index < 0 ? shadowDown : shadow;
              //     },
              //   },
              // },
              tooltip: {
                show: false,
              },
              barCategoryGap: "40",
            },
            // 三面数据
            {
              z: 1,
              name: _this.title,
              type: "bar",
              barWidth: barWidth,
              barGap: "-100%",
              data: data.map((item) => {
                return {
                  value: item,
                  emphasis: {
                    itemStyle: {
                      color: item < 0 ? floatDown : float,
                    },
                  },
                };
              }),
              itemStyle: {
                normal: {
                  color: (val) => {
                    var color_index = val.value;
                    return color_index < 0 ? colorDown : color;
                  },
                },
              },
              // emphasis: {
              //   itemStyle: {
              //     color: float,
              //   },
              // },
            },
            {
              z: 2,
              name: _this.title,
              type: "pictorialBar",
              data: constData.map((item) => {
                return {
                  value: item,
                  symbolOffset: item < 0 ? [0, "-50%"] : [0, "50%"],
                  emphasis: {
                    itemStyle: {
                      color: item < 0 ? floatDown : float,
                    },
                  },
                };
              }),
              symbol: "diamond",
              symbolOffset: ["0%", "50%"],
              symbolSize: [barWidth, barWidth * 0.5],
              itemStyle: {
                normal: {
                  color: (val) => {
                    var color_index = val.value;
                    return color_index < 0 ? colorDown : color;
                  },
                },
              },
              // emphasis: {
              //   itemStyle: {
              //     color: float,
              //   },
              // },
              // tooltip: {
              //   show: false,
              // },
  
              barCategoryGap: "40",
            },
            {
              z: 3,
              name: _this.title,
              type: "pictorialBar",
              symbolPosition: "end",
              data: showData.map((item) => {
                return {
                  value: item,
                  symbolOffset: item < 0 ? [0, "50%"] : [0, "-50%"],
                  emphasis: {
                    itemStyle: {
                      color: item < 0 ?  floatArrdown[2] : floatArr[2],
                    },
                  },
                };
              }),
              symbol: "diamond",
              symbolOffset: ["0%", "-50%"],
              symbolSize: [barWidth, barWidth * 0.5],
              itemStyle: {
                normal: {
                  color: (val) => {
                    var color_index = val.value;
                    return color_index < 0 ? colorArrdown[2] : colorArr[2];
                  },
                },
              },
              barCategoryGap: "40",
            },
          ],
        };
      },
      initEchart(axis, value) {
        let _this = this;
        this.$nextTick(() => {
          let serveTBar = echarts.init(
            document.getElementById(this.indData_id),
            null,
            { devicePixelRatio: 2.5 }
          );
          //   serveTBar.setOption(this.getEcharts3DBar(axis, value, _this));
          // window.addEventListener("resize", function () {
          //   serveTBar.resize();
          // });
          serveTBar.setOption(this.getEcharts3DBar(axis, value, _this));
  
          this.observer = new ResizeObserver((entries) => {
            serveTBar.resize();
          });
          this.observer.observe(document.getElementById(this.indData_id));
        });
      },
    },
    destroyed() {
      this.observer.disconnect();
    },
  };
  </script>
@是静静啊
关注
专栏目录
echart多个柱状图 设置y轴显示_echarts用两个y轴显示两组有正负数的数据
weixin_34092535的博客
01-17 4142
这个标题有点长，咱们看图就好理解了：这个图表用两个系列，表示了某个服装店里所有衣服的销售量和盈利额。从这个图表里，我们可以一目了然的看出，衬衫和裤子买赔了，因为它们的盈利额为负数。理解了我要表达的意思，咱们接下来就说一下绘制图表核心思路。绘制图表核心思路核心思想：通过极值和行高控制y 轴的刻度核心代码：yAxis: [{type: 'value',scale: true,name: '销售量',m...
Echarts立体柱状图
Summer_JK的博客
11-07 1万+
echarts绘制漂亮的立体柱状图（超详细） 为了做一个漂亮的立体柱状图，几乎吧echarts所有的柱状图都看了一遍，一遍遍的改，终于绘制出我想要的效果，下面是代码： HTML： <div class="content bgBox"> <div class="firstTitle"> <p class="titleName">购买力最强</p> </div> <div id="buyTop" style="width: 100%;h
【echarts】柱状图正负值双色
wan小小冰的博客
01-25 2820
具体方法如下示例： series: [ { name: 'Evaporation', type: 'bar', itemStyle:{ normal: { color: function (params) { //根据数值大小设置相关颜色 if (params.value > 0) { return 'green'
vue echarts 柱状图 堆叠柱状图
最新发布
Z18834071903的博客
04-26 609
vue echarts 柱状图 堆叠柱状图
解决Echarts柱形图正负数在同一侧，并设置正负值不同颜色
qq_39629229的博客
09-15 3423
let data = [100,20,-40,50,-10] //真实数值 let data1 = [] data.map(item=>{ //把负值都变成整数，放在新的数组里，用来展示柱形高度 let newdata=0 if(item < 0){ newdata = -item }else{ newdata = item } data1.push(newdata) }) // 基于准备好的dom，初始化echarts实.
Echarts折线图中数据根据正负数显示不同区域背景色-配置
JackieDYH的博客
01-15 1301
Echarts折线图中数据根据正负数显示不同区域背景色。
知识点小记：echarts折线图负数展示不一样的颜色
走在路上的张先森
08-15 2148
其实也很简单，就是在设置线条颜色的时候，根据你自己的需要通过方法来配置你自己的颜色，而这个回调里面会有当前echart对象对应的相关内容。所以我们判断值的大小就可以通过params.value来确定。...
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10...
3D柱状图 给每根柱子设置不同的颜色.zip
12-21
本教程将详细讲解如何在ECharts中创建3D柱状图，并为每根柱子设置不同的颜色，以增强数据的表现力和视觉吸引力。 首先，我们需要了解ECharts的基本用法。ECharts是一个基于HTML5 Canvas的开源图表库，它支持多种...
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变...
echarts正负极柱状图
花椒和蕊的博客
09-18 3419
<template> <div> <div class="headText">投资计划预警</div> <div class="bodyblock"> <div class="main2"> <div class="fxplain2" ref="fxplain_ref2" :style="{ height: zoomNum * 305 +.
echarts实现正负轴柱状图
蜗牛~~
07-31 2701
【代码】echarts实现正负轴柱状图。
echarts折线图柱状图的坐标轴的颜色及样式的设置
fengsuiyingdong的专栏
07-14 3万+
转载网址见： http://www.cnblogs.com/my-freedom/p/6699271.html 基本用法请查看echarts官网。 一、图例legend的设置。 1.字体和颜色的设置 1 2 3 4 textStyle:{                 fontSi
echarts地图map设置visualMap按照不同数值显示区域颜色，（自定义数值区间/自动取色）
Xiang_Gong_Ya_的博客
12-19 3167
【代码】echarts地图map设置visualMap按照不同数值显示区域颜色，（自定义数值区间/自动取色）
Echarts正负轴-柱形条形图
热门推荐
shzhanghuan的博客
09-16 3万+
Echarts正负轴-柱形 option = { title: { text: “生产监控系统”, subtext: “实时产能监控”, left: “center” }, tooltip : { trigger: ‘axis’, axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : ‘shadow’ // 默认为直线，可选为：‘li...
34Echarts - 柱状图（正负条形图）
阿甘兄
04-30 7499
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
使用echarts实现动态的正负轴堆叠柱状图
yookooi
06-16 1572
ECharts是一个基于JavaScript的开源可视化库，它可以帮助用户创建各种类型的图表，例如线图、饼图、散点图和柱状图等等。ECharts提供了非常方便的API，可以帮助你轻松自定义你的图表，并且可以使用JSON格式的数据进行配置。
echarts正负柱形图设置x轴和tooltip显示值都为正数，自定义颜色显示，设置y轴显示单位
qq_52685664的博客
12-13 3798
option = { color:['#189dfe','#f0c219'], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, formatter: function (params) { const Total = Math.abs(params[0].value) +Math.abs(params[1].value) ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值