首页 > 其他分享 >echarts自定义胶囊柱图并设置每个柱子的渐变色

echarts自定义胶囊柱图并设置每个柱子的渐变色

时间:2024-07-19 08:56:43浏览次数:10  
标签:false 自定义 show true 渐变色 柱图 color 100 type

    drawCharts() {
      let myChart = echarts.init(document.getElementById('main'));
      let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            splitLine:{//坐标轴在grid区域的分割线
              show:false
            },
            axisLabel:{
              show:false
            }
        },
        yAxis: [
          {
            type: 'category',
            data: ['日发电', '月发电', '年发电'],
            inverse:true,
            axisTick: {
              alignWithLabel: true,
              show:false
            },
            axisLine:{
              show:false
            }
          },
          {
            type: 'category',
            data: [1000, 1000, 1000],
            inverse:true,
            axisTick: {
              alignWithLabel: true,
              show:false
            },
            axisLine:{
              show:false
            },
            axisLabel:{
              textStyle:{
                fontSize:12,
                color:"#fff"
              }
            }
          }
        ],
        series: [
          {
              name: '数据',
              type: 'bar',
              yAxisIndex:0,
              data: [10, 52, 20],
              barWidth: '38%',
              label:{
                show:true,
                position: 'top', 
                formatter:function(params){
                  return params.data+"%";
                }
              },
              // 设置每个柱子的渐变色
              itemStyle: {
                  borderRadius:[0, 0, 50, 0],
                  color:function(params){
                    let colorList = [
                        ['#0B42A7', '#209CFF'],
                        ['#068054', '#0DB484'],
                        ['#C86A05', '#E9B500'],
                    ]
                    let colorItem = colorList[params.dataIndex]
                    return new echarts.graphic.LinearGradient(0,0,1,0,
                      [
                        {
                          offset: 0,
                          color: colorItem[0]
                        },
                        {
                          offset: 1,
                          color: colorItem[1]
                        }
                      ], false
                    )
                  }
              }
          },
          {
            name: '',
            type: 'bar',
            yAxisIndex:1, //使两个柱状图重合的效果
            barWidth: '40%',
            data: [100, 100, 100, 100, 100,100, 100],
            label:{
              show:false
            },
            itemStyle:{
              color:"none",
              borderColor:"#143670",
              borderWidth:2,
              borderRadius:[0, 0, 50, 0],
            },
          }
        ]
      }
      myChart.setOption(option);
    },
    onSelectChange(selectedRowKeys) {
      if (selectedRowKeys.length > 4) {
        this.$message.warning('最多只能选择4条缺陷!')
        return
      }
      this.selectedRowKeys = selectedRowKeys
    },
  }

  

标签:false,自定义,show,true,渐变色,柱图,color,100,type
From: https://www.cnblogs.com/theblogs/p/18310738

相关文章

  • 自定义异常
    了解手动抛出异常对象和自动抛出thrownew异常类的对象throws异常类对象,两者区别throw在方法中用throws在声明时用使用场景多个方法并列,可以使用throw自定义异常继承于现有的异常体系。通常继承于RuntimeException\Exception通常提供几个重载的构造器提供一个全......
  • pytorch 自定义 dataloader 维度不对齐+广播机制导致不易察觉 bug
    很简单,自定义了一个dataloader,出现以下不易察觉buginputs维度:[bs,4],这个没问题labels维度:正确应该是[bs,1],但是dataloader出来是[bs]模型的outputs维度:[bs,1]如果用torch.mean(torch.abs(labels-outputs))计算L1Loss/MAE由于pytorch的广播机制,torch.ab......
  • Qt实现仪表盘-自定义控件
            仪表盘在很多汽车和物联网相关的系统中很常用,本文就来介绍一下Qt 仪表盘的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。一、简述         使用Qt绘制一个仪表盘,用来显示当前的温度,绘制刻度、绘制数字......
  • QT利用QPainter实现自定义圆弧进度条组件
               在可视化应用中,弧形进度条应用也比较广泛,本文示例封装了一个可复用、个性化的弧形进度条组件。本文示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。主要结构就是外围一圈圆角进度,中间加上标题和对应进度的百分比,进度条的起始角......
  • 2024-07-18 给vue项目添加自定义路由守卫
    要配置路由守卫要使用到vue-router,它是Vue.js官方的路由管理器,主要用于帮助开发者构建单页面应用(SinglePageApplication,简称SPA)。步骤一:新建路由文件,文件名随意,建议叫router.ts,规范一点//router.tsimport{createRouter,createWebHashHistory}from"vue-router";i......
  • 使用Spring Boot AOP和自定义注解优雅实现操作日志记录
    使用SpringBootAOP和自定义注解优雅实现操作日志记录大家好,今天我们来聊聊如何在SpringBoot项目中,通过AOP(面向切面编程)和自定义注解,优雅地实现操作日志记录。操作日志对于系统的可维护性和安全性至关重要,它能帮助我们追踪用户行为,排查问题。什么是AOP?AOP,全称Aspect-Oriented......
  • 自定义转换器
    我们要自定义转换器就要声明一个类,然后继承父类的BaseConverter需要用正则表达式的需要重写父类的regex代码实现: fromflaskimportFlaskfromwerkzeug.routingimportBaseConverterapp=Flask(__name__)classCustomConverter(BaseConverter):#自定义转换器要继承......
  • Netcode for Entities如何添加自定义序列化,让GhostField支持任意类型?以int3为例(1.2.3
    一句话省流:很麻烦也很抽象,能用内置支持的类型就尽量用。首先看文档。官方文档里一开头就列出了所有内置的支持的类型:GhostTypeTemplates其中Entity类型需要特别注意一下:在同步这个类型的时候,如果是刚刚Instantiate的Ghost(也就是GhostId尚未生效,上一篇文章里说过这个问题),那么客......
  • 关于在vue2中使用LogicFlow自定义节点
    主要参考LogicFlow官方文档在基础流程图搭建起来后,我们想要构建自己的需求风格,例如:那么该如何对节点进行自定义设定呢?文档当中有着详细的解释,本文以实际需求为例大体介绍:import{RectNode,RectNodeModel,h}from"@logicflow/core";classCustomNodeViewextendsR......
  • Hive自定义函数编写方法(含源代码解读,超详细,易理解)
    一、Hive自定义函数介绍        1.内置函数        Hive自带了一些函数。比如:max/min等,但是数量有限,自己可以通过自定义UDF来方便的扩展。2.自定义函数        当Hive提供的内置函数无法满足你的业务处理需要时,此时就可以考虑使用用户自定义函数(UD......