echarts3D柱状图多个和一个

最新推荐文章于 2024-09-06 14:39:17 发布
最新推荐文章于 2024-09-06 14:39:17 发布
阅读量342 收藏 2
点赞数 1
分类专栏： 笔记 文章标签： echarts 3d javascript
原文链接：https://blog.csdn.net/qq_28378665/article/details/124822669
版权

在这里插入图片描述

<template>
  <a-card title="月度故障业务平均恢复时长" iconname="el-icon-data-analysis">
    <div class="chart-container">
      <a-row :gutter="16">
        <a-col :span="12"><div ref="chart" class="chart" style="height: 600px; width: 600px" /></a-col>
        <a-col :span="12"><div ref="charttwo" style="height: 600px; width: 600px"></div></a-col>
      </a-row>
      
      
    </div>
  </a-card>
</template>

<script>
import echarts from 'echarts';
export default {
  data() {
    return {
      statusChart: null
    };
  },
  mounted() {
    this.initChart();
    this.initChartTwo();
    // 根据窗口变化自动调节图表大小
    // window.addEventListener('resize', this.changeSize)
  },
  beforeDestroy() {
    // console.log('销毁')
    // this.statusChart && this.statusChart.dispose()
    // window.removeEventListener('resize', this.changeSize)
  },
  methods: {
    // 自适应宽高
    // changeSize() {
    //     this.statusChart.resize()
    // },
    initChart() {
      //调用：
      var changeBar = echarts.init(this.$refs.chart);
      let option = this.getSolidOption([0, 0, 260, 30, 30, 30], [0, 182, 191, 30, 0, 30], [0, 182, 191, 0, 40, 40]);
      console.log(option);
      changeBar.setOption(option);
    },
    initChartTwo() {
      this.statusChart = echarts.init(this.$refs.charttwo);
      var colorArr = ['#0C628C', '#3887D5', '#2570BB'];
      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 barWidth = 30;
      const xAxisData = ['区域1', '区域2', '区域3', '区域4', '区域5', '区域6', '区域7', '区域8', '区域9'];
      var data1 = [6, 7, 3, 11, 33, 38, 22, 55, 66];
      var bottomData = [1, 1, 1, 1, 1, 1, 1, 1, 1];
      var topData = [100, 100, 100, 100, 100, 100, 100, 100, 100];
      // 指定图表的配置项和数据
      const option = {
        backgroundColor: '#242640',
        // backgroundColor: 'rgba(0,0,0,0)',
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var str = params[0].name + ':';
            params.filter(function (item) {
              if (item.componentSubType == 'bar') {
                str += '<br/>' + item.seriesName + '：' + item.value;
              }
            });
            return str;
          }
        },
        grid: {
          x: '7%',
          x2: '0%',
          y: '15%',
          y2: '15%'
        },
        xAxis: {
          type: 'category',
          data: xAxisData,

          // 更改坐标轴颜色
          axisLine: {
            lineStyle: {
              color: '#455B77'
            },
            onZero: false
          },
          // x轴的字体样式
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#c0e6f9', // 更改坐标轴文字颜色
              fontSize: 14, // 更改坐标轴文字大小
              fontFamily: 'MicrosoftYaHei'
            },
            // X轴lable的处理函数，如果x轴的lable有空格，比如:['AM点检 异常', 'PM巡检 异常', 'PM保养 异常'],这里会以空格为分割，显示两行
            formatter: function (params) {
              return params.split(' ').join('\n');
              //                console.log(' formatter',params);
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: this.fontColorY, // 更改坐标轴文字颜色
              fontSize: 12, // 更改坐标轴文字大小
              fontFamily: 'MicrosoftYaHei'
            }
          },
          // 更改坐标轴颜色
          axisLine: {
            lineStyle: {
              color: '#657CA8'
            }
          },
          // 网格线
          splitLine: {
            // 网格线
            lineStyle: {
              type: 'solid',
              with: 0.5,
              color: this.borderColor
            }
          }
        },
        series: [
          // 数据低下的圆片
          {
            name: '',
            type: 'pictorialBar',
            symbolOffset: ['0%', '50%'],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            z: 12,
            symbol: 'diamond',
            itemStyle: {
              opacity: 1,
              color: color
              // color: 'transparent'
            },
            data: bottomData
          },
          // 数据的柱状图
          {
            name: '',
            type: 'bar',
            barWidth: barWidth,
            itemStyle: {
              // lenged文本
              opacity: 1, // 这个是 透明度
              color: color
            },

            data: data1
          },
          // 数据顶部的样式
          {
            name: '',
            type: 'pictorialBar',
            symbol: 'diamond',
            symbolOffset: ['0%', '-50%'],
            symbolSize: [barWidth, 10],
            z: 12,
            itemStyle: {
              normal: {
                opacity: 1,
                color: colorArr[2],
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: {
                    // 数值样式
                    color: '#FFFFFF',
                    fontSize: 12,
                    top: 50
                  }
                }
              }
            },
            symbolPosition: 'end',
            data: data1
          }
        ]
      };
      this.statusChart.setOption(option);
    },
    // 立体多柱状图
    getSolidOption(data1, data2, data3) {
      // 月份坐标轴
      var nowMonth = new Date().getMonth() + 1;
      var lineXAxisData = [];
      for (var i = 5; i >= 0; i--) {
        var month = nowMonth - i;
        if (month < 1) {
          lineXAxisData.push(month + 12 + '月');
        } else {
          lineXAxisData.push(month + '月');
        }
      }
      var colors = [
        {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#27afc7'
            },
            {
              offset: 0.5,
              color: '#27afc7'
            },
            {
              offset: 0.5,
              color: '#50d9cf'
            },
            {
              offset: 1,
              color: '#50d9cf'
            }
          ]
        },
        {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#41affa'
            },
            {
              offset: 0.5,
              color: '#41affa'
            },
            {
              offset: 0.5,
              color: '#80d2fa'
            },
            {
              offset: 1,
              color: '#80d2fa'
            }
          ]
        },
        {
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#a6a0fa'
            },
            {
              offset: 0.5,
              color: '#a6a0fa'
            },
            {
              offset: 0.5,
              color: '#bbbbf9'
            },
            {
              offset: 1,
              color: '#bbbbf9'
            }
          ]
        }
      ];
      var barWidth = 15;
      var constData1 = [];
      var showData1 = [];
      data1.filter(function (item) {
        if (item) {
          constData1.push(1);
          showData1.push(item);
        } else {
          constData1.push(0);
          showData1.push({
            value: 1,
            itemStyle: {
              normal: {
                borderColor: 'rgba(0,0,0,0)',
                borderWidth: 2,
                color: 'rgba(0,0,0,0)'
              }
            }
          });
        }
      });
      var constData2 = [];
      var showData2 = [];
      data2.filter(function (item) {
        if (item) {
          constData2.push(1);
          showData2.push(item);
        } else {
          constData2.push(0);
          showData2.push({
            value: 1,
            itemStyle: {
              normal: {
                borderColor: 'rgba(0,0,0,0)',
                borderWidth: 2,
                color: 'rgba(0,0,0,0)'
              }
            }
          });
        }
      });
      var constData3 = [];
      var showData3 = [];
      data3.filter(function (item) {
        if (item) {
          constData3.push(1);
          showData3.push(item);
        } else {
          constData3.push(0);
          showData3.push({
            value: 1,
            itemStyle: {
              normal: {
                borderColor: 'rgba(0,0,0,0)',
                borderWidth: 2,
                color: 'rgba(0,0,0,0)'
              }
            }
          });
        }
      });
      return {
        backgroundColor: '#242640',
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            var str = params[0].axisValue + '：';
            params.filter(function (item) {
              if (item.componentSubType == 'bar') {
                str += '<br/>' + item.seriesName + '：' + item.value;
              }
            });
            return str;
          }
        },
        legend: {
          textStyle: {
            color: "#fff"
        },
          data: ['新增', '删除', '修改']
        },
        grid: {
          left: '3%', //图表距边框的距离
          right: '3%',
          top: '15%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: {
          data: lineXAxisData,
          axisTick: {
            show: false
          },
          axisLine: {
            //x轴线的颜色以及宽度
            show: true,
            lineStyle: {
              color: '#455B77'
              // width: 0,
              // type: "solid"
            }
          },
          axisLabel: {
            interval: 0,
            textStyle: {
              color: '#c0e6f9'
            }
          }
        },
        yAxis: {
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#455B77' //y轴颜色
            }
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            z: 1,
            name: '新增',
            type: 'bar',
            barWidth: barWidth,
            barGap: '0%',
            data: data1,
            itemStyle: {
              normal: {
                color: colors[0]
              }
            }
          },
          {
            z: 2,
            name: '新增',
            type: 'pictorialBar',
            data: constData1,
            symbol: 'diamond',
            symbolOffset: ['-100%', '50%'],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: colors[0]
              }
            },
            tooltip: {
              show: false
            }
          },
          {
            z: 3,
            name: '新增',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: showData1,
            symbol: 'diamond',
            symbolOffset: ['-135%', '-50%'],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
              normal: {
                borderColor: '#8bead4',
                borderWidth: 2,
                color: '#8bead4'
              }
            },
            tooltip: {
              show: false
            }
          },
          {
            z: 1,
            name: '删除',
            type: 'bar',
            barWidth: barWidth,
            data: data2,
            itemStyle: {
              normal: {
                color: colors[1]
              }
            }
          },
          {
            z: 2,
            name: '删除',
            type: 'pictorialBar',
            data: constData2,
            symbol: 'diamond',
            symbolOffset: ['0%', '50%'],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: colors[1]
              }
            },
            tooltip: {
              show: false
            }
          },
          {
            z: 3,
            name: '删除',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: showData2,
            symbol: 'diamond',
            symbolOffset: ['0%', '-50%'],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
              normal: {
                borderColor: '#96dfff',
                borderWidth: 2,
                color: '#96dfff'
              }
            },
            tooltip: {
              show: false
            }
          },
          {
            z: 1,
            type: 'bar',
            name: '修改',
            barWidth: barWidth,
            data: data3,
            itemStyle: {
              normal: {
                color: colors[2]
              }
            }
          },
          {
            z: 2,
            name: '修改',
            type: 'pictorialBar',
            data: constData3,
            symbol: 'diamond',
            symbolOffset: ['100%', '50%'],
            symbolSize: [barWidth, 10],
            itemStyle: {
              normal: {
                color: colors[2]
              }
            },
            tooltip: {
              show: false
            }
          },
          {
            z: 3,
            name: '修改',
            type: 'pictorialBar',
            symbolPosition: 'end',
            data: showData3,
            symbol: 'diamond',
            symbolOffset: ['135%', '-50%'],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
            itemStyle: {
              normal: {
                borderColor: '#d5d2ff',
                borderWidth: 2,
                color: '#d5d2ff'
              }
            },
            tooltip: {
              show: false
            }
          }
        ]
      };
    }
  }
};
</script>
<style lang="scss" scoped>
/deep/.editable-cell {
  position: relative;
}

