echarts 柱状原型立体图 双y轴 负值

最新推荐文章于 2024-12-05 16:58:20 发布
最新推荐文章于 2024-12-05 16:58:20 发布
阅读量3.1k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46463643/article/details/110235467
版权
本文介绍了如何使用Echarts创建具有双Y轴的柱状图，确保刻度线对齐，同时处理含有负值的数据。还详细讲解了设置轴名称的位置以及为柱状图添加立体阴影的方法。
摘要由CSDN通过智能技术生成

在这里插入图片描述

<script>
import 'echarts/lib/chart/bar'
import echarts from 'echarts'
var xData = ['MAC', 'IP']
var line = ['50', '90']
var attr = {
   
  name: '月平均单价',
  unit: '元/单'
}
export default {
   
  data() {
   
    return {
   
      options: {
   
        tooltip: {
   
          trigger: 'item',
          padding: 1,
          formatter: function (param) {
   
            var resultTooltip =
              "<div style='background:rgba(13,5,30,.6);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
              "<div style='text-align:center;'>" +
              param.name +
              '</div>' +
              "<div style='padding-top:5px;'>" +
              "<span style=''> " +
              attr.name +
              ': </span>' +
              "<span style=''>" +
              param.value +
              '</span><span>' +
              attr.unit +
              '</span>' +
              '</div>' +
              '</div>'
            return resultTooltip
          }
        },
        grid: {
   
          left: '8%',
          top: '10%',
          right: '8%',
          bottom: '15%'
        },
        xAxis: [
          {
   
            name: '数量',
            nameTextStyle: {
   
              align: 'left',
              verticalAlign: 'bottom',
              lineHeight: 280,
              color: '#fff'
            },
            data: xData,
            axisLabel: {
   
              textStyle: {
   
                color: '#fff',
                fontSize: 14
              },
              margin: 20 // 刻度标签与轴线之间的距离。
            },

            axisLine: {
   
              show: false // 不显示x轴
            },
            axisTick: {
   
              show: false // 不显示刻度
            },
            boundaryGap: true
          }
        ],
        yAxis: [
          {
   
            splitLine: {
   
              show: true,
              lineStyle: {
   
                color: '#fff',
                type: 'solid'
              }
            },
            axisTick: {
   
              show: false
            },
            axisLine: {
   
              show: false
            },
            axisLabel: {
   
              textStyle: {
   
                color: '#fff'
              }
            }
          }
        ],
        series: [
          {
   
            // 柱底圆片
            name: '',
            type: 'pictorialBar',
            symbolSize: [60, 22], // 调整截面形状
            symbolOffset: [0, 10],
           label: {
   
              show: true,
              position: 'top',
              distance: 15, // 数据显示上方的距离
              color: '#fff'
            },
            itemStyle: {
   
              normal: {
   
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
   
                    offset: 0,
                    color: '#bbce45'
                  },
                  {
   
                    offset: 1,
                    color: '#bbce45'
                  }
                ])
              }
            },
            data: line
          },

          // 柱体
          {
   
            name: '',
            type: 'bar',
            barWidth: 60,
            barGap: '0%',
            itemStyle: {
   
              normal: {
   
                color: {
   
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: 'linear',
                  global: false,
                  colorStops: [
                    {
   
                      // 第一节下面
                      offset: 0,
                      color: '#bbce45'
                    },
                    {
   
                      offset: 1,
                      color: '#bbce45'
                    }
                  ]
                }
              }
            },

            data: line
          },

          // 柱顶圆片
          {
   
            name: '',
            type: 'pictorialBar',
            symbolSize: [60, 22], // 调整截面形状
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: 'end',
            itemStyle: {
   
              normal: {
   
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
   
                      offset: 0,
                      color: '#cad344'
                    },
                    {
   
                      offset: 1,
                      color: '#cad344'
                    }
                  ],
                  false
                )
              }
            },
            data: line
          }
        ]
      }
    }
  }
}
</script>
柱状图双y轴刻度线对齐

