echarts 3d柱状图

3d柱状图主要是创建左右两个面，也就是两个柱子，左右两个面颜色稍微要有点不一样，形成一点点对比就行，然后上下用 type: "pictorialBar" 象形柱图来实现底部和顶部的效果，下面代码可以复制到echarts官网运行，会看到一个渐变到透明的3d柱子

const industryColor = {type: 'linear',x: 1,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: '#6CB5EB'},{offset: 1,color: 'rgba(9,36,83,0.27)'}]
};const industryData = [22, 35, 30, 22, 60, 56];
var option = {backgroundColor: 'rgba(0, 0, 0, 0.6)',animation: false,tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '0%',right: '4%',bottom: '0%',top: '10px',containLabel: true},xAxis: {type: 'category',data: ['种植业', '养殖业', '旅游业', '服务业'],axisLabel: {color: '#E6F7FF'},axisLine: {show: true,lineStyle: {color: 'rgba(255, 255, 2555, 0.1)'}},axisTick: {show: false},animation: false},yAxis: {type: 'value',axisLabel: {color: '#E6F7FF'},splitLine: {show: true,lineStyle: {color: 'rgba(255,255,255,0.2)'}},animation: false},series: [{name: '产业结构',type: 'bar',barWidth: 9,data: industryData,itemStyle: {//柱子左面normal: {// 重要的是color配置：线性渐变， 从上往下color: {type: 'linear',x: 1,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: '#6CB5EB'},{offset: 0.8,color: 'rgba(9, 36, 83, 0.54)'}]}}},tooltip: {show: false}},{name: '产业结构',tooltip: {show: true,padding: 100,position: [-10, '50%'],borderWidth: 100},type: 'bar',barWidth: 13,barCategoryGap: '60%',itemStyle: {//柱子右面normal: {// 重要的是color配置：线性渐变， 从上往下color: industryColor,borderWidth: 0.3,borderColor: 'rgba(9, 36, 83, 0.1)'}},data: industryData,// 间隔为0barGap: 0,z: 5},{z: 10,name: '产业结构',// 这里是柱子的顶部，type: "pictorialBar" 可以自定义图形或者使用内置选项type: 'pictorialBar',symbolPosition: 'end',data: industryData,symbol: 'diamond',symbolOffset: [0, -10],symbolRotate: 90,symbolSize: [3.5, 19.6],itemStyle: {normal: {borderWidth: 0,color: 'rgba(124, 201, 250, 1)'}},tooltip: {show: false}}]
};

普通的3d柱子，可以用一个柱子，做从左到右的渐变。或者用两个柱子，和上面透明渐变一样从上到下渐变

var colorArr = ['#0C628C', '#3887D5', '#2570BB'];
var color = {type: 'linear',x: 0,x2: 1,y: 0,y2: 0,colorStops: [{offset: 0,color: colorArr[0]},{offset: 0.5,color: colorArr[0]},{offset: 0.5,color: colorArr[1]},{offset: 1,color: colorArr[1]}]
};const industryData = [22, 35, 30, 25];
var option = {backgroundColor: 'rgba(0, 0, 0, 0.6)',tooltip: {trigger: 'axis',axisPointer: {type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'}},grid: {left: '0%',right: '4%',bottom: '0%',top: '10px',containLabel: true},xAxis: {type: 'category',data: ['种植业', '养殖业', '旅游业', '服务业'],axisLabel: {color: '#E6F7FF'},axisLine: {show: true,lineStyle: {color: 'rgba(255, 255, 2555, 0.1)'}},axisTick: {show: false}},yAxis: {type: 'value',axisLabel: {color: '#E6F7FF'},splitLine: {show: true,lineStyle: {color: 'rgba(255,255,255,0.2)'}}},series: [{itemStyle: {normal: {// 这里是用一个柱子，从左到右的渐变。也可以用两个柱子做从上往下的渐变，和上面的透明渐变一样用法color}},data: industryData,type: 'bar',barWidth: 18,z: 2,name: '产业结构'},{z: 1,name: '产业结构',// 柱子底部type: 'pictorialBar',data: industryData,symbol: 'diamond',symbolOffset: [0, 4],symbolSize: [20, 8],itemStyle: {normal: {color: color}},tooltip: {show: false}},{z: 3,name: '产业结构',type: 'pictorialBar',// 柱子顶部symbolPosition: 'end',data: industryData,symbol: 'diamond',symbolOffset: [0, -11],symbolRotate: 90,symbolSize: [8, 19],itemStyle: {normal: {borderWidth: 2,color: colorArr[2]}},tooltip: {show: false}}]
};

带阴影的3d柱子，主要是上要创建两个x轴，阴影的x轴要不显示。然后创建两个3d的柱子，阴影的柱子要用xAxisIndex关联上阴影的x轴

const situationColor = {type: 'linear',x: 1,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: '#4EF6F6'},{offset: 0.4,color: '#4EF6F6'},{offset: 1,color: 'rgba(2, 29, 54, 0.78)'}]
};const industryData = [22, 35, 30, 25];
var option = {backgroundColor: 'rgba(0, 0, 0, 0.6)',tooltip: {trigger: 'axis',axisPointer: {// Use axis to trigger tooltiptype: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'}},grid: {left: '0%',right: '4%',bottom: '0%',top: '20px',containLabel: true},// 多个x轴xAxis: [{type: 'category',data: ['7月', '8月', '9月', '10月'],axisLine: {show: false,lineStyle: {color: '#E6F2FE'}},axisTick: {show: false},},// 第二个当作阴影柱子的轴，不显示{type: 'category',data: ['7月', '8月', '9月', '10月'],axisLine: {show: false,lineStyle: {color: '#E6F2FE'}},axisTick: {show: false},show: false}],yAxis: {type: 'value',axisLine: {lineStyle: {color: '#E6F2FE'}},splitLine: {show: true,lineStyle: {color: 'rgba(255,255,255,0.2)'}}},series: [{name: '村名情意',type: 'bar',showSymbol: false,hoverAnimation: false,barWidth: 7,data: industryData,itemStyle: {//实体柱子左面normal: {borderWidth: 0,color: {type: 'linear',x: 1,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: '#267A7B'},{offset: 0.5,color: '#267A7B'},{offset: 1,color: 'rgba(2, 29, 54, 0.7)'}]}}},tooltip: {show: false},z: 3},{name: '村名情意',tooltip: {show: true},type: 'bar',barWidth: 8,itemStyle: {//实体柱子右面normal: {color: situationColor,borderWidth: 0}},data: industryData,barGap: 0,z: 5},{//实体柱子顶部z: 10,name: '村名情意',type: 'pictorialBar',symbolPosition: 'end',data: industryData,symbol: 'diamond',symbolOffset: [0, -8],symbolRotate: 90,symbolSize: [3, 15.5],itemStyle: {normal: {borderWidth: 0,color: '#4EF6F6'}},tooltip: {show: false}},{//实体柱子底部z: 1,name: '村名情意',type: 'pictorialBar',symbolPosition: 'start',data: industryData,symbol: 'diamond',symbolOffset: [0, 7.8],symbolRotate: 90,symbolSize: [5, 15],itemStyle: {normal: {borderWidth: 0,color: 'rgba(2, 29, 54, 0.9)'}}},{//阴影柱子左面name: 'a',// 关联x轴的第二个轴xAxisIndex: 1,type: 'bar',showSymbol: false,hoverAnimation: false,barWidth: 7,// data 要拿到整组数据的最大值data: Array(industryData.length).fill(Math.max(...industryData)),itemStyle: {normal: {borderWidth: 0,color: 'rgba(31, 82, 86, 0.85)',}},tooltip: {show: false},z: 1,},{//阴影柱子右面name: 'a',// 关联x轴的第二个轴xAxisIndex: 1,tooltip: {show: false},type: 'bar',barWidth: 8,itemStyle: {normal: {color: 'rgba(53, 140, 144, 0.9)',borderWidth: 0,}},// data 要拿到整组数据的最大值data: Array(industryData.length).fill(Math.max(...industryData)),z: 1,},{//阴影柱子顶部z: 10,name: 'a',type: 'pictorialBar',symbolPosition: 'end',// data 要拿到整组数据的最大值data: Array(industryData.length).fill(Math.max(...industryData)),symbol: 'diamond',symbolOffset: [0, -8.2],symbolRotate: 90,symbolSize: [3, 15.5],itemStyle: {normal: {borderWidth: 0,color: 'rgba(53, 140, 144, 0.9)'}},tooltip: {show: false}}]
};

有时柱子会带一些图标，也可以用type: "pictorialBar" 象形柱图来实现，比如下图发光的小图标。这里不需要用3d，需要渐变


var option = {backgroundColor: 'rgba(0, 0, 0, 0.6)',tooltip: {trigger: "axis",axisPointer: {type: "shadow",},},grid: {left: "0%",right: "43px",bottom: "0%",top: 0,containLabel: true,},xAxis: {type: "value",show: false,axisLine: {lineStyle: {color: "#E6F2FE",},},},yAxis: {type: "category",data: ["财务公开", "村务公开", "党务公开", "新媒体宣传", "党员在线教育"],axisLine: {show: false,lineStyle: {color: "#E6F2FE",},formatter: "{value} 个",},axisTick: {show: false,},},series: [{itemStyle: {normal: {label: {show: true,position: [340, 0],valueAnimation: true,color: "#01DAEA",formatter: "{c}个",},barBorderRadius: [0, 0, 50, 0],color: {type: "linear",x: 0,y: 0,x2: 1,y2: 1,colorStops: [{offset: 0,color: "#0A74F0", // 0% 处的颜色},{offset: 1,color: "#49EFFF", // 100% 处的颜色},],},},},data: [91, 78, 157, 435, 672],type: "bar",showBackground: true,barWidth: 12,backgroundStyle: {color: "rgba(255, 255, 255, 0.2)",},},{data: [91, 78, 157, 435, 672],type: "pictorialBar",symbolPosition: "end",symbolRotate: 7,// 发光的小图标 这里是base64的形式，也可以用网络图片symbol:"image://data:image/png;base64,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",symbolOffset: [20, 0],symbolSize: [36, 26],z: 10,},],
};

echarts 3d柱状图相关推荐

echarts 3d柱状图(bar3D)默认缩放大小
关键代码: projection: 'perspective', distance: 400 grid3D: {boxWidth: 400,boxDepth: 160,viewControl: {pr ...
【ECharts】柱状图
目录柱状圆角 label显示在圆柱中数值为0不展示0 悬浮显示数据线悬浮柱状渐变色每个柱的颜色单个柱的颜色柱子重叠柱子堆叠柱子背景柱子顶部加入图片效果仿3D柱状图柱状圆角柱子的 ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
echarts制作图表同时有3d柱状图与折线图
echarts制作图表同时有3d柱状图与折线图工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...
Echarts 3D立体柱状图(源码+例图)
Echarts 3D立体柱状图,3D长方体柱状图,直接cope源码可用(源码+例图) 废话不多说,直接上代码!!! // HTML 代码 <div id="litiBar" ...
Echarts定制化组件展示网站（包括3d饼环图，3d柱状图，三维柱状图，水滴图）
Echarts官方的定制化组件展示网站makeapie.com已经关闭了,上面有许多定制的组件作品. 比如3d饼环图,3d柱状图,三维柱状图,水滴图等等. 找到了可替代的chartsdev.c ...
Echars象形图、3D柱状图基本实现
象形图柱引入图片 echars引入图片需要用base64转码转码地址:http://tool.chinaz.com/tools/imgtobase/ 转码后ctrl+A全选, 把地址粘贴到&quo ...
Echarts-实现3D柱状图显示，并单个柱子变色
效果如下: <!DOCTYPE html> <html><head><meta charset="utf-8" /><titl ...
eacharts和eacharts-gl、3d饼图、3d柱状图加折线图、下载gl报错解决
eacharts-gl下载时版本一定要和eacharts版本对应.否则不出效果!!目前已知可以生效有: 第一种1: npm install echarts@5.1.2 --save npm insta ...

echarts 3d柱状图

更多echarts图表，可以参考echarts热门组件和ppchart

echarts 3d柱状图相关推荐

最新文章

热门文章