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

已于 2023-04-13 16:10:15 修改
阅读量668 收藏
点赞数
分类专栏： 项目 文章标签： 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>
@是静静啊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变数值文本，涉及点击事件，功能齐全的易于使用；
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可看到效果； 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
echarts实现正负轴柱状图
蜗牛~~
07-31 1901
【代码】echarts实现正负轴柱状图。
34Echarts - 柱状图（正负条形图）
阿甘兄
04-30 7372
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
echarts正负极柱状图
花椒和蕊的博客
09-18 3304
<template> <div> <div class="headText">投资计划预警</div> <div class="bodyblock"> <div class="main2"> <div class="fxplain2" ref="fxplain_ref2" :style="{ height: zoomNum * 305 +.
【echarts】柱状图正负值双色
wan小小冰的博客
01-25 2582
具体方法如下示例： series: [ { name: 'Evaporation', type: 'bar', itemStyle:{ normal: { color: function (params) { //根据数值大小设置相关颜色 if (params.value > 0) { return 'green'
使用echarts实现动态的正负轴堆叠柱状图
yookooi
06-16 1265
ECharts是一个基于JavaScript的开源可视化库，它可以帮助用户创建各种类型的图表，例如线图、饼图、散点图和柱状图等等。ECharts提供了非常方便的API，可以帮助你轻松自定义你的图表，并且可以使用JSON格式的数据进行配置。
echarts漂亮的柱状图按月统计
07-20
基于echarts实现的漂亮的柱状图按月统计，彩色样式。
Echarts折线图中数据根据正负数显示不同区域背景色-配置
最新发布
JackieDYH的博客
01-15 882
Echarts折线图中数据根据正负数显示不同区域背景色。
echarts 散点图实现正负值颜色不同，方向不同
huhuhuja
01-11 814
效果如图： 核心代码： const { RtimeList, RList, sList, $utils } = this; series: [ { type: "scatter", data: RList.map((item) => { return { value: item, symbol: "triangle", .
设置echarts中折线图中数据根据正负数显示不同区域背景色
Tmengxing的博客
01-11 1949
代码: option = { backgroundColor: "#030A41", xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisTick: { show: false, }, axisLabel: { //设置x轴坐标配置 margin: 10, color: '#f
解决Echarts柱形图正负数在同一侧，并设置正负值不同颜色
qq_39629229的博客
09-15 3180
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图表给柱形图的每个柱子设置不同颜色（包括每个柱子设置渐变颜色）
热门推荐
zuo_kaizheng的博客
03-31 1万+
配置效果 配置每个柱子不同颜色的代码 itemStyle: { normal: { // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，分别表示右,下,左,上。例如（0，0，0，1）表示从正上开始向下渐变；如果是（1，0，0，0），则是从正右开始向左渐变。 // 相当于在图形包围盒中的百分比，如果最后一个参数传 true，则该四个值是绝对的像素位置 color: new echarts.graphic.LinearG
ECharts实现柱状图正负数显示在同一侧
huangfuyk.的博客
04-10 5886
想必大家工作中也有用到过ECharts，但是大部分的需求应该都是相对简单的展示，比如说使用柱状图时，当数值为正与负值时显示在两侧，如下这样（一左一右或一上一下）： 那么如果我想让他们无论正负均显示在同一侧呢？ 1、可参考如下简单示例： var data1 = [100, 200, 300, 400, 500, 600, 650]; // 真实值，用来控制柱状图的高低 var data2 = [-100, 200, -300, 400, -500, 600, -650]; // 显示值，用来显示在柱.
echarts 柱状图正负数颜色
qq_41954585的博客
11-22 584
【代码】echarts 柱状图正负数颜色。
echarts地图map设置visualMap按照不同数值显示区域颜色，（自定义数值区间/自动取色）
Xiang_Gong_Ya_的博客
12-19 1671
【代码】echarts地图map设置visualMap按照不同数值显示区域颜色，（自定义数值区间/自动取色）
echarts立体柱状图
07-27
总结起来，要实现ECharts的立体柱状图，需要创建自定义形状并注册，然后使用series属性组合不同类型的图表来呈现立体效果。具体的代码和实现细节可以参考引用\[2\]和引用\[3\]中的内容。 #### 引用[.reference_title...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值