实现目标展示

1、双柱图实现步骤

内容分析

此处采用的双柱样式，来源于链接: 点击此处跳转。
我对其进行了样式的修改，得到了如图所示的结果。这个图本身组成部分多样，一组双柱图（蓝绿柱子），由10个部分构成，解释其中一个（蓝色），一个由3个菱形，2个直边构成。3个菱形为上、中、底部，2个直边为背景虚化的柱子，和蓝颜色柱子，绿色柱子同理。

代码实现

<script lang="ts" setup>
import  * as echarts from 'echarts';
import {onMounted} from "vue";onMounted(() => {getEcharts3DBar();
});function getEcharts3DBar() {var chartDom = document.getElementById('chartOne');var myChart = echarts.init(chartDom);// 计划开工项目var zzx1 = [20, 19, 40];var zx = zzx1.map((item) => {return 1000 - item;});// 累积开工项目var wgx1 = [10, 1, 90];var wg = wgx1.map((item) => {return 1000 - item;});var barWidth = 40;let option = {tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "shadow", // 默认为直线，可选为：'line' | 'shadow'},formatter: function(e) {// console.log(e);var str =e[6].axisValue +"<br>" +"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +e[6].color.colorStops[0].color +";'></span>" +"" +e[6].seriesName +" : " +e[6].value +"个<br>" +"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" +e[8].color.colorStops[0].color +";'></span>" +"" +e[8].seriesName +" : " +e[8].value +"个";return str;},},//图像与周边距离的调整grid: {left: "2%",right: "4%",bottom: "4%",top: "20%",containLabel: true,},//图例的调整legend: {data: ["计划开工项目", "累积开工项目"],show:true,textStyle: {color: "#00ffff",fontSize: 14,},itemWidth: 12,itemHeight: 10,// itemGap: 35,color: "#242424",selectedMode: true,},//x轴调整xAxis: {type: "category",data: ["高速公路","国道干线","农村公路",],axisLine: {show: true,lineStyle: {color: "#15205B",},},axisTick: {show: false,},axisLabel: {textStyle: {fontFamily: "Microsoft YaHei",color: "#fff", // x轴颜色fontWeight: "400",fontSize: "14",},interval: 0, //标签设置为全部显示margin: 15,lineHeight: 15,},},//y轴调整yAxis: {type: "value",axisLine: {show: false,lineStyle: {color: "#15205B",},},splitLine: {show: false,lineStyle: {color: "rgba(135,140,147,1)", //左侧显示线},},axisTick: {show: false,},axisLabel: {show:false,},},series: [// 计划产值中间正方形{type: "pictorialBar",symbol: "diamond",//设置样式为菱形symbolSize: [barWidth, 8],//设置菱形的宽高symbolOffset: [-24, -4],//设置菱形的位置偏移量symbolPosition: "end",//设置菱形位置z: 12,color: "#3185FF",data: zzx1,},// 实际产值中间正方形{type: "pictorialBar",symbol: "diamond",symbolSize: [barWidth, 8],symbolOffset: [24, -4],symbolPosition: "end",z: 12,color: "#1BCC98",data: wgx1,},//  计划产值底部正方形{type: "pictorialBar",symbol: "diamond",symbolSize: [barWidth, 8],symbolOffset: [-24, 4],z: 12,color: "#161D6E",data: zzx1,},// 实际产值底部正方形{name: "",type: "pictorialBar",symbol: "diamond",symbolSize: [barWidth, 8],symbolOffset: [26, 4],color: "#151D6E",z: 12,data: wgx1,},// 计划产值上部正方形{data: [100, 100, 100, 100, 100],type: "pictorialBar",symbol: "diamond",symbolSize: [barWidth, 8],symbolOffset: [-24, -4],color: "#283190",symbolPosition: "end",},// 实际产值上部正方形{data: [100, 100, 100, 100, 100],type: "pictorialBar",symbol: "diamond",symbolSize: [barWidth, 8],symbolOffset: [24, -4],color: "#283190",symbolPosition: "end",},// 计划产值进度柱子{name: "计划开工项目",type: "bar",barWidth: barWidth,// zlevel: 2,stack: "1",itemStyle: {//这一串就是图形渐变色的来源normal: {opacity: 0.7,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#2863D2",},{offset: 1,color: "#161D6E",},]),barBorderRadius: 0,},},label: {show: true,position: ["-18", "-18"],color: "#00f8ff",fontSize: 12,},data: zzx1,},// 计划产值底部柱子{data: zx,type: "bar",barWidth: barWidth,stack: "1",zlevel: -1,itemStyle: {normal: { opacity: 0.7,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#182075",},{offset: 1,color: "#182075",},]),barBorderRadius: 0,},},},// 实际产值进度柱子{name: "累积开工项目",type: "bar",stack: "2",barWidth: barWidth,itemStyle: {normal: {opacity: 0.7,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#19958B",},{offset: 1,color: "#151B6F",},]),barBorderRadius: 0,},},label: {show: true,position: ["18", "-18"],color: "#00f8ff",fontSize: 12,},data: wgx1,},// 实际产值底部柱子{data: wg,type: "bar",barWidth: barWidth,stack: "2",zlevel: -1,itemStyle: {normal: {opacity: 0.7,color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#182075",},{offset: 1,color: "#182075",},]),barBorderRadius: 0,},},},],};option && myChart.setOption(option);
}</script>