在这里插入图片描述

	// 鼠标滑过纵轴线渐变色 两种写法 axisPointer 
	
    tooltip: {
   
        trigger: 'axis',
        axisPointer: {
   
            lineStyle: {
   
                color: {
   
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
   
                        offset: 0,
                        color: 'rgba(0, 255, 233,0)'
                    }, {
   
                        offset: 0.5,
                        color: 'rgba(255, 255, 255,1)',
                    }, {
   
                        offset: 1,
                        color: 'rgba(0, 255, 233,0)'
                    }]
                }
            },
        }
          //   axisPointer: {
   
          //   type: 'line',
          //   lineStyle: {
   
          //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //       {
   
          //         offset: 0,
          //         color: 'transparent'
          //       },
          //       {
   
          //         offset: 0.2,
          //         color: '#5989D2'
          //       },
          //       {
   
          //         offset: 0.5,
          //         color: '#729EE2'
          //       },
          //       {
   
          //         offset: 0.8,
          //         color: '#5989D2'
          //       },
          //       {
   
          //         offset: 1,
          //         color: 'transparent'
          //       }
          //     ])
          //   }
          // }
    },
  yAxis: [
          {
   
            type: 'value',
            splitLine: {
   
              show: true,
              lineStyle: {
   
                color: '#C1D7F3',
                type: 'dotted'
              }
            },
            min: 0,
            max: 0,
            interval: 0,
            axisLine: {
   
              show: false, // 不显示x轴
              lineStyle: {
   
                color: &
最低0.47元/天 解锁文章
_大菜鸟_
关注
echarts 刻度 双y轴_echarts 柱状图 定制双y轴数据
weixin_28235513的博客
01-14 1433
option = {backgroundColor:"#293c55",tooltip: {trigger: 'axis'},legend: {itemWidth:15, //设置legend图标的宽度itemHeight:15, //设置legend图标的高度right:60, //设置legend的位置data: [{name:"蒸发量",icon:"rect"},{name:"降水量",ic...
echart多个柱状图 设置y轴显示_echarts用两个y轴显示两组有正负数的数据
weixin_34092535的博客
01-17 4191
这个标题有点长，咱们看图就好理解了：这个图表用两个系列，表示了某个服装店里所有衣服的销售量和盈利额。从这个图表里，我们可以一目了然的看出，衬衫和裤子买赔了，因为它们的盈利额为负数。理解了我要表达的意思，咱们接下来就说一下绘制图表核心思路。绘制图表核心思路核心思想：通过极值和行高控制y 轴的刻度核心代码：yAxis: [{type: 'value',scale: true,name: '销售量',m...
Echarts使用平面方法绘制三维立体柱状图表
最新发布
qq_53911056的博客
12-05 2252
Echarts使用平面方法绘制三维立体柱状图表。使用Echarts的自定义系列custom，使用了三个 polygon 类型的图形元素来绘制立方柱状图的三个面。通过调整坐标点的位置来确定形状。在设置不同的渐变色，就可以实现立体效果。
echarts双y轴存在负数情况两轴0刻度不对齐问题
懒虫的博客
10-12 1053
echarts双y轴存在负数情况两轴0刻度不对齐问题。
echarts 双Y轴等份及负数逻辑处理
qq_38045525的博客
05-07 579
【代码】echarts 双Y轴等份及负数逻辑处理。
echarts中存在负数数据实现双Y轴对齐
热门推荐
amazingGd的博客
12-22 1万+
Echarts中存在负数数据实现双Y轴对齐
echarts双Y轴刻度不对齐以及有负数时x轴线不太底部问题
ya_nan_zhang的博客
08-30 6595
echarts双Y轴刻度不对齐以及有负数时x轴线不太底部问题 1、遇到的问题 双Y轴刻度不对齐以及x轴不在底部问题 2、解决方法 1）解决x轴线不在底部问题 在axisLine里面设置onZero属性 2）解决对齐问题 问题描述： 1、这里已经强制设置了min max 以及interval为5但是人不对齐 发现是最大值和倒数第二个值间隔不均匀导致的 所以这里的max要通过计算来获取 2、这里柱子对应左侧y轴 两条折线对应右侧y轴 所以这里要求出两条折线的最大值和最小值进而比较出最终的最小值和最大值 解决
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10...
echarts ajax 双y轴,echarts双y轴折线图柱状图混合实时更新图
weixin_32836221的博客
08-05 1153
先看下效果，自己用ps做了张gif图，发现很好玩啊。。不喜勿喷自己下载个echarts.min.js直接上代码：ECharts// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'Topic'// ...
echarts 多y轴 数据有负数导致0刻度线不对齐
guoqing的博客
04-24 2325
先计算出每列的最大数占比数量和最小数占比数量，然后分别去对比，少数量的就根据分段间隔去补数量，保证两边的最大数列数和最小数列数相同，就可以保持一致的列刻度。先分别读取出两个数组的最大值和最小值，如果数组的长度为0，为了方面后面的计算先设置值为1。目的是为了让最大和最小数刚好分段间隔成比例，这个时候的最大和最小数就是根据间隔比例来的。网上找了很多方法去尝试，效果都不是很好，这边自己写了个处理的方法。然后分别计算出，每个数组在理想分段数下的每段实际间隔数。然后根据计算的实际分段间隔数去重新计算最大和最小数。
echarts柱状图正负值上下方显示
TianQiWanLaiQiu的博客
06-09 1358
【代码】echarts柱状图正负值上下方显示。
echarts实现正负轴柱状图
蜗牛~~
07-31 2903
【代码】echarts实现正负轴柱状图。
echarts 双Y轴 有负值
xiaoma_sky的博客
11-11 654
/找出左侧Y轴的数据的最大值 9.5与10的处理是为了不让最大值刚好到坐标轴最顶部。name: `单位(${unit1})`,// 所有数据以万为单位。// 所有数据以亿为单位。let unit1 = '元';// 所有数据以万为单位。unit1 = '万';// 所有数据以亿为单位。unit1 = '亿';let unit = '元';unit = '万';unit = '亿';
echarts——y轴设置负刻度与x轴与负刻度对齐
cxb_96的博客
12-04 4145
1图例 2.代码 xAxis: { type: 'category', data: a, axisLine: { lineStyle: { color: 'black' }, onZero: false // 坐标轴与负刻度对齐 } }, yAxis: { scale: true, max:
【echarts】ECharts柱状图(横向+双Y轴)-部分配置项
德仔
10-13 3263
1.1效果图://提示框，默认显示 tooltip : {// 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } , // 控制提示格式 formatter : function(param) {return ` ${ param [ 0 ] . axisValue } : ${ param [ 0 ] . value } 人 ` } } , //控制直角坐标系与容器上下左右的距离 grid : {
echarts正负极柱状图
花椒和蕊的博客
09-18 3449
<template> <div> <div class="headText">投资计划预警</div> <div class="bodyblock"> <div class="main2"> <div class="fxplain2" ref="fxplain_ref2" :style="{ height: zoomNum * 305 +.
echarts柱状图负值-动态设置圆角样式
EnidChann的博客
10-27 3726
如图, 柱状图有负数时,圆角的样式需要进行动态调整 series: [ { type: 'bar', barWidth: '30', // 在这里对data进行自定义配置即可 data: seriesData.map(item => { // console.log(item, 'item') return { val.
echarts 柱状图堆叠图 Y轴显示单位数量
10-13
ECharts是一个流行的JavaScript数据可视化库，它支持创建各种图表，包括柱状图和堆叠图。在创建堆叠柱状图时，Y轴通常会显示每个柱子的累计值，即每一组的数据都是基于前一组数据累加而成的。 如果你想在ECharts中设置Y轴显示单位数量，首先需要配置柱状图的基本结构，然后可以设置`axisLabel`属性来控制标签的展示方式。例如： ```javascript var option = { xAxis: { // X轴配置 data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: { // Y轴配置 type: 'value', // 显示数值，默认就是累积值堆叠 axisLabel: { // 设置轴标签格式 formatter: function(value) { return value + ' 单位数量'; // 这里自定义为单位数量的展示形式 } } }, series: [ // 系列配置，这里假设有两个堆叠的系列 { name: 'Series 1', type: 'bar', stack: '总量' }, { name: 'Series 2', type: 'bar', stack: '总量' } ] }; // 使用ECharts实例渲染图表 echarts.init(document.getElementById('main')).setOption(option); ``` 在这个例子中，Y轴将显示每个柱子的累计值，并在每条刻度旁边附加上“单位数量”这个标签。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值