首页 > 其他分享 >在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient

在使用echarts绘制图表时, 如果需要使用渐变色, 则应使用echarts内置的渐变色生成器echarts.graphic.LinearGradient

时间:2024-11-01 16:33:05浏览次数:1  
标签:20 color 渐变色 生成器 参数 offset echarts

  series: [
    {
      name: '',
      type: 'bar',
      barMaxWidth: 20,
      label: {
        show: true,
        color: '#fff',
      },
      showBackground: true,
      backgroundStyle: {
        color: '#d5f1f9',
        borderRadius: [20, 20, 20, 20],
      },
      itemStyle: {
        borderRadius: [20, 20, 20, 20],
	    // 颜色渐变函数 前四个参数分别表示四个位置依次为
        // 右下左上
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          { offset: 0, color: 'blue' },
          { offset: 1, color: 'red' },
        ]),
      },
      data: [0, 0, 0],
    },
  ]

  

入了5个参数:

前4个参数用于配置渐变色的起止位置, 这4个参数依次对应右/下/左/上四个方位。而0 0 0 1则代表渐变色从正上方开始.
第5个参数则是一个数组,用于配置颜色的渐变过程. 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置, color表示颜色

标签:20,color,渐变色,生成器,参数,offset,echarts
From: https://www.cnblogs.com/fireicesion/p/18520613

相关文章

  • 随机性、熵与随机数生成器:解析伪随机数生成器(PRNG)和真随机数生成器(TRNG)
    随机性在诸多领域中扮演着至关重要的角色,涵盖密码学、仿真和机器学习等方面。因为随机性为无偏决策、不可预测序列和安全加密提供了基础。然而生成随机数是一项复杂的任务,理解伪随机数生成(pseudo-randomnumbergeneration,PRNG)与真随机数生成(truerandomnumbergeneration......
  • ECHARTS-折线图不显示数据 控制折线图颜色
    点击查看代码series:[{color:'#dac05c',name:'完成率',type:'line',yAxisIndex:1,//data:data.complateQtyLv,data:data.xxra......
  • echarts 睡眠时间段+日期
    效果图:关键方法代码:constinitChartDataTwo=(scollectT,dataL)=>{//给一个测试的数据scollectT=["2024-10-29","2024-10-25","2024-10-24","2024-10-22","2024-10-18","2024-10-16",......
  • fast-poster 海报生成器,一分钟完成海报开发.
    一.项目介绍        FastPoster是一个专为快速开发海报而设计的工具,它允许开发者只需上传背景图并在指定位置放置文本、图片、二维码或头像等组件就能生成海报。该项目提供了一键生成各种语言SDK调用代码的功能,简化了海报制作流程。经过多年的生产环境测试,FastPo......
  • ECHARTS-水球图按照结果展示不同颜色
    结果演示:<el-colstyle="height:100%"><divstyle="height:100%;padding-top:50px;padding-right:25px;&......
  • CMake 生成器表达式---条件表达式和逻辑运算符
    【写在前面】CMake的生成器表达式用于在构建系统级别上进行条件判断和逻辑运算,它们通常用在目标属性和生成器表达式上下文中。这些表达式允许你根据不同的平台、配置或编译器来定制构建过程。本文引用的文档链接:cmake生成器表达式(7)—CMake3.26.4Documentation【正文......
  • Python——点亮生活:励志名言生成器
    在这个快节奏、充满挑战的时代,我们每个人都可能在某个时刻感到迷茫或失去动力。在这些时刻,一句恰当的励志名言往往能够像一束光照亮我们的道路,给予我们继续前行的力量。本文将详细介绍如何使用Python编程语言来创建一个励志名言生成器,这不仅是一个编程实践的案例,也是一个能够......
  • ECharts饼图-日历饼图,附视频讲解与代码下载
    引言: 在数据可视化的世界里,ECharts凭借其丰富的图表类型和强大的配置能力,成为了众多开发者的首选。今天,我将带大家一起实现一个饼图图表,通过该图表我们可以直观地展示和分析数据。此外,我还将提供详细的视频讲解和代码下载链接,帮助大家快速上手。一、图表效果预览 二、视......
  • GitHub Star 数量前 5 的开源应用程序生成器
    欢迎来的GitHubStar数量排名系列文章的第7篇——最受欢迎的应用程序生成器。之前我们已经详细探讨过:在GitHub上最受欢迎的——无代码工具、低代码项目、内部工具、CRUD项目、自部署项目和Airtable开源替代品。累计超过50个优质项目!(......
  • JS和ECharts的一些分享
    @TJS和ECharts的一些分享OC制作动态天气预测图表withEChartsandJavaScript在现代网页开发中,将复杂的数据视觉化通常能极大地增强用户体验。本文将使用ECharts,一款强大的开源可视化库,配合JavaScript来创建一个根据不同天气条件显示不同的动态液体填充图表。这种图表......