2、堆叠图实现步骤

内容分析

实现一个这样的3D图，其实，是利用了5个部分进行拼接而成。3个底部的菱形，2个直边。其中，直边的图形利用两种颜色，深浅不一进行渲染，出现了类似于直边的效果。菱形也不是纯色的，而是采用了分段的染色，这些部分都会在接下来的代码之中标明。

代码实现

<script lang="ts" setup>
import  * as echarts from 'echarts';
import {onMounted} from "vue";onMounted(() => {create();
});function create(){var chartDom = document.getElementById('chart');var myChart = echarts.init(chartDom);var xData = ["国道", "省道", "县道", "乡道", "村道"];
// 计划数据数组var planData = [328, 1488, 360, 22, 922];
// 完成数据数组var completeData = [320, 132, 101, 0, 90];var color = [{type: "linear",x: 0,x2: 1,y: 0,y2: 0,//给菱形上色colorStops: [{offset: 0,color: "#54a2d3",},{offset: 0.5,color: "#54a2d3",},{offset: 0.5,color: "#7ed1e3",},{offset: 1,color: "#7ed1e3",},],},{type: "linear",x: 0,x2: 1,y: 0,y2: 0,//给菱形上色colorStops: [{offset: 0,color: "#a3a418",},{offset: 0.5,color: "#a3a418",},{offset: 0.5,color: "#cdbf38",},{offset: 1,color: "#cdbf38",},],},];var barWidth = 30;var constData = [];var showData = [];var otherData = [];//计算堆叠数据为多少for (var i = 0; i < planData.length; i++) {planData[i] = Number(planData[i]);completeData[i] = Number(completeData[i]);otherData[i] = planData[i] - completeData[i];if (planData[i] <= 0) {constData.push(0);showData.push({value: 1,itemStyle: {normal: {borderColor: "rgba(0,0,0,0)",borderWidth: 2,color: "rgba(0,0,0,0)",},},});} else {if (completeData[i] == planData[i]) {constData.push({value: 1,itemStyle: {normal: {color: color[1],},},});} else {constData.push(1);}if (completeData[i] > 0) {showData.push({value: planData[i],itemStyle: {normal: {borderColor: "#e9d86c",borderWidth: 2,color: "#e9d86c",},},});} else {showData.push({value: planData[i],itemStyle: {normal: {borderColor: "#89e3ec",borderWidth: 2,color: "#89e3ec",},},});}}}var option = {//调整光标移入，展示数据的样式tooltip: {trigger: "axis",formatter: function (params) {return params[0].axisValue + "：" +"<br/>计划：" + planData[params[0].dataIndex] +"<br/>完成：" + completeData[params[0].dataIndex];},},//调整图例legend: {data: ["计划", "完成"],show:false},//调整图表距边框的距离grid: {left: "3%", right: "3%",top: "15%",bottom: "5%",containLabel: true,},// 调整图像x轴xAxis: {data: xData,axisTick: {show: false,},axisLabel: {textStyle: {fontFamily: "Microsoft YaHei",color: "#fff", fontWeight: "400",fontSize: "14",},},},//调整图像y轴yAxis: {axisTick: {show: false,},axisLine: {show: false,},axisLabel: {show: false,},splitLine: {show:true,lineStyle: {color: '#FFFFFF',width: 1,opacity: 0.11,}}},//图像的关键显示部分，此处5个拼接一个堆叠柱子，注意此处的调整series: [{z: 1,name: "计划",type: "bar",stack:'1',barWidth: barWidth,// stack: "总量",color: color[0],data: otherData,},{z: 2,name: "完成",type: "bar",stack:'1',barWidth: barWidth,// stack: "总量",color: color[1],data: completeData,},//柱形底部{z: 3,name: "项目",type: "pictorialBar",data: constData,symbol: "diamond",symbolOffset: ["0%", "50%"],symbolSize: [barWidth, 10],itemStyle: {normal: {color: color[0],},},tooltip: {show: false,},},//某个柱形的底部{z: 4,name: "项目",type: "pictorialBar",data: otherData,symbol: "diamond",symbolPosition: "end",symbolOffset: ["0%", "-50%"],symbolSize: [barWidth, 10],itemStyle: {normal: {color: color[1],},},tooltip: {show: false,},},{z: 5,name: "项目",type: "pictorialBar",symbolPosition: "end",data: showData,symbol: "diamond",symbolOffset: ["0%", "-50%"],symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],tooltip: {show: false,},itemStyle:{normal: {label: {formatter: "{c}",show: true,position: "top",textStyle: {fontWeight: 400,fontSize: "13",color: "#F2F7FA",lineHeight:20,},},}}},],};option && myChart.setOption(option);
}</script>

