在 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

相关文章

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Python实现精确小数计算的完全指南

《Python实现精确小数计算的完全指南》在金融计算、科学实验和工程领域,浮点数精度问题一直是开发者面临的重大挑战,本文将深入解析Python精确小数计算技术体系,感兴趣的小伙伴可以了解一下... 目录引言:小数精度问题的核心挑战一、浮点数精度问题分析1.1 浮点数精度陷阱1.2 浮点数误差来源二、基础解决

Java实现在Word文档中添加文本水印和图片水印的操作指南

《Java实现在Word文档中添加文本水印和图片水印的操作指南》在当今数字时代,文档的自动化处理与安全防护变得尤为重要,无论是为了保护版权、推广品牌,还是为了在文档中加入特定的标识,为Word文档添加... 目录引言Spire.Doc for Java:高效Word文档处理的利器代码实战:使用Java为Wo

Java实现远程执行Shell指令

《Java实现远程执行Shell指令》文章介绍使用JSch在SpringBoot项目中实现远程Shell操作,涵盖环境配置、依赖引入及工具类编写,详解分号和双与号执行多指令的区别... 目录软硬件环境说明编写执行Shell指令的工具类总结jsch(Java Secure Channel)是SSH2的一个纯J

使用Python实现Word文档的自动化对比方案

《使用Python实现Word文档的自动化对比方案》我们经常需要比较两个Word文档的版本差异,无论是合同修订、论文修改还是代码文档更新,人工比对不仅效率低下,还容易遗漏关键改动,下面通过一个实际案例... 目录引言一、使用python-docx库解析文档结构二、使用difflib进行差异比对三、高级对比方

深度解析Python中递归下降解析器的原理与实现

《深度解析Python中递归下降解析器的原理与实现》在编译器设计、配置文件处理和数据转换领域,递归下降解析器是最常用且最直观的解析技术,本文将详细介绍递归下降解析器的原理与实现,感兴趣的小伙伴可以跟随... 目录引言:解析器的核心价值一、递归下降解析器基础1.1 核心概念解析1.2 基本架构二、简单算术表达

QT Creator配置Kit的实现示例

《QTCreator配置Kit的实现示例》本文主要介绍了使用Qt5.12.12与VS2022时,因MSVC编译器版本不匹配及WindowsSDK缺失导致配置错误的问题解决,感兴趣的可以了解一下... 目录0、背景:qt5.12.12+vs2022一、症状:二、原因:(可以跳过,直奔后面的解决方法)三、解决方

MySQL中On duplicate key update的实现示例

《MySQL中Onduplicatekeyupdate的实现示例》ONDUPLICATEKEYUPDATE是一种MySQL的语法,它在插入新数据时,如果遇到唯一键冲突,则会执行更新操作,而不是抛... 目录1/ ON DUPLICATE KEY UPDATE的简介2/ ON DUPLICATE KEY UP

Python中Json和其他类型相互转换的实现示例

《Python中Json和其他类型相互转换的实现示例》本文介绍了在Python中使用json模块实现json数据与dict、object之间的高效转换,包括loads(),load(),dumps()... 项目中经常会用到json格式转为object对象、dict字典格式等。在此做个记录,方便后续用到该方

JWT + 拦截器实现无状态登录系统

《JWT+拦截器实现无状态登录系统》JWT(JSONWebToken)提供了一种无状态的解决方案:用户登录后,服务器返回一个Token,后续请求携带该Token即可完成身份验证,无需服务器存储会话... 目录✅ 引言 一、JWT 是什么? 二、技术选型 三、项目结构 四、核心代码实现4.1 添加依赖(pom