vue中如何使用echarts和echarts-gl实现三维折线图

 一、vue中使用三维折线图

效果图:

二、使用步骤 

1.引入库

安装echarts

在package.json文件中添加

 "dependencies": {"echarts": "^5.1.2""echarts-gl": "^1.1.1",//  "echarts-gl": "^2.0.8"},
npm install echarts-gl@1.1.1 --save

2.使用

完整代码如下(示例):

HTML代码
<template><div :class="className" :style="{height:height,width:width}" />
</template>
js脚本代码
<script>import echarts from 'echarts'import "echarts-gl";require('echarts/theme/macarons') // echarts themeimport resize from '@/views/dashboard/mixins/resize'export default {mixins: [resize],props: {className: {type: String,default: 'chart'},width: {type: String,default: '100%'},height: {type: String,default: '400px'},dataList: {type: Array,default: []}},data() {return {chart: null,}},mounted() {this.$nextTick(() => {this.initChart()})},beforeDestroy() {if (!this.chart) {return}this.chart.dispose()this.chart = null},watch: {dataList(val, oldVal) {//普通的watch监听this.initChart()}},methods: {initChart() {let data = [[0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],[0, 0, 1, 1, 5, 7, 9, 11, 12, 13, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17, 17],[5, 6, 9, 9, 9, 11, 11, 11, 13, 13, 14, 14, 14, 16, 16, 16, 16, 16, 18, 18, 18, 18],[13, 17, 22, 22, 26, 33, 34, 36, 36, 37, 39, 40, 40, 42, 42, 42, 43, 43, 44, 44, 44, 44],[13, 16, 17, 27, 35, 45, 49, 53, 58, 61, 65, 66, 68, 69, 71, 73, 73, 73, 74, 74, 74, 74]]let dataX = ['1/27', '1/28', '1/29', '1/30', '1/31', '2/1', '2/2', '2/3', '2/4', '2/5', '2/6', '2/7', '2/8', '2/9', '2/10', '2/11', '2/12', '2/13', '2/14', '2/15', '2/16', '2/17']let dataY = ['生产', '收购', '运输', '销售', '消费']var vdata = []for (var i = 0; i < dataY.length; i++) {vdata[i] = []}for (var t = 0; t < dataY.length; t++) {var y = dataY[t];for (var k = 0; k < data[0].length; k++) {for (var p = 0; p < dataX.length; p++) {var x = dataX[p];var z = data[t][p];vdata[t].push([x, y, z]);}break;}}this.chart = echarts.init(this.$el, 'macarons')this.chart.setOption({xAxis3D: {type: 'category',name: '',data: dataX,axisLabel: {show: true,interval: 0  //使x轴都显示}},yAxis3D: {type: 'category',name: '',data: dataY,axisLabel: {show: true,interval: 0   //使y轴都显示}},zAxis3D: {type: 'value',name: ''},//图例legend: {orient: 'vertical',right: 50,top: 200,icon: 'roundRect',textStyle: {color: '#FFFFFF'}},tooltip: {show: true},grid3D: {boxWidth: 300,boxHeight: 120,boxDepth: 200,axisLine: {show: true,interval: 0,lineStyle: {color: '#FFFFFF'}},viewControl: {distance: 400}},series: [{type: 'scatter3D',name: '生产',itemStyle: {color: 'rgb(165,  0, 38)'},label: {  //当type为scatter3D时有label出现show: true,position: 'top',   //标签的位置,也就是data中数据相对于线在哪个位置distance: 0,textStyle: {color: '#FFFFFF',fontSize: 12,borderWidth: 0,borderColor: '#FFFFFF',backgroundColor: 'transparent'}},data: vdata[0]},{type: 'scatter3D',name: '收购',itemStyle: {color: 'rgb(215, 48, 39)'},label: {show: true,position: 'bottom',distance: 0,textStyle: {color: '#FFFFFF',fontSize: 12,borderWidth: 0,borderColor: '#FFFFFF',backgroundColor: 'transparent'}},data: vdata[1]},{type: 'scatter3D',name: '运输',itemStyle: {color: 'rgb(254,224,144)'},label: {show: true,position: 'bottom',distance: 0,textStyle: {color: '#FFFFFF',fontSize: 12,borderWidth: 0,borderColor: '#FFFFFF',backgroundColor: 'transparent'}},data: vdata[2]},{type: 'scatter3D',name: '销售',itemStyle: {color: 'rgb(255,255,191)'},label: {show: true,position: 'top',distance: 0,textStyle: {color: '#FFFFFF',fontSize: 12,borderWidth: 0,borderColor: '#FFFFFF',backgroundColor: 'transparent'}},data: vdata[3]},{type: 'scatter3D',name: '消费',itemStyle: {color: 'rgb(224,243,248)'},label: {show: true,position: 'bottom',distance: 0,textStyle: {color: '#FFFFFF',fontSize: 12,borderWidth: 0,borderColor: '#FFFFFF',backgroundColor: 'transparent'}},data: vdata[4]},{type: 'line3D', //当type为line3D时有label没有作用,官网没有label这个配置项name: '生产',lineStyle: {width: 8,   //线的宽度color: 'rgb(165,  0, 38)'   //线的颜色},data: vdata[0]   //线数据和点数据所需要的格式一样},{type: 'line3D',name: '收购',lineStyle: {color: 'rgb(215, 48, 39)',  //线的颜色width: 8     //线的宽度},data: vdata[1]},{type: 'line3D',name: '运输',lineStyle: {color: 'rgb(254,224,144)',width: 8},data: vdata[2]},{type: 'line3D',name: '销售',lineStyle: {color: 'rgb(255,255,191)',width: 8},data: vdata[3]},{type: 'line3D',name: '消费',lineStyle: {color: 'rgb(224,243,248)',width: 8},data: vdata[4]},]})}}}
</script>

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

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

相关文章

5G超宽,远程诊疗带来优质就医体验

上篇&#xff08;5G与4G的区别-CSDN博客&#xff09;讲了4G与5G的区别&#xff0c;大家可以看到5G 具备高带宽、低时延的特性&#xff0c;可以广泛应用在各种物联网场景下。 今天和大家简单聊聊5G远程诊疗。 远程诊疗是一种利用信息通信技术为患者提供医疗服务的方式。它允许…

掌握PoE交换机的潜力:全面的以太网供电连接手册

在数字化日益成为我们生活和工作核心的今天&#xff0c;一个稳固且效率高的网络基础架构对于个人和企业来说是不可或缺的。PoE&#xff08;以太网供电&#xff09;交换机作为一种创新技术&#xff0c;通过单一的网络线缆同时传递数据和电源&#xff0c;对于增强网络的性能起着关…

5. Spring IoCDI ★ ✔

5. Spring IoC&DI 1. IoC & DI ⼊⻔1.1 Spring 是什么&#xff1f;★ &#xff08;Spring 是包含了众多⼯具⽅法的 IoC 容器&#xff09;1.1.1 什么是容器&#xff1f;1.1.2 什么是 IoC&#xff1f;★ &#xff08;IoC: Inversion of Control (控制反转)&#xff09;总…

都江堰操作系统(DJYOS)和安卓操作系统(Android)的区别

- 开发团队&#xff1a;都江堰操作系统由深圳市秦简计算机系统有限公司开发和运营&#xff1b;而安卓由谷歌及其他公司带领的开放手机联盟开发。 - 开源情况&#xff1a;都江堰操作系统是开源操作系统&#xff0c;采取了类BSD许可证&#xff1b;安卓是基于Linux的开放源代码软…

AGI大模型的门槛是什么?怎么学

AGI&#xff08;Artificial General Intelligence&#xff0c;通用人工智能&#xff09;大模型&#xff0c;即具备类似人类智能的、能够理解、学习、应用知识和技能并解决各种复杂问题的通用型人工智能模型&#xff0c;目前仍然是人工智能研究的前沿领域&#xff0c;具有以下门…

深度学习 --- stanford cs231学习笔记七(训练神经网络之梯度下降优化器)

5&#xff0c;梯度下降优化器 5&#xff0c;1 梯度下降在深度学习中的作用 在深度学习中&#xff0c;权重W的值是否合理是由损失函数L来判断的。L越小&#xff0c;表示W的设置越happy。L越大&#xff0c;表示W的值越unhappy。 为了让L越来越小&#xff0c;常用的方法是梯度下降…

centos7安装zabbix6.4-mysql8

CentOS 7 安装 Zabbix 6.4 步骤 关闭防火墙和服务 systemctl stop firewalld.service setenforce 0安装 MySQL 配置 MySQL 源 wget https://dev.mysql.com/get/mysql80-community-release-el7-5.noarch.rpm yum -y install mysql80-community-release-el7-5.noarch.rpm安装 M…

句法分析概述

第1关&#xff1a;句法分析概述 任务描述 本关任务&#xff1a;通过对句法分析基本概念的学习&#xff0c;完成相应的选择题。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 句法分析的基础概念&#xff1b; 句法分析的数据集和评测方法。 句法分析简介…

应用及安全

目录 一、PAM 安全认证及配置 1.1配置 su 命令的认证 1.2PAM 配置文件结构二、账号和密码安全管理 2.1账号管理 2.2系统账号清理 2.3密码安全控制 2.4密码重设示例 2.5参考命令三、命令历史限制 3.1设置命令历史记录…

【问chatgpt】

这采用的是什么脚手架初始化的&#xff1f;这样问询chatgpt 从文件结构来看&#xff0c;这个项目很可能是使用 Express 框架初始化的。这些文件夹和命名约定常见于 Express 项目结构&#xff0c;特别是&#xff1a; controllers: 控制器文件夹&#xff0c;通常用于处理请求逻…

同城小商城货到付款系统源码小程序

&#xff1a;便捷购物新选择 &#x1f680; 一、快速便捷&#xff0c;同城直达 在这个快节奏的时代&#xff0c;时间就是金钱。你是否曾因为等待快递而焦虑不安&#xff1f;现在&#xff0c;有了“同城商城货到付款小程序”&#xff0c;这一切都变得不再是问题。它专注于同城…

<商务世界>《79 微课堂 <客户是核心:2 客户沟通的技巧《扬长避短进行沟通》(全文原创首发)>》

1 说明 符合表示★关键信息▲必要信息●一般信息 2 规则 等级信息★1、无准备&#xff0c;不沟通。▲2、做最准备充分&#xff0c;准备不设上限★3、掌握自己的节奏&#xff0c;不在他人节参中被动●4、准备充分、心态平稳、扬长避短。●5、沟通就是对消息的处理。发送、接收…

谷歌如何进行失效链接建设?

失效链接建设是一种高效的外链建设策略&#xff0c;通过发现并利用失效链接来提升自己网站的SEO。以下是详细的步骤&#xff1a; 寻找失效页面&#xff1a;你需要使用SEO工具&#xff0c;如Ahrefs&#xff0c;来查找与你的网站内容相关的失效页面。这些页面可能是竞争对手的失…

传神社区|数据集合集第4期|中文NLP数据集合集

自从ChatGPT等大型语言模型&#xff08;Large Language Model, LLM&#xff09;出现以来&#xff0c;其类通用人工智能&#xff08;AGI&#xff09;能力引发了自然语言处理&#xff08;NLP&#xff09;领域的新一轮研究和应用浪潮。尤其是ChatGLM、LLaMA等普通开发者都能运行的…

基于深度学习的相机内参标定

基于深度学习的相机内参标定 相机内参标定&#xff08;Camera Intrinsic Calibration&#xff09;是计算机视觉中的关键步骤&#xff0c;用于确定相机的内部参数&#xff08;如焦距、主点位置、畸变系数等&#xff09;。传统的标定方法依赖于已知尺寸的标定板&#xff0c;通常…

一文弄懂线性回归模型

1、引言 今天&#xff0c;我们将深入探讨机器学习中的三个关键概念&#xff1a;线性回归、代价函数和梯度下降。这些概念构成了许多机器学习算法的基础。起初&#xff0c;我决定不写一篇关于这些主题的文章&#xff0c;因为它们已经被广泛涉及。不过&#xff0c;我改变了主意&…

[图解]SysML和EA建模住宅安全系统-02-现有运营领域-块定义图

1 00:00:00,840 --> 00:00:02,440 首先我们来看画在哪里 2 00:00:02,570 --> 00:00:08,310 你看&#xff0c;这是图的类型&#xff0c;图里面内容 3 00:00:08,320 --> 00:00:10,780 这是元素类型 4 00:00:10,790 --> 00:00:14,900 这是位置&#xff0c;哪个包 …

Halcon 文本文件操作,形态学

一文件的读写 *******************************************************向文本文件写入字符串内容*************************************************************read_image (Image, fabrik)threshold (Image, Region, 0, 120)area_center (Region, Area, Row, Column)open_…

【前端面试题】vue2.0与vue3.0不同处大全

Vue 3.0与Vue 2.0在细节上存在多个显著的不同之处&#xff0c;以下是对这些区别的详细归纳和解释&#xff1a; 性能提升&#xff1a; Vue 3.0的性能相比Vue 2.x快了1.2至2倍。这主要得益于内部对虚拟DOM的完全重写&#xff0c;mounting和patching的提速&#xff0c;以及基于Pr…

嘉立创学习

1.两个设置&#xff0c;一般用左边那个 2.焊盘分类 基本焊盘 热风盘&#xff1a;也叫花焊盘&#xff08;负片&#xff09; 隔离焊盘&#xff1a;外面那圈黑色&#xff0c;用作隔离&#xff08;负片&#xff09; 钢网层&#xff1a;&#xff08;锡膏&#xff09; 阻焊层&…