echarts叠加3D立体柱状图

效果图：

实现代码：

var xData = ["项目1", "项目2", "项目3", "项目4", "项目5", "项目6"];
// 计划数据数组
var planData = [320, 302, 301, 334, 390, 0];
// 完成数据数组
var completeData = [320, 132, 101, 0, 90, 0];
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: ["计划", "完成"],},grid: {left: "3%", //图表距边框的距离right: "3%",top: "15%",bottom: "5%",containLabel: true,},xAxis: {data: xData,axisTick: {show: false,},},yAxis: {axisTick: {show: false,},axisLine: {show: false,},axisLabel: {show: false,},},series: [{z: 1,name: "计划",type: "bar",barWidth: barWidth,stack: "总量",color: color[0],data: otherData,},{z: 2,name: "完成",type: "bar",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,},},],};

echarts叠加3D立体柱状图相关推荐

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实现单3D立体柱状图
效果图: 实现代码: function getEcharts3DBar (xAxisData, data, colorType) {var colorArr = [];if (colorType == ...
echarts实现多3D立体柱状图
效果图: 实现代码: // 立体多柱状图 function getSolidOption(data1, data2, data3) {// 月份坐标轴var nowMonth = new Date() ...
Echarts 3D立体柱状图(源码+例图)
Echarts 3D立体柱状图,3D长方体柱状图,直接cope源码可用(源码+例图) 废话不多说,直接上代码!!! // HTML 代码 <div id="litiBar" ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
通过Echarts怎样实现立体柱状图
前言大家好,我是梁木由.之前在做大屏可视化项目时,UI设计了一个立体形状的柱状图,根据之前做的一些图表的项目没有能复用的,没有做过这种立体形状的图表,打开echarts也没看到有相关的demo,看下 ...
echarts怎么实现立体柱状图_Vue中使用Echarts实现立体柱状图（长方体）
预览: 代码: 页面部分: CSS部分: .roadnum-all { width: 100%; height: 100%; /*填满父级容器*/ } JS部分: import echarts fro ...
【Echarts系列】—— 实现电池图、3D立体圆形柱状图
1.电池图 const chartInstance = this.$echarts.init(this.$refs.bar) const xAxisData = ['Mon', 'Tue', 'Wed ...

echarts叠加3D立体柱状图

echarts叠加3D立体柱状图相关推荐

最新文章

热门文章