echarts:实现3D柱状图 柱状图渐变颜色设置
实现效果如图所示：
代码展示
function echart_3() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('chart_3'));var barWidth = 15;var cahoqi_data=[410, 420, 520, 520, 610];//data: [410, 420, 520, 520, 610]var jinchaoqi_data=[310, 120, 420, 220, 510];option = {tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},legend: {data: [{name: '超期',icon: 'roundRect1',color: {type: 'linear',x: 0,x2: 1,y: 0,y2: 0,colorStops: [{ offset: 0, color: 'rgba(5, 75, 170, 1)' },{ offset: 1, color: 'rgba(11, 151, 232, 1)' }]} //盖子的颜色}, {name: '近超期',icon: 'roundRect1',color: {type: 'linear',x: 0,x2: 1,y: 0,y2: 0,colorStops: [{ offset: 0, color: 'rgba(90, 45, 192, 1)' },{ offset: 1, color: 'rgba(184, 91, 225, 1)' }]} //盖子的颜色}, '4'],selectedMode: false,//取消图例上的点击事件x: 'center',bottom: '2%',itemWidth: 16, // 设置宽度itemHeight: 10, // 设置高度itemGap: 50,// 设置间距textStyle: {//文字根据legend显示 color: "#FFFFFF",fontSize: 12,},},grid: {left: '8%',top: '18%',right: '8%',bottom: '12%',containLabel: true},xAxis: {type: 'category',triggerEvent: true,axisLine: {show: false},axisLabel: {color: "#FFFFFF",fontSize: '14',// interval: 0,// rotate: rotate//文字旋转角度},axisTick: {// show: false,alignWithLabel: true,lineStyle: {color: '#0C4F81',type: 'solid'}},// data: xAxisData,data: ['1月', '2月', '3月', '4月', '5月'],},yAxis: {type: 'value',nameTextStyle: {color: '#4F88BD',padding: [0, 25, -5, 0],fontSize: 12,fontFamily: 'Microsoft YaHei',},axisLine: {show: true,lineStyle: {color: "#0C4F81"}},axisLabel: {color: "#4F88BD",fontSize: '12',formatter: '{value}'},splitLine: {lineStyle: {type: "dotted",color: "#0C4F81"}},axisTick: {show: false},},series: [{z: 2,name: '超期',type: 'pictorialBar',symbolPosition: 'end',data: cahoqi_data,symbol: 'diamond',symbolOffset: ['-70%', '-40%'], //盖子的位置symbolSize: [15, 13], //盖子的大小itemStyle: {color: {type: 'linear',x: 0,x2: 1,y: 0,y2: 0,colorStops: [{ offset: 0, color: 'rgb(7,108,196)' },{ offset: 1, color: 'rgba(30, 169, 237, 1)' }]} //上方菱形颜色设置},tooltip: {show: false}},{z: 1,type: 'bar',name: '超期',barWidth: barWidth,barGap: '50%',data: cahoqi_data,itemStyle: {color: {type: 'linear',x: 0,x2: 1,y: 0,y2: 0,colorStops: [{ offset: 0, color: 'rgba(5, 75, 170, 1)' },{ offset: 0.5, color: 'rgba(11, 151, 232, 1)' },{ offset: 0.5, color: 'rgba(10, 57, 123, 1)' },{ offset: 1, color: 'rgba(16,78,145, 1)' }]}}},{z: 2,name: '近超期',type: 'pictorialBar',symbolPosition: 'end',data: jinchaoqi_data,symbol: 'diamond',symbolSize: [15, 13], //盖子的大小symbolOffset: ['70%', '-40%'],itemStyle: {color: {type: 'linear',x: 0,x2: 1,y: 0,y2: 0,colorStops: [{ offset: 0, color: 'rgba(220, 149, 251, 1)' },{ offset: 1, color: 'rgba(119, 62, 247, 1)' }]}},tooltip: {show: false}},{z: 1,type: 'bar',name: '近超期',barWidth: barWidth,// barGap: '-50%',data: jinchaoqi_data,itemStyle: {color: {type: 'linear',x: 0,x2: 1,y: 0,y2: 0,colorStops: [{ offset: 0, color: 'rgba(90, 45, 192, 1)' },{ offset: 0.5, color: 'rgba(184, 91, 225, 1)' },{ offset: 0.5, color: 'rgba(50, 13, 133, 1)' },{ offset: 1, color: 'rgba(90, 45, 192, 1)' }]}}},]};// // 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize",function(){myChart.resize();});}
重点部分：
对于柱状图颜色的设置：
(1): 其中柱状图的最上方的斜边形设置为type:‘pictorialBar’,
symbol: ‘diamond’, 菱形
symbolPosition: ‘end’,
(2):对于柱状图本身的设置 type: ‘bar’,
echarts:实现3D柱状图 柱状图渐变颜色设置相关推荐
- Qt Qss 渐变颜色设置
1.渐变颜色设置有:qlineargradient(线性渐变颜色设置),qradialgradient(辐射渐变),qconicalgradient(圆锥形渐变). QLinearGradient:显 ...
- html中怎么设置渐变颜色设置,css中渐变色怎么设置
这篇文章主要介绍了css3编写浏览器背景渐变背景色的方法,现在分享给大家,也给大家做个参考. css中渐变色怎么设置 css 给网页中的背景设置渐变色,css的渐变颜色可以指定固定的两个颜色之间的线性 ...
- ECharts之3D立体柱状图一
效果图 背景图片 下载ECharts npm install echarts --save 引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ...
- ECharts之3D立体柱状图二
效果图 背景图片 下载ECharts npm install echarts --save 引入并注册全局ECharts 在 main.js 文件里引入并注册 ( 这里是 Vue3.0 的模板 ...
- echarts的渐变色配置 LinearGradient， 饼图默认渐变颜色设置不同的角度
// 0, 0, 0, 1 代表右/下/左/上 // offset 范围0-1 表示什么时候开始使用对应颜色 color: new echarts.graphic.LinearGradient( 0, ...
- echarts叠加3D立体柱状图
效果图: 实现代码: var xData = ["项目1", "项目2", "项目3", "项目4", "项目 ...
- Echarts实现环形图的渐变颜色效果
已经封装好的环形图组件 直接在要用的vue文件中引用: <circleChart:id="chart4.id":width="chart4.width": ...
- 绘制3D Echarts地图 饼图 堆叠柱状图
绘制3D Echarts 目前在项目中遇到过的3D echarts为: 1.3D饼图(圆环图) 2.3D区域地图 3.3D堆叠柱状图. 1.echarts + echarts-gl => 绘制3 ...
- 【SeeMusic】音符方块颜色设置 ( 单一颜色设置 | 多彩音符设置 | 定时变色设置 | 渐变颜色 | 分轨道提示 )
SeeMusic 系列文章目录 [SeeMusic]下载安装并注册 SeeMusic 软件 [SeeMusic]购买付费版本 ( 进入购买页面 | 购买流程 ) [SeeMusic]创建 SeeMus ...
- Tableau实用小技巧之——红绿色字体颜色设置
想要在表格中为某列添加正负红绿标识怎么办? Excel的条件格式能够快速简单的为某列数字添加上红绿标识.要在Tableau中实现这个效果,也并不复杂.这次探信君和大家分享在Tableau中为表格数字标 ...
最新文章
- 免费报名 | WPS专家教你文本分类在企业中的应用实践
- 什么是 WMI？From MSDN
- boost::variant2模块实现默认构造相关的测试程序
- Martix工作室考核题 —— 打印九九乘法表
- 软件项目送上门来了，还要学会说不，接了项目拿了定金噩梦才刚刚开始
- 计算机科学中的逻辑学术,简述逻辑学在计算机科学中的应用
- TortoiseGit上传代码报错error:1407742E
- pytorch安装换源ubuntu_PyTorch入门之PyTorch的安装
- 网页打印和ActiveX控件打印
- php梦网科技短信平台手机短信验证功能实现
- 中央广播电视大学中等专业办公设备使用与维护
- 【ChatGPT】又一款类ChatGPT工具，讯飞星火认知，不用魔法，现在申请马上就能通过
- 计算机视觉那些事 | 深度学习基础篇
- webpack css-loader style-loader scss-loader cssloader模块化
- 在VMware上安装win10
- 如何判断Convex Set（凸集）、Convex Function（凸函数）
- 抖音、火山小视频通信协议加密算法
- 华为p50刷机能用吗华为p40pro怎么刷机解锁华为p50激活设备密码华为p50pro远程解锁华为p50手机能刷机吗华为p50pro刷机教程视频华为p50pro忘记密码
- 木马编程DIY之星号密码查看
- 本地房产公众号项目实操分享