vue echart 立体柱状图 带阴影

根据一个博主代码改编而来

<template><div class="indexBox"><div id="chart"></div></div>
</template><script  setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import imgsss from "@/assets/imgs/111.png";onMounted(() => {create();
});const colorArr = (arrList, type) => {let returnList = [];if (type == 1) {arrList.forEach((item) => {let info = {value: item.val,itemStyle: {normal: {borderColor: "#89e3ec",borderWidth: 2,color: item.starColor,},},};returnList.push(info);});} else {arrList.forEach((item) => {let infor = {value: item.val,itemStyle: {color: {// https://echarts.apache.org/zh/option.html#color//疑似根据整个demo尺寸,定位图片未知//   image: imgsss, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串//   repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'type: "linear",x: 0,x2: 1,y: 0,y2: 0,//给菱形上色colorStops: [{offset: 0,color: item.starColor,},{offset: 0.5,color: item.starColor,},{offset: 0.5,color: item.endColor,},{offset: 1,color: item.endColor,},],},},};returnList.push(infor);});}return returnList;
};function create() {var chartDom = document.getElementById("chart");var myChart = echarts.init(chartDom);var xData = ["周一", "周二", "周三", "周四", "周五"];// 完成数据数组var completeData = [320, 132, 101, 11, 90];var barWidth = 50;var showData = [];var otherData = [];let completeDataList = [{ val: 320, starColor: "#3dc6cc", endColor: "#267A7B" },{ val: 132, starColor: "#003EFF", endColor: "#262F7B" },{ val: 131, starColor: "#6C29C1", endColor: "#4B267B" },{ val: 111, starColor: "#DB00FF", endColor: "#74267B" },{ val: 90, starColor: "#FF8A00", endColor: "#56401F" },];completeData = colorArr(completeDataList);let otherDataList = [{val: 680,starColor: "rgba(53, 140, 144,0.5)",endColor: "rgba(31, 82, 86,0.5)",},{val: 868,starColor: "rgba(0, 62, 255,0.5)",endColor: "rgba(38, 47, 123,0.5)",},{val: 869,starColor: "rgba(108, 41, 193,0.5)",endColor: "rgba(75, 38, 123,0.5)",},{val: 889,starColor: "rgba(219, 0, 255,0.5)",endColor: "rgba(116, 38, 123,0.5)",},{val: 910,starColor: "rgba(255, 138, 0,0.5)",endColor: "rgba(86, 64, 31,0.5)",},];otherData = colorArr(otherDataList);//  中间菱形let constDatasList = [{ val: 320, starColor: "#56fdfd", endColor: "#3fc3c3" },{ val: 132, starColor: "#5699fd", endColor: "#3f64c3" },{ val: 131, starColor: "#8156fd", endColor: "#613fc3" },{ val: 111, starColor: "#c24fe5", endColor: "#9c3bb2" },{ val: 90, starColor: "#Fdce56", endColor: "#c3b63f" },];let constDatas = colorArr(constDatasList);let showDataList = [{val: 1000,starColor: "rgba(53, 140, 144,0.7)",endColor: "rgba(31, 82, 86,0.5)",},{val: 1000,starColor: "rgba(0, 62, 255,0.7)",endColor: "rgba(38, 47, 123,0.5)",},{val: 1000,starColor: "rgba(108, 41, 193,0.7)",endColor: "rgba(75, 38, 123,0.5)",},{val: 1000,starColor: "rgba(219, 0, 255,0.7)",endColor: "rgba(116, 38, 123,0.5)",},{val: 1000,starColor: "rgba(255, 138, 0,0.7)",endColor: "rgba(86, 64, 31,0.5)",},];showData = colorArr(showDataList, 1);var option = {//调整光标移入,展示数据的样式tooltip: {trigger: "axis",// formatter: function (params) {//   return (//     params[0].axisValue +//     ":" +//     "<br/>计划:" +//     planData[params[0].dataIndex] +//     "<br/>完成:" +//     completeData[params[0].dataIndex]//   );// },},title: {text: "单位(数量)",left: "3%",textStyle: {color: "#07D1FA",fontWeight: "normal",fontSize: 14,},},//调整图例legend: {data: ["计划", "完成"],show: false,},//调整图表距边框的距离grid: {left: "3%",right: "3%",top: "15%",bottom: "5%",containLabel: true,},// 调整图像x轴xAxis: {data: xData,axisTick: {show: false,},axisLabel: {textStyle: {fontFamily: "Microsoft YaHei",color: "#07D1FA",fontWeight: "400",fontSize: "14",},},},//调整图像y轴yAxis: {axisTick: {show: false,},axisLine: {show: false,},axisLabel: {color: "#07D1FA",// show: false,},splitLine: {show: true,lineStyle: {type: [5, 10],dashOffset: 5,color: "#07D1FA",width: 1,opacity: 0.21,},},},//图像的关键显示部分,此处5个拼接一个堆叠柱子,注意此处的调整series: [{z: 1,name: "计划",type: "bar",stack: "1",barWidth: barWidth,// stack: "总量",// color: color[0],data: completeData,},{z: 2,name: "完成",type: "bar",stack: "1",barWidth: barWidth,// stack: "总量",// color: color[1],data: otherData,},//柱形底部{z: 3,name: "项目",type: "pictorialBar",data: completeData,symbol: "diamond",symbolOffset: ["0%", "60%"],symbolSize: [barWidth, 10],// itemStyle: {//   normal: {//     color: function (params) {//       let arr = ["#3dc6cc", "#003EFF", "#6C29C1", "#DB00FF", "#FF8A00"];//       console.log(arr[params.dataIndex]);//       let ass = arr[params.dataIndex];//       if (params.dataIndex == 0) {//         return "#DB00FF";//       }//       if (params.dataIndex == 1) {//         return "#003EFF";//       }//     },//   },// },tooltip: {show: false,},},{z: 3,name: "1",type: "pictorialBar",data: constDatas,symbol: "diamond",symbolPosition: "end",symbolOffset: ["0%", "-50%"],symbolSize: [barWidth, 10],},{z: 5,name: "项目",type: "pictorialBar",symbolPosition: "end",data: showData,symbol: "diamond",symbolOffset: ["0%", "-50%"],symbolSize: [barWidth, (10 * barWidth) / barWidth],tooltip: {show: false,},// itemStyle: {//   normal: {//     label: {//       formatter: "{c}",//       show: true,//       position: "top",//       textStyle: {//         fontWeight: 400,//         fontSize: "13",//         color: "#F2F7FA",//         lineHeight: 20,//       },//     },//   },// },},],};option && myChart.setOption(option);
}
</script><style scoped lang="scss">
.indexLeft {width: 360px;height: 1016px;margin-top: 64px;background: linear-gradient(90deg,#031425 0%,rgba(3, 20, 37, 0.5) 50%,rgba(3, 20, 37, 0) 100%);
}#chart {width: 700px;height: 300px;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/145896.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

缺陷分级(过程质量bug分级)

缺陷按照其影响的严重程度&#xff0c;从高到低分成5级&#xff0c;分别为致命&#xff08;Blocker&#xff09;、严重&#xff08;Critical&#xff09;、一般&#xff08;Major&#xff09;、轻微&#xff08;Minor&#xff09;以及建议&#xff08;Enhancement&#xff09;。…

netty之EventLoopGroup

创建EventLoopGroup使用无参构造方法时&#xff0c;发现会创建24个NioEventLoop&#xff08;readonlyChildren.size24&#xff09;,经查&#xff0c;是取的java虚拟机的可用处理器数2倍。源码如下&#xff1a; 重点就是最后哪个方法的注释&#xff1a;Returns the number of p…

查看libc版本

查看libc库版本 查看系统libc版本 $ ldd --version ldd (Ubuntu GLIBC 2.27-3ubuntu1.2) 2.27 Copyright (C) 2018 Free Software Foundation, Inc. This is free software; see the source for copying conditions. There is NO warranty; not even for MERCHANTABILITY or …

LabVIEW进行MQTT通信及数据解析

需求&#xff1a;一般通过串口的方式进行数据的解析&#xff0c;但有时候硬件的限制&#xff0c;没法预留串口&#xff0c;那么如何通过网络的方式特别是MQTT数据的通信及解析 解决方式&#xff1a; 1.MQTT通信控件&#xff1a; 参考开源的mqtt-LabVIEW https://github.com…

Docker安装PostgreSQL

拉取镜像 docker pull postgres 运行容器 docker run --name postgres-db -e TZPRC -e POSTGRES_USERroot -e POSTGRES_DBdatabase -e POSTGRES_PASSWORD123456 -p 5432:5432 -v /Users/xiaoping/byx/postgresql/data:/var/lib/postgresql/data -d postgres run&#xff0c…

vmware安装MacOS以及flutter遇到的问题

安装过程&#xff1a;参考下面的文章 链接&#xff1a; 虚拟机VMware安装苹果系统macOS&#xff0c;超级详细教程&#xff0c;附文件下载&#xff0c;真教程&#xff01;&#xff01; 无限重启情况&#xff1a; &#xff08;二&#xff09; 配置虚拟机找到你的虚拟机安装文件…

21. 深度学习 - 拓朴排序的原理和实现

文章目录 Hi,你好。我是茶桁。 上节课&#xff0c;我们讲了多层神经网络的原理&#xff0c;并且明白了&#xff0c;数据量是层级无法超过3层的主要原因。 然后我们用一张图来解释了整个链式求导的过程&#xff1a; 那么&#xff0c;我们如何将这张图里的节点关系来获得它的求…

【kerberos】使用 curl 访问受 Kerberos HTTP SPNEGO 保护的 URL

前言&#xff1a; 大数据集群集成 Kerberos 后&#xff0c;很多 WEBUI 打开都会提示输入用户名和密码。由于我想获取 flink 任务的详情&#xff0c;且KNOX 并不支持Flink api&#xff0c;查看KNOX 直接的列表&#xff1a;https://docs.cloudera.com/cdp-private-cloud-base/7.…

双剑合璧:基于Elasticsearch的两路召回语义检索系统,实现关键字与语义的高效精准匹配

搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术细节以及项目实战(含码源) 专栏详细介绍:搜索推荐系统专栏简介:搜索推荐全流程讲解(召回粗排精排重排混排)、系统架构、常见问题、算法项目实战总结、技术…

叮!您收到了一封来自达坦科技的Hackthon邀请函

DatenLord Hackathon 2023正式启动&#xff01;达坦科技基于其跨云分布式文件系统DatenLord项目&#xff0c;结合AI大模型时代背景&#xff0c;搭建了擂台&#xff0c;在此正式向您发出邀约&#xff01; 本次大赛赛题深刻有趣&#xff0c;奖品丰厚多样&#xff0c;借此机会您不…

我遇到的bug(活动)

目录 方向一&#xff1a;身为程序员遇到过的奔溃瞬间 方向二&#xff1a;如何解决遇到的奔溃瞬间 方向三&#xff1a;在解决完后获得的收获和体会 方向一&#xff1a;身为程序员遇到过的奔溃瞬间 在一个项目中&#xff0c;我负责实现一个复杂的图像处理算法。经过几天的努力…

卷积神经网络(CNN)鲜花的识别

文章目录 前期工作1. 设置GPU&#xff08;如果使用的是CPU可以忽略这步&#xff09;我的环境&#xff1a; 2. 导入数据3. 检查数据 二、数据预处理1. 加载数据2. 可视化数据3. 再次检查数据4. 配置数据集 三、构建CNN网络四、编译五、训练模型六、模型评估 前期工作 1. 设置GP…

redis运维(十一) python操作redis

一 python操作redis ① 安装pyredis redis常见错误 说明&#xff1a;由于redis服务器是5.0.8的,为了避免出现问题,默认最高版本的即可 --> 适配 ② 操作流程 核心&#xff1a;获取redis数据库连接对象 ③ Python 字符串前面加u,r,b的含义 原因&#xff1a; 字符串在…

pinia中使用@vueuse/core库的useStorage做数据的持久化存储

useStorage(响应式本地/会话存储) 官网示例地址 参数说明 /*** param {string} key 键名(必填)* param {string | number | boolean | object | null} defaults: 默认值(必填)* param { StorageLike(localStorage | sessionStorage) | undefined } storage 默认为localStorag…

vue实现调用手机拍照、录像功能

目录 前言 准备工作 在这个示例中&#xff0c;我们将使用Vue.js框架来实现我们的目标。如果你还不熟悉Vue.js&#xff0c;推荐先学习一下Vue.js的基础知识。 接下来&#xff0c;我们需要创建一个基于Vue.js的项目。你可以使用Vue CLI来创建一个全新的Vue项目&#xff1a;# 安…

jQuery 树型菜单完整代码

jQuery 树型菜单完整代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8" /><meta name"viewport" content"widthdevice-width,initial-scale1.0,minimum-scale1.0,maximum-scale1.0,user-scalableno&qu…

Unity Text文本首行缩进两个字符的方法

Text文本首行缩进两个字符的方法比较简单。通过代码把"\u3000\u3000"加到文本字符串前面即可。 参考如下代码&#xff1a; TMPtext1.text "\u3000\u3000" "这是一段有首行缩进的文本内容。\n这是第二行"; 运行效果如下图所示&#xff1a; 虽…

串口通信原理及应用

Content 1. 前言介绍2. 连接方式3. 数据帧格式4. 代码编写 1. 前言介绍 串口通信是一种设备间非常常用的串行接口&#xff0c;以比特位的形式发送或接收数据&#xff0c;由于成本很低&#xff0c;容易使用&#xff0c;工程师经常使用这种方式来调试 MCU。 串口通信应用广泛&a…

常见面试题-MySQL软删除以及索引结构

为什么 mysql 删了行记录&#xff0c;反而磁盘空间没有减少&#xff1f; 答&#xff1a; 在 mysql 中&#xff0c;当使用 delete 删除数据时&#xff0c;mysql 会将删除的数据标记为已删除&#xff0c;但是并不去磁盘上真正进行删除&#xff0c;而是在需要使用这片存储空间时…

浏览器里设置代理的作用

一、代理服务器常识 1、 代理服务器的定义&#xff1a; 代理服务器是介于浏览器和Web服务器之间的一台服务器&#xff0c;当你通过代理服务器上网浏览时&#xff0c;浏览器不是直接到Web服务器去取回网页而是向代理服务器发出请求&#xff0c;由代理服务器来取回浏览器所需要…