在 vue2 中实现 echarts 立体方形柱状图及立体圆柱

本文主要是介绍在 vue2 中实现 echarts 立体方形柱状图及立体圆柱,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、在做大屏项目时,为了页面不显得单调,有时设计会设计些立体的柱状图,前几天做大屏刚好遇到,记录一下。echarts本身没有配置直接配置立体图,立体图实质是三个图形合并堆积形成的视觉效果,分别是上面的盖,中间主体和下面的底,再配合中间主体的渐变颜色而实现。本文默认都是使用过echarts的,常规项不赘述,只看option的配置项,先上效果。

2、立体方块图 

   pdChartOption(){let yList = [55,69,48,20,71]let xData = ['20240901','20240902','20240903','20240904','20240905'];let y2List = [20,15,10,18,16]let yAndy2 = [75,84,58,38,87]let indexList = [1,3]let that = thislet color = ["#CC1CAA","#8D67FF","#00FFFF","#48DE13","#FFC516","#DC3E14","#8E16F8",];let dom = 300;let barWidth = 25; //设置柱子宽度let colors = [];colors.push({type: "linear",x: 0,x2: 1,y: 0,y2: 0,colorStops: [{offset: 0,color: "#608efa", // 最上边},{offset: 0.5,color: "#5886f7", // 中间过渡},{offset: 0.5,color: "#5886f7cc", // 中间过渡},{offset: 1,color: "#2656f4", //下边},],});colors.push({type: "linear",x: 0,x2: 1,y: 0,y2: 0,colorStops: [{offset: 0,color: "#fe8686", // 最上边},{offset: 0.5,color: "#fe5858", // 中间过渡},{offset: 0.5,color: "#fe5858cc", // 中间过渡},{offset: 1,color: "#fe0b0c", //下边},],});colors.push({type: "linear",x: 0,x2: 1,y: 0,y2: 0,colorStops: [{offset: 0,color: "#3ace5f", // 最上边},{offset: 0.5,color: "#22b146", // 中间过渡},{offset: 0.5,color: "#22b146cc", // 中间过渡},{offset: 1,color: "#1aa83e", //下边},],});let option = {// backgroundColor: "#010d3a", //背景颜色//提示框tooltip: {trigger: "axis",formatter: function (params) {let count = 0indexList.forEach( e => {if (params[0].dataIndex == e) {count ++} }) //用来判断%数值的正负,显示红色还是绿色,下同,此处是判断显示提示框的 ‘+’‘-’号return `<div style="display:flex;"><div style="margin-right:.3125rem;">${params[0].name} : </div><div>${params[0].value} </br>${count > 0 ? '-':''} ${params[1].value}%</div></div>`},axisPointer: {//坐标轴指示器,坐标轴触发有效type: "shadow", // 默认为直线,可选为:'line' | 'shadow'},},/**区域位置*/grid: {left: "10%",right: "5%",top: "10%",bottom: "18%",},//X轴xAxis: {data: xData,type: "category",axisLine: {show: false,lineStyle: {color: "rgba(0,0,0,1)",shadowColor: "rgba(0,0,0,1)",shadowOffsetX: "20",},symbol: ["none", "arrow"],},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {color: "#000",margin: 10, //x轴字离x轴的距离fontSize: 10,interval: 0, //使x轴文字显示全rotate: 0,},},yAxis: [{show: true,splitNumber: 4,axisLine: {show: false,},axisTick:{show:false,},splitLine: {show: true,lineStyle: {type: "dashed",color: "#a6d7ff",},},axisLabel: {color: "#000",margin: 10,fontSize: 12,},},{  type:'value',position: 'right',axisLabel: { //y轴设置为%show: false,interval: 'auto',formatter: '{value} %',},axisTick:{show:false,},axisLine: {show:false},splitLine: {show: false,lineStyle: {color:'#B7D0FF',type:'dashed'},},},],series: [{type: "bar",stack: 'pd',large: true,yAxisIndex: 0,barWidth: barWidth,showBackground: false, //显示柱子的背景颜色itemStyle: {normal: {color: function (params) {return colors[0];},},},label: {show: false,position: [-8, 0],color: "#6587f7",fontSize: 14,fontStyle: "bold",align: "center",},data: yList,},{type: "bar",stack: 'pd',large: true,yAxisIndex: 1,barWidth: barWidth,showBackground: false, //显示柱子的背景颜色itemStyle: {normal: {color: function (params) {let count = 0indexList.forEach( e => {if (params.dataIndex == e) {count ++} })if (count > 0 ) {return colors[2];} else {return colors[1];}},},},label: {show: true,position: [10, -20],//   color: "#fe090a",color:function (params) {let count = 0indexList.forEach( e => {if (params.dataIndex == e) {count ++} })if (count > 0 ) {return "#3ed565";} else {return "#fe090a";}},fontSize: 12,align: "center",formatter: function (params) {let count = 0indexList.forEach( e => {if (params.dataIndex == e) {count ++} })if (count > 0 ) {return '-' + params.value + '%';} else {return '+' + params.value + '%';}},},data: y2List,},{//下面的顶z: 2,type: "pictorialBar",data: yList,symbol: "diamond",symbolOffset: [0, "50%"],symbolSize: [barWidth, barWidth * 0.5],itemStyle: {normal: {color: function (params) {return colors[0];},},},},{//下面的顶z: 4,type: "pictorialBar",data: yList,symbolPosition: "end",symbol: "diamond",symbolOffset: [0, -6],symbolSize: [barWidth, barWidth * 0.5],itemStyle: {normal: {color: function (params) {let count = 0indexList.forEach( e => {if (params.dataIndex == e) {count ++} })if (count > 0 ) {return colors[2];} else {return colors[1];}},},},},{//上面的顶z: 5,type: "pictorialBar",symbolPosition: "end",data: yAndy2,symbol: "diamond",symbolOffset: [0,-6],symbolSize: [barWidth, barWidth * 0.5],itemStyle: {normal: {borderWidth: 0,color: function (params) {let count = 0indexList.forEach( e => {if (params.dataIndex == e) {count ++} })if (count > 0 ) {return colors[2];} else {return colors[1];}},},},},],dataZoom: [ //数据量大,横向排不下可开启缩放和左右滑动显示{show: true,height: 10,xAxisIndex: [0],bottom: 5,start: 0, //默认开始点end: 7, //默认结束点,即一屏显示的数据项个数handleSize: "100%",handleStyle: {color: "#d3dee5",},textStyle: {color: "#fff",},borderColor: "#90979c",},{type: "inside",show: true,height: 10,start: 1,end: 35,},],};return option;},

3、立体圆柱形

     ydChartOption(){let currData = [100,120,115,160,80] let perData = [56,80,77,70,65]let rateData = [10,5,8,12,6]let that = this;let option = {color:['#25af00'],tooltip: {trigger: 'axis',formatter: function (params) {return `<div> <div>${params[0].name}</div><div>当前:${params[0].value}</div><div>环比:${params[1].value}</div><div>涨幅:${params[2].value}%</div></div>`},},grid:{top:"30",left:'40',right:"45",bottom:"20",},xAxis: {data: ['20240901','20240902','20240903','20240904','20240905'],axisTick:{show:false,},axisLine: {lineStyle: {color: '#B7D0FF'}},axisLabel: {show: true, color:'#252525',fontSize:11,},},yAxis: [{  type:'value',axisLabel: {show: true,},axisTick:{show:false,},axisLine: {show:false},splitLine: {show: false,lineStyle: {color:'#B7D0FF',type:'dashed'},},},{  type:'value',position: 'right',axisLabel: { //y轴设置为%show: true,interval: 'auto',formatter: '{value} %',},axisTick:{show:false,},axisLine: {show:false},splitLine: {show: true,lineStyle: {color:'#B7D0FF',type:'dashed'},},},],series: [{name:'当前',data: currData,type: 'bar',barWidth:'25%',yAxisIndex: 0,smooth: true,barWidth: 16,lineStyle: {normal: {color:'#0060FF',width: 4,}},itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#7ab1ff' },{ offset: 1, color: '#2b70ef' }]),},},{name:'环比',data: perData,type: 'bar',barWidth:'25%',yAxisIndex: 0,smooth: true,barWidth: 16,lineStyle: {normal: {color:'rgb(0,187,84)',width: 4,}},itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ffba81' },{ offset: 1, color: '#fe6f04' }]),},},{name:'涨幅',data: rateData,type: 'line',yAxisIndex: 1,smooth: false,showSymbol:true,lineStyle: {normal: {color:'#25af00',width: 2,}},},//以下代码为柱状图上下的盖{//下面的底z: 3,type: "pictorialBar",data: currData,// symbol: "diamond",symbolOffset: [-10.5, 5],symbolSize: [16, 8],itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#7ab1ff' },{ offset: 1, color: '#2b70ef' }]),},},},{//上面的顶z: 4,type: "pictorialBar",symbolPosition: "end",data: currData,// symbol: "diamond",symbolOffset: [-10.5, -5],symbolSize: [16, 8],itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#7ab1ff' },{ offset: 1, color: '#2b70ef' }]),},},},{//下面的底z: 5,type: "pictorialBar",data: perData,// symbol: "diamond",symbolOffset: [10.5, 5],symbolSize: [16, 8],itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ffba81' },{ offset: 1, color: '#fe6f04' }]),},},},{//上面的顶z: 6,type: "pictorialBar",symbolPosition: "end",data: perData,// symbol: "diamond",symbolOffset: [10.5, -5],symbolSize: [16, 8],itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#ffba81' },{ offset: 1, color: '#fe6f04' }]),},},},],legend: [{data:['当前','环比','涨幅'],show: true,orient: 'horizontal',right: 'left',top: 0,}]};return option;}

这篇关于在 vue2 中实现 echarts 立体方形柱状图及立体圆柱的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1139231

相关文章

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Redis消息队列实现异步秒杀功能

《Redis消息队列实现异步秒杀功能》在高并发场景下,为了提高秒杀业务的性能,可将部分工作交给Redis处理,并通过异步方式执行,Redis提供了多种数据结构来实现消息队列,总结三种,本文详细介绍Re... 目录1 Redis消息队列1.1 List 结构1.2 Pub/Sub 模式1.3 Stream 结

C# Where 泛型约束的实现

《C#Where泛型约束的实现》本文主要介绍了C#Where泛型约束的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录使用的对象约束分类where T : structwhere T : classwhere T : ne

将Java程序打包成EXE文件的实现方式

《将Java程序打包成EXE文件的实现方式》:本文主要介绍将Java程序打包成EXE文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录如何将Java程序编程打包成EXE文件1.准备Java程序2.生成JAR包3.选择并安装打包工具4.配置Launch4

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

MySQL索引的优化之LIKE模糊查询功能实现

《MySQL索引的优化之LIKE模糊查询功能实现》:本文主要介绍MySQL索引的优化之LIKE模糊查询功能实现,本文通过示例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧... 目录一、前缀匹配优化二、后缀匹配优化三、中间匹配优化四、覆盖索引优化五、减少查询范围六、避免通配符开头七、使用外部搜索引擎八、分