最后吐槽，我原本想实现的柱形图，是上方为平行四边形的类型的柱形图，但发现，Echarts自带的图形中，没有平行四边形，得自己画或者去官方那里放入图片进行代码的生成导出，于是放弃，使用这种网上查找的大多数人使用的菱形进行操作。

内容错误之处欢迎指正，共同进步！

如果内容有帮助，请点赞吱个声呗~

Echarts 3D柱形图和3D堆叠柱形图实现相关推荐

matplotlib画图：柱形图、堆叠柱形图、分组柱形图。
matplotlib画图:柱形图.堆叠柱形图.分组柱形图. 分组柱形图与堆叠柱形图的区别堆叠柱形图:有助于帮助我们观察部分与整体之间的关系.如:2020年每个区域每个季度的销售情况. 分组柱形图:当 ...
echarts 堆叠柱状图3d效果_【python可视化】：pyecharts：柱形图、堆叠条形图、极坐标堆叠柱形图、极坐标堆叠分类条形图...
•本文字数:约1000字•阅读时长:约3分钟•难度:2颗星官方介绍:pyecharts 是一个用于生成 Echarts 图表的类库.Echarts 是百度开源的一个数据可视化 JS 库.用 Echa ...
R语言绘制带聚类树的堆叠柱形图
R语言绘制带聚类树的堆叠柱形图聚类树与柱形图结合,即可反映样本或分组间的相似性,又能展示样本内的元素组成信息. 例如下图是一个在扩增子测序微生物群落分析中常见的统计图类型,在测序公司给的报告中通常都 ...
举个栗子！Tableau 技巧（152）：横向对比堆叠柱形图的各部分占比
柱形图因其一目了然的特点,成为最常用的分析图表之一.而堆叠柱形图则可以更清晰地比较某一个维度中不同类型数据之间的差异,也深受分析用户推崇. 很多 Tableau 用户在使用堆叠柱形图时,会遇到这样的问 ...
tableau的动态参数和横向对比堆叠柱形图
利用到的知识点:利用参数实现动态价格带,通过更改字段的计算方式时间横向对比. 这里以价格带分析作为一个例子. 1.添加一个参数:价格带间隔,即价格带计算的步长. 2.添加计算字段:价格带的定义: 3. ...
使用echarts生成漂亮的3D地图
使用echarts生成漂亮的3D地图 echarts是非常好用的图表插件,本文使用echarts来生成一个漂亮的3D地图效果准备资料第三方插件 <script type="tex ...
两年数据对比柱形图_举个栗子！Tableau 技巧（152）：横向对比堆叠柱形图的各部分占比...
柱形图因其一目了然的特点,成为最常用的分析图表之一.而堆叠柱形图则可以更清晰地比较某一个维度中不同类型数据之间的差异,也深受分析用户推崇. 很多 Tableau 用户在使用堆叠柱形图时,会遇到这样的问 ...
html5 堆叠柱状,Highcharts 堆叠柱形图
Highcharts 堆叠柱形图以下实例演示了堆叠柱形图. 我们在前面的章节已经了解了 Highcharts 基本配置语法.接下来让我们来看下其他的配置.在 plotOptions 中添加 stac ...
R统计绘图 | 物种组成堆叠柱形图(绝对/相对丰度)
一.数据准备数据使用的不同处理土壤样品的微生物组成数据,包含物种丰度,分类单元和样本分组数据.此数据为虚构,可用于练习,请不要作他用. # 1.1 设置工作路径 #knitr::opts_knit$ ...

Echarts 3D柱形图和3D堆叠柱形图实现

【Echarts】3D双柱形图、堆叠柱形图实现

实现目标展示

1、双柱图实现步骤

内容分析

代码实现

2、堆叠图实现步骤

内容分析

代码实现

Echarts 3D柱形图和3D堆叠柱形图实现相关推荐

最新文章

热门文章