/deep/.editable-cell-input-wrapper {
  padding-right: 24px;
}
/deep/.editable-cell-text-wrapper {
  padding-right: 24px;
}

/deep/.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

/deep/.editable-cell-icon {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}
/deep/.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

/deep/.editable-cell-icon {
  line-height: 18px;
  display: none;
}

/deep/.editable-cell-icon-check {
  line-height: 28px;
}

/deep/.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

/deep/.editable-cell-icon:hover {
  color: #108ee9;
}
/deep/.editable-cell-icon-check:hover {
  color: #108ee9;
}

/deep/.editable-add-btn {
  margin-bottom: 8px;
}
// .chart-container {
//   width: 600px;
//   height: 600px;
// }
</style>
喔烨鸭
关注
专栏目录
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
极致呈现系列之：ECharts3D柱状图的维度穿梭
九仞山的专栏
06-30 1406
ECharts3D柱状图的使用
Echart--多个柱形图
disuiniang7601的博客
03-02 346
设置数据: 效果图: optionAll: { title: { text: '营收情况', left: 'center' }, tooltip: { trigger: 'axis', axisPointer...
echarts 多个3D柱状图
最新发布
qq_39877681的博客
09-06 348
【代码】echarts 多个3D柱状图。
echarts 立体柱状图(多个柱状图)
cjy_fly的博客
09-25 5332
echarts 立体柱状图(多个柱状图)
echarts实现多3D立体柱状图
Dalin0929的博客
11-26 1万+
效果图： 实现代码： // 立体多柱状图 function getSolidOption(data1, data2, data3) { // 月份坐标轴 var nowMonth = new Date().getMonth() + 1; var lineXAxisData = []; for (var i = 5; i >= 0; i--) { var month = nowMonth - i; if (month < 1) { lineXAxisD
echarts 多个柱状图
山外小楼
05-10 5596
loopEcharts(time,data,data2,data3){ let Ehcarts=echarts.init(document.getElementById("loopEchart")) let option={ backgroundColor:'', color:["#FF2160","#E8E637","#30B1FB"], tooltip: { trigger: 'axis', ...
echarts入门 柱状图多个柱子横向渐变效果
weixin_45818290的博客
08-29 678
实现的主要核心思想是，首先获取每个柱子的index，然后设置给每个柱子不同的透明度。echarts柱状图多个柱子横向渐变效果。
echart实现3D柱状图效果
01-31
在本案例中，我们将探讨如何利用 ECharts 实现3D柱状图效果，特别是在使用 echart.gl.js 扩展库时的具体步骤和技术要点。 1. **ECharts与ECharts.gl介绍** ECharts 是百度开发的一款开源的、轻量级的数据可视化...
Echarts柱状图3d立体效果
m0_61169066的博客
06-27 3947
Echarts柱状体
echarts实现动态柱状图
12-19
ECharts，作为一款由百度开发的开源JavaScript图表库，提供了丰富的图表类型和强大的交互功能，使得动态柱状图的实现变得简单高效。本篇文章将详细探讨如何使用ECharts来创建动态柱状图，满足大屏可视化对实时数据...
echarts实现3D柱状图（视觉层面）和3D饼图
热门推荐
布克吉的博客
06-06 1万+
立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。更多参数配置，前往echarts官网查询，
echarts 3D 柱状图
qq_43730595的博客
04-01 2369
echarts 3D柱状图
ECharts 柱状混合
年轻的时候要多吃苦,这样老了吃苦才习惯
12-07 269
app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } ...
echarts柱状图 设置多个横坐标共用一个柱子
奶牛纯牛蒙的博客
05-24 2780
echarts柱状图中如何实现一个‘柱’跨过多个x轴坐标
echarts3D柱状图，多个柱子，单个柱子，传参即可
super帅的博客
12-21 2370
echarts3D柱状图，多个柱子，单个柱子，传参即可
Echarts 3D柱形图和3D堆叠柱形图实现
z1076233241的博客
05-28 4491
这个图本身组成部分多样，一组双柱图（蓝绿柱子），由10个部分构成，解释其中一个（蓝色），一个由3个菱形，2个直边构成。3个菱形为上、中、底部，2个直边为背景虚化的柱子，和蓝颜色柱子，绿色柱子同理。其中，直边的图形利用两种颜色，深浅不一进行渲染，出现了类似于直边的效果。最后吐槽，我原本想实现的柱形图，是上方为平行四边形的类型的柱形图，但发现，Echarts自带的图形中，没有平行四边形，得自己画或者去官方那里放入图片进行代码的生成导出，于是放弃，使用这种网上查找的大多数人使用的菱形进行操作。
echarts 3D柱状图
nbclasszj的博客
10-12 2005
echarts 3D柱状图
echarts3d柱状图多列
09-08
引用:在echarts中，你...因此，要实现echarts3d柱状图的多列效果，你可以使用堆叠属性来控制柱子的显示方式，并通过设置color属性来为每个柱子设置不同的透明度。<span class="em">1</span><span class="em">2</span>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值