echarts柱状图颜色渐变和柱形效果实现

最新推荐文章于 2024-05-31 15:30:36 发布
最新推荐文章于 2024-05-31 15:30:36 发布
阅读量722 收藏 1
点赞数
文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44036603/article/details/125999851
版权 
 option = {
   tooltip: {
     trigger: 'axis',
     axisPointer: {
       type: 'shadow',
       textStyle: {
         color: '#fff',
       },
     },
   },
   dataset: {
     source: apiData,
     dimensions: ["region", "djl"]
   },
   grid: {
     borderWidth: 0,
     top: 40,
     bottom: 50,
     left: 50,
     right: 30,
     textStyle: {
       color: '#fff',
     },
     lineStyle: {
       color: 'rgba(0,30,40,0.4)',
     },
   },
   calculable: true,
   xAxis: [{
     type: 'category',
     axisLine: {
       lineStyle: {
         color: 'rgba(120,150,150,0.5)',
       },
     },
     splitLine: {
       show: false,
     },
     axisTick: {
       show: false,
     },
     splitArea: {
       show: false,
     },
     axisLabel: {
       interval: 0,
       color: '#88cbfe',
       fontSize: 14,
       formatter: function(value) {
         if (value.length > 4 && value.length <= 8) {
           return value.substr(0, 4) + '\n' + value.substr(4, 4)
         } else if (value.length > 8) {
           return value.substr(0, 4) + '\n' + value.substr(4, 4) + '...'
         } else {
           return value
         }
       }
     }
   }, ],
   yAxis: [{
     name: '',
     nameTextStyle: {
       color: 'rgba(136,203,254,0.5)',
       padding: [0, 0, 0, -50],
     },
     nameGap: 15,
     type: 'value',
     splitLine: {
       show: true,
       lineStyle: {
         type: 'solid',
         color: 'rgba(100,100,120,0.2)',
       },
     },
     min: 0,
     axisLine: {
       show: false,
     },
     axisTick: {
       show: false,
     },
     axisLabel: {
       show: true,
       interval: 0,
       color: 'rgba(136,203,254,0.5)',
       fontSize: 12,
       formatter: '{value}%',
     },
     splitArea: {
       show: false,
     },
   }],
   series: [{
       name: '柱顶部',
       type: 'pictorialBar',
       symbolSize: [15, 9],
       symbolOffset: [0, -5],
       z: 12,
       tooltip: {
         show: false
       },
       itemStyle: {
         normal: {
           color: function(params) {

             let ty = Number(params.data.djl);


             if (0 < ty && ty < 90) {
               return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: "rgba(213,79,26,1)"
                 },
                 {
                   offset: 1,
                   color: "rgba(213,79,26,1)"
                 }
               ])
             } else if (90 < ty && ty < 95) {
               return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: "rgba(162,127,22,1)"
                 },
                 {
                   offset: 1,
                   color: "rgba(162,127,22,1)"
                 }
               ])
             } else if (95 <= ty && ty < 100) {
               return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: "rgba(47,136,229,1)"
                 },
                 {
                   offset: 1,
                   color: "rgba(47,136,229,1)"
                 }
               ])
             }
           }
         },
       },
       label: {
         show: false,
         position: 'top',
         fontSize: 16,
       },
       symbolPosition: 'end',
       data: apiData.djl,
     },
     {
       name: '柱底部',
       type: 'pictorialBar',
       symbolSize: [15, 9],
       symbolOffset: [0, 0],
       z: 12,
       tooltip: {
         show: false
       },
       itemStyle: {
         normal: {
           color: function(params) {

             let ty = Number(params.data.djl);


             if (0 < ty && ty < 90) {
               return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: "rgba(213, 79, 26, 0.15)"
                 },
                 {
                   offset: 1,
                   color: "rgba(213, 79, 26, 0.15)"
                 }
               ])
             } else if (90 < ty && ty < 95) {
               return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: "rgba(162, 127, 22, 0.2)"
                 },
                 {
                   offset: 1,
                   color: "rgba(162, 127, 22, 0.2)"
                 }
               ])
             } else if (95 <= ty && ty < 100) {
               return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: "rgba(47, 136, 229, 0.2)"
                 },
                 {
                   offset: 1,
                   color: "rgba(47, 136, 229, 0.2)"
                 }
               ])
             }
           }
         },
       },
       data: apiData.djl,
     },
     {
       name: '设备登记率(%)',
       type: 'bar',
       barMaxWidth: 15,
       barGap: '10%',
       itemStyle: {
         normal: {
           color: function(params) {

             let ty = Number(params.data.djl);


             if (0 < ty && ty < 90) {
               return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: "rgba(213,79,26,0.8)"
                 },
                 {
                   offset: 1,
                   color: "rgba(213, 79, 26, 0.15)"
                 }
               ])
             } else if (90 < ty && ty < 95) {
               return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: "rgba(162,127,22,0.8)"
                 },
                 {
                   offset: 1,
                   color: "rgba(162, 127, 22, 0.2)"
                 }
               ])
             } else if (95 <= ty && ty < 100) {
               return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: "rgba(47,136,229,0.8)"
                 },
                 {
                   offset: 1,
                   color: "rgba(47, 136, 229, 0.2)"
                 }
               ])
             }
           }
         }
       },
       label: {
         normal: {
           show: false,
           position: 'top',
           fontSize: 14,
           color: '#ffffff',
           offset: [0, -10],
           fontFamily: 'MicrosoftYaHei'
         },
       },
       encode: {
         x: "tupe",
         y: "djl"
       }
     },

   ],
 }

