效果如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>模拟3D柱状图+渐变色柱子</title><scripttype="text/javascript"src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script></head><body><div id="bar" style="width: 1000px; height: 500px"></div><script type="text/javascript">let myBarChart = echarts.init(document.getElementById('bar'))// 得到的数据let seriesData1 = [{name: '国君',value: 20,},{name: '中信',value: 100,},{name: '中金',value: 50,},{name: '华泰',value: 44,},{name: '海通',value: 12,},]// 柱子降序排列seriesData1.sort((a, b) => b.value - a.value)console.log(seriesData1)// x轴证券公司名称let xData = []seriesData1.forEach((item) => {xData.push(item.name)})// 数据let seriesData = []seriesData1.forEach((item) => {seriesData.push(item.value)})// 颜色组let linearArr = ['#4D89FF','#84BEFF','#3C6CCC','#FFA95D','#FF7F0E','#CC650B','#E46F07',]// 绘制左侧面const offsetX = 10,sliderWidth = 7,offsetTick = 10const CubeLeft = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {// shape是从custom传入的const api = shape.apiconst xAxisPoint = api.coord([shape.xValue, 0])const c0 = [shape.x - offsetTick, shape.y]const c1 = [shape.x - offsetTick + offsetX, shape.y]const c2 = [xAxisPoint[0] - offsetTick + offsetX, xAxisPoint[1]]const c3 = [xAxisPoint[0] - offsetTick, xAxisPoint[1]]ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()},})// 绘制右侧面const CubeRight = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const api = shape.apiconst xAxisPoint = api.coord([shape.xValue, 0])const c1 = [shape.x - offsetTick + offsetX, shape.y]const c2 = [shape.x - offsetTick + offsetX + sliderWidth,shape.y - sliderWidth,]const c3 = [xAxisPoint[0] - offsetTick + offsetX + sliderWidth,xAxisPoint[1] - sliderWidth + 4,]const c4 = [shape.x - offsetTick + offsetX, xAxisPoint[1]]ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()},})// 绘制顶面const CubeTop = echarts.graphic.extendShape({shape: {x: 0,y: 0,},buildPath: function (ctx, shape) {const c1 = [shape.x - offsetTick, shape.y]const c2 = [shape.x - offsetTick + offsetX, shape.y] // 右点const c3 = [shape.x - offsetTick + offsetX + sliderWidth,shape.y - sliderWidth,]const c4 = [shape.x - offsetTick + sliderWidth, shape.y - sliderWidth]ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).lineTo(c1[0], c1[1]).closePath()},})// 注册三个面图形echarts.graphic.registerShape('CubeLeft', CubeLeft)echarts.graphic.registerShape('CubeRight', CubeRight)echarts.graphic.registerShape('CubeTop', CubeTop)option = {xAxis: {axisTick: {// 不显示坐标刻度show: false,},axisLine: {show: false, // 不显示坐标轴线},data: xData,},yAxis: {type: 'value',// 不显示网格splitLine: {show: false,},},series: [{type: 'custom',data: seriesData,itemStyle: {shadowColor: '#000',shadowBlur: 100,},renderItem: function (params, api) {let location = api.coord([api.value(0), api.value(1)])console.log(seriesData[params.dataIndex])return {type: 'group',children: [// 柱子前面{type: 'CubeLeft',// shape 属性描述了这个矩形的像素位置和大小shape: {api,xValue: api.value(0), //表示取出当前 dataItem 中第一个维度的数值yValue: api.value(0),x: location[0],y: location[1],},style: {//柱子阴影shadowColor:xData[params.dataIndex] === '海通'? '#FF7F0E': '#8DD0FA',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 7,// 颜色fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color:xData[params.dataIndex] === '海通'? linearArr[4]: linearArr[0],},{offset: 1,color:xData[params.dataIndex] === '海通'? linearArr[3]: linearArr[1],},]),},},// 柱子侧面{type: 'CubeRight',shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],},style: {//柱子阴影shadowColor:xData[params.dataIndex] === '海通'? '#FF7F0E': '#8DD0FA',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 7,//颜色fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color:xData[params.dataIndex] === '海通'? linearArr[6]: linearArr[2],},{offset: 1,color:xData[params.dataIndex] === '海通'? linearArr[5]: linearArr[2],},]), //平面颜色},},// 柱子顶部{type: 'CubeTop',shape: {api,xValue: api.value(0),yValue: api.value(1),x: location[0],y: location[1],},style: {//柱子阴影shadowColor:xData[params.dataIndex] === '海通'? '#FF7F0E': '#8DD0FA',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 7,fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color:xData[params.dataIndex] === '海通'? linearArr[4]: linearArr[0],},{offset: 1,color:xData[params.dataIndex] === '海通'? linearArr[3]: linearArr[1],},]), //平面颜色},},],}},},],}myBarChart.setOption(option)</script></body>
</html>

Echarts-实现3D柱状图显示，并单个柱子变色相关推荐

echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
echarts自定义renderItem柱状图，每个系列柱子数不一样
话不多说,先上图业务需求是,在[前期库存中],显示四年的数量:后面的1-12月每个系列中最多显示两个柱子. 在echarts官方实例中,系列的数量是由 series 数组中的数量决定的,也就是说该数 ...
在vue中使用Echarts的3D柱状图
该文章为记录,避免再次踩坑安装所需依赖版本: "echarts": "^4.9.0", "echarts-gl": "^1.1. ...
echarts动态渲染柱状图背景颜色以及顶部数值
第一种单个柱子变色众所周知柱状图的背景色在series下的 itemStyle 的color下修改不同数据让每个柱状图背景颜色不同这个时候就需要自定义所以我在color后跟了一个箭头 ...
echarts 3d柱状图
3d柱状图主要是创建左右两个面,也就是两个柱子,左右两个面颜色稍微要有点不一样,形成一点点对比就行,然后上下用 type: "pictorialBar" 象形柱图来实现底部和顶部的 ...
echarts——实现3D地图+3D柱状图效果——粗糙代码记录——技能提升
最近看到同事在弄下面的这个图,这个图是从网上看到的,是某个网站的收费项目: 收费模板:￥29.9元购买,且必须是高级版+尊享版才能够购买这个... 死贵!!! 所以,最后的决定是通过echarts中的 ...
《前端》echarts排行榜，类目名字在柱子上方全部显示，前三名序号使用自定义图片背景--什么鬼待处理
echarts排行榜,类目名字在柱子上方全部显示,前三名序号使用自定义图片背景https://blog.csdn.net/orangeverity/article/details/107160849 ...
c++ 显示三维散点图_【无机纳米材料科研制图——OriginLab 0210】Origin多组柱状图3D柱状图及3D散点图...
此篇,我们来分享Origin绘制多组柱状图.立体柱状图和三维散点图. 一.多组柱状图 1)准备数据. 准备数据,并点击Plot-->Column/Bar/Pie-->Column进行绘制. ...
echarts制作图表同时有3d柱状图与折线图
echarts制作图表同时有3d柱状图与折线图工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...

Echarts-实现3D柱状图显示，并单个柱子变色

效果如下：

Echarts-实现3D柱状图显示，并单个柱子变色相关推荐

最新文章

热门文章