代码如下

<!-- 3D柱状图 -->
<template><div id="bar" style="width:800px;height:800px"></div>
</template><script>
import * as echarts from 'echarts/core';
import { LegendComponent } from 'echarts/components';
import { CustomChart } from 'echarts/charts';
echarts.use([LegendComponent, CustomChart]);
let colorList = ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258']
export default {name: "Bar3D",data() {return {data: [],option: {},}},mounted() {this.data = [{ name: '京哈高速', value: 10 },{ name: '京哈高速1', value: 20 },{ name: '京哈高速2', value: 30 },{ name: '京哈高速3', value: 40 },{ name: '京哈高速4', value: 50 },{ name: '京哈高速5', value: 60 },{ name: '京哈高速6', value: 70 },{ name: '京哈高速7', value: 80 },{ name: '京哈高速8', value: 90 },{ name: '京哈高速9', value: 100 },{ name: '京哈高速10', value: 110 },{ name: '京哈高速11', value: 120 }];// 拼轴显示和数据的数组let xAxisText = [];let dataList = [];this.data.forEach(item => {xAxisText.push(item.name);dataList.push(item.value)})// 从这里开始 创建自定义图形 —— 长方体的正面let MyCubeRect = echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 180,      // 长方体宽度zWidth: 8,      // 阴影折角宽zHeight: 4      // 阴影折角高},buildPath: function (ctx, shape) {console.log(ctx, shape);const api = shape.api;const xAxisPoint = api.coord([shape.xValue, 0]);const p0 = [shape.x, shape.y];const p1 = [shape.x - shape.width / xAxisText.length, shape.y];const p4 = [shape.x + shape.width / xAxisText.length, shape.y];const p2 = [xAxisPoint[0] - shape.width / xAxisText.length, xAxisPoint[1]];const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];ctx.moveTo(p0[0], p0[1]); //0ctx.lineTo(p1[0], p1[1]); //1ctx.lineTo(p2[0], p2[1]); //2ctx.lineTo(p3[0], p3[1]); //3ctx.lineTo(p4[0], p4[1]); //4ctx.lineTo(p0[0], p0[1]); //0ctx.closePath();}})// 创建第二个自定义图形 —— 长方体的上面和侧面let MyCubeShadow = echarts.graphic.extendShape({shape: {x: 0,y: 0,width: 180,zWidth: 8,zHeight: 4},buildPath: function (ctx, shape) {const api = shape.api;const xAxisPoint = api.coord([shape.xValue, 0]);//   const p0 = [shape.x, shape.y];const p1 = [shape.x - shape.width / xAxisText.length, shape.y];const p4 = [shape.x + shape.width / xAxisText.length, shape.y];const p6 = [shape.x + shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];const p7 = [shape.x - shape.width / xAxisText.length + shape.zWidth, shape.y - shape.zHeight];const p3 = [xAxisPoint[0] + shape.width / xAxisText.length, xAxisPoint[1]];const p5 = [xAxisPoint[0] + shape.width / xAxisText.length + shape.zWidth, xAxisPoint[1] - shape.zHeight];ctx.moveTo(p4[0], p4[1]); //4ctx.lineTo(p3[0], p3[1]); //3ctx.lineTo(p5[0], p5[1]); //5ctx.lineTo(p6[0], p6[1]); //6ctx.lineTo(p4[0], p4[1]); //4ctx.moveTo(p4[0], p4[1]); //4ctx.lineTo(p6[0], p6[1]); //6ctx.lineTo(p7[0], p7[1]); //7ctx.lineTo(p1[0], p1[1]); //1ctx.lineTo(p4[0], p4[1]); //4ctx.closePath();}});echarts.graphic.registerShape('MyCubeRect', MyCubeRect);echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow);this.option = {color: ['#33b56a', '#fdcf5c', '#4c90ff', '#fe7b7a', '#69ccf6', '#a38bf8', '#ff9561', '#8cb0ea', '#fe81b4', '#ffb258'],title: {text: '验算路线排行榜',left: 20,top: 20},legend: {show: true,top: 25},grid: {left: '3%',right: '4%',top: '15%',bottom: '3%',containLabel: true},xAxis: {type: 'category',data: xAxisText,// boundaryGap: true,interval: 0,axisLabel: {color: '#333',//  让x轴文字方向为竖向// interval: 0,// formatter: function (value) {//   return value.split('').join('\n')// }}},yAxis: {type: 'value'},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'},},series: [{name: '次数',type: 'custom',renderItem: (params, api) => {let location = api.coord([api.value(0), api.value(1)]);return {type: 'group',children: [{type: 'MyCubeRect',shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1]},style: {fill: colorList[params.dataIndex % colorList.length]},      // api.style()——继承原本的样式}, {type: 'MyCubeShadow',shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1]},style: {fill: colorList[params.dataIndex % colorList.length],text: ''            // 继承原本样式的基础上将label清空 如果不清空生成的图上会显示两个重叠的label}}]}},// stack: '总量1',label: {show: true,position: 'top',color: '#333',formatter: `{c}次`,fontSize: 16,distance: 15},itemStyle: {color: (params) => {// 使每根柱子颜色都不一样 return colorList[params.dataIndex % colorList.length]}},data: dataList}]}this.initEcharts();},methods: {initEcharts() {let myChart = echarts.init(document.getElementById('bar'))myChart.setOption(this.option)}}
}</script>

git地址 echarts集合git地址https://gitee.com/zhangjinhao/echarts

echarts实现平面3D柱状图相关推荐

echarts实现单3D立体柱状图
效果图: 实现代码: function getEcharts3DBar (xAxisData, data, colorType) {var colorArr = [];if (colorType == ...
echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
echarts制作图表同时有3d柱状图与折线图
echarts制作图表同时有3d柱状图与折线图工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...
echarts实现多3D立体柱状图
效果图: 实现代码: // 立体多柱状图 function getSolidOption(data1, data2, data3) {// 月份坐标轴var nowMonth = new Date() ...
echarts 3d柱状图
3d柱状图主要是创建左右两个面,也就是两个柱子,左右两个面颜色稍微要有点不一样,形成一点点对比就行,然后上下用 type: "pictorialBar" 象形柱图来实现底部和顶部的 ...
Echarts定制化组件展示网站（包括3d饼环图，3d柱状图，三维柱状图，水滴图）
Echarts官方的定制化组件展示网站makeapie.com已经关闭了,上面有许多定制的组件作品. 比如3d饼环图,3d柱状图,三维柱状图,水滴图等等. 找到了可替代的chartsdev.c ...
如何使用Echarts来绘制3d效果的柱状图
最近在工作上需要使用Echarts中绘制3d效果的柱状图,在网上中大概搜索过来,终于把3d效果的柱状图给绘制出来,代码如下: option = {tooltip: {trigger: 'axis',a ...
绘制3D Echarts地图饼图堆叠柱状图
绘制3D Echarts 目前在项目中遇到过的3D echarts为: 1.3D饼图(圆环图) 2.3D区域地图 3.3D堆叠柱状图. 1.echarts + echarts-gl => 绘制3 ...
echarts——实现3D地图+3D柱状图效果——粗糙代码记录——技能提升
最近看到同事在弄下面的这个图,这个图是从网上看到的,是某个网站的收费项目: 收费模板:￥29.9元购买,且必须是高级版+尊享版才能够购买这个... 死贵!!! 所以,最后的决定是通过echarts中的 ...
Echarts-实现3D柱状图显示，并单个柱子变色
效果如下: <!DOCTYPE html> <html><head><meta charset="utf-8" /><titl ...

echarts实现平面3D柱状图

注意实现版本

代码如下

git地址 echarts集合git地址https://gitee.com/zhangjinhao/echarts

echarts实现平面3D柱状图相关推荐

最新文章

热门文章