在这里插入图片描述
在这里插入图片描述

搬砖前端
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts实现渐变电量效果柱状图
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
06-15 548
例子中，过程已经讲得比较详细了，所以这里就不再重复说了，直接贴全部代码。相比于普通的柱状图，这里边最明显的区别在于多了。如果你耐心看完，并理解了对应的图层叠加思路↓。以上代码实现了官网示例与最终效果的对比。先引入一个两层叠加的例子。那么就能很容易想到，
echarts 柱状图渐变色背景
05-14
该案例设置 echarts 柱状图渐变色，同样也可以应用折线图、圆形图等。效果说明：https://blog.csdn.net/qq_36437172/article/details/106115048
使用 echarts 实现象形图渐变色
weixin_45000975的博客
04-20 600
实现思路：象形图无法实现整块渐变，则先实现两个普通的渐变柱状图，然后再实现两个象形柱状图，背景色设置为白色（调试时若无法区分可加对应底色），定位象形柱状图在普通柱状图上面即可。
Echarts柱状图每个柱子都设置不同的渐变色，达到视觉上的立体效果
最新发布
hunantai的博客
05-31 143
【代码】Echarts柱状图每个柱子都设置不同的渐变色，达到视觉上的立体效果。
echarts 象形渐变
Marskel的博客
04-24 476
text: “使用率”,
echarts 创建3D渐变柱状图
weixin_39782854的博客
07-18 3080
说明：实际项目美工效果图需要，网上找了相关的案例，发现有用图片的，但是发现图片的如果数据比较复杂会出现变形的，不实用，因此还是使用代码控制比较好，看看是否差不多了呢，细节后面大家可以自己调试。 美工效果图： 什么都不说，直接上代码： 1.配置项option var color1 = new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: "#38a0d6"}, {offset: 1, color: "#6dcde6"}], f
echarts 绘制仿立体 矩形 渐变柱状图图表
rudy_zhou的博客
08-03 1787
立体渐变柱状图绘制方式
Echarts 堆叠图数据为0的展示
时光足迹
08-26 822
const stackBarSeries = { type: "bar", label: { show: true, // 当数据为0时不显示，不然会出现加粗0标识 formatter: function(params) { if (params.value > 0) { return params.value; } else { return ""; } }, }, }; ```![请添加
echart饼图设置堆叠效果 实现包含关系/占比关系(某项占比100%)
敲之的博客
02-26 1870
echart饼图设置堆叠效果 option = { legend: { orient: 'vertical', left: 'left', }, series: [ { type: 'pie', radius: '50%', data: [ {value: 1000, name: '全部'}, ],
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可看到效果； 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件...5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
带渐变色 效果的柱形图
04-13
带渐变色 效果的柱形图 可以直接开启渐变颜色渐变 自定义颜色不同颜色
echarts压缩js（包含柱状图闪烁效果）
05-14
本资源为本人二次打包的echarts压缩js，包含柱状图闪烁效果，也可学习我的教程后，自行打包，谢谢大家！
使用echarts实现立体-柱状图
07-21
效果图 https://mp.csdn.net/mp_blog/creation/editor/125918054 用echarts实现立体-柱状图ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10...
Vue中ECharts-bar堆叠条形图的使用
qq_85305188的博客
09-09 4394
Vue中ECharts-bar堆叠条形图的使用引入效果图实现需求（框架修改或不提供部分）实现源码html代码：javascript代码：css代码： 引入 下载安装：npm install echarts --save   全局引入： import echarts from 'echarts' //引入echarts Vue.prototype.$echarts = echarts /...
echarts+vue堆叠柱状图排序
m0_57580977的博客
04-14 3192
参考了https://article.itxueyuan.com/JZ3mwZ
echarts实现3D立体堆叠柱状图
SpringHASh的博客
01-11 6276
基于这篇博客的灵感，在其基础上做了一些改动； https://blog.csdn.net/Dalin0929/article/details/111906862 效果图 实现代码： var legends = ['A相','B相','C相']; var name = ['01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00']..
Echarts 每个柱子一种渐变色的象形柱状图
大剑师兰特的GIS世界
02-27 483
在vue和echarts联合技术栈的操控下，本专栏提供行之有效的源代码示例。这里既包括样式的修改，又包括常用bug的解决。（1）提供title示例：展示控制标题的颜色、位置、子标题，连接等（2）提供legend示例：展示控制图例的类型、宽度、高度、位置、间隙，边框、阴影、透明度、偏移，字体、颜色，提示语等（3）提供grid示例：展示控制绘图网格的位置、宽度、高度、边框、阴影等（4）提供xAxis示例：展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等。
关于echarts横向柱子特殊效果
08-18 836
项目上有个特殊的需求，需要做出echarts横向柱子，柱子上边有个小人随着柱子的百分比移动，柱子右边显示百分比，柱子左边显示标签值，实现的效果如下图： 横向柱子实现思路： 整个页面的效果图如下： 实现思路： 整个横向柱子以一个div包着，将这个div分成3个区域:左、中、右； 左边分成上下2个div ；分别填充label标签，也就是每根柱子的说明 中间也是分成上下2部分，上边...
echarts 柱状图 颜色渐变 270deg
11-17
以下是 echarts 柱状图颜色渐变 270deg 的实现方法： 1. 在 option 中设置 color 属性为一个数组，数组中的每个元素都是一个对象，对象中包含 offset 和 color 两个属性，offset 表示颜色渐变的位置，color 表示颜色值。如下所示： ```javascript option = { color: [ { offset: 0, color: 'rgba(0, 244, 255, 1)' }, { offset: 1, color: 'rgba(0, 77, 167, 1)' } ], // 其他配置项 } ``` 2. 在 series 中设置 itemStyle.normal.color 属性为一个对象，对象中包含 type 和 colorStops 两个属性，type 表示颜色渐变的类型，colorStops 是一个数组，数组中的每个元素都是一个对象，对象中包含 offset 和 color 两个属性，offset 表示颜色渐变的位置，color 表示颜色值。如下所示： ```javascript option = { series: [ { type: 'bar', data: [10,20, 30, 40, 50], itemStyle: { normal: { color: { type: 'linear', colorStops: [ { offset: 0, color: 'rgba(0, 244, 255, 1)' }, { offset: 1, color: 'rgba(0, 77, 167, 1)' } ] } } } } ], // 其他配置项 } ``` 以上两种方法都可以实现 echarts 柱状图颜色渐变 270deg 的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值