vue自己封装一个echart公共组件

转载 作者：知者 更新时间：2024-03-13 03:51:33 27 4

<template>
	<div class="echarts"></div>
</template>

<script>
	import * as echarts from 'echarts'
	import {
		markRaw
	} from 'vue'
	export default {
		props: {
			isUpdate: String,
			option: {
				type: Object,
				default: function () {
					return {
						type: 'default'
					}
				}
			}
		},
		watch: {
			// 防止配置改变后不更新配置，重新加载配置即可
			option: {
				deep: true,
				handler() {
					if (this.chart) {
						this.chart.setOption(this.option)
					}
				}
			},
			// 自适应大小
			isUpdate() {
				if (this.chart) {
					this.chart.resize()
				}
			}
		},
		data() {
			return {
				chart: null
			}
		},
		mounted() {
			this.initChart()
		},
		methods: {
			initChart() {
				this.chart = markRaw(echarts.init(this.$el, 'dark')) //获取自身dom元素
				// this.chart = echarts.init(this.$el, 'dark')
				if (this.option.type != 'default') {
					this.chart.setOption(this.option)
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.echarts {
		width: 100%;
		height: 100%;
	}
</style>

27 4 0

• Java打印对象、封装

  我需要使用封装打印3个变量，并且无法修改主类。 主类声明变量[汽缸、制造商、所有者]，并希望使用如下参数创建和打印一个对象: System.out.println (new Vehicle (cyli

• Ruby 封装

  我正在研究“Beginning Ruby”这本书，在我进行封装之前一切都进行得很顺利。我明白这段代码在做什么，我只是不知道为什么要用这些方法设置它。 对于那些感兴趣的人 this is the lin

• JavaScript 封装

  所以我一直在研究面向对象的完整开发 JavaScript 实践，并对以下示例感到好奇。 据我了解，(这对我来说很有意义)以下“ secret ”字段是“私有(private)”的: var MyObj

• java 封装

  在面向对象程式设计方法中，封装（英语：Encapsulation）是指，一种将抽象性函式接口的实作细节部份包装、隐藏起来的方法。 封装可以被认为是一个保护屏障，防止该类的代码和数据被外部类定义的代

• C# 封装

  封装 被定义为 把一个或多个项目封闭在一个物理的或者逻辑的包中 。在面向对象程序设计方法论中，封装是为了防止对实现细节的访问。 抽象和封装是面向对象程序设计的相关特性。抽象允许相关信息可

• oop - 封装。精心设计的类

  今天我读了一本书，作者写道，在一个设计良好的类中，访问属性的唯一方法是通过其中一个类方法。这是一个被广泛接受的想法吗？为什么封装属性如此重要？不做会有什么后果？我早些时候在某处读到这可以提高安全性或类

• oop - 封装、抽象和多态是否需要继承？

  今天我接受了软件工程职位的面试。我已经从 stackoverflow 中阅读了很多关于面试的内容。他们向我询问了与 OOP 相关的正常情况。但他们也问我这些: 没有继承就可以封装吗？ 没有继承就可以抽

• gradle - gradle任务分组/封装

  我正在制作一个简单的网站，并编写了gradle构建脚本，该脚本将执行诸如lint并最小化css / html / js之类的事情。 在这一阶段，我刚刚完成了正在运行的CSS，但是只是初始的非结构化格式

• C++封装，有什么用

  下面的幻灯片是指 C++ 语言，它说 "encapsulation is about ensuring the user uses our ADT in a safe way" 但是，如果他可以访问我

• Java StackOverflow 封装

  尝试设置一个 Person 类 我在尝试将信息封装在类中以使其不会被意外更改时遇到了问题。除了当我尝试使用 setter/getters 进行封装时，该类工作得非常好。我认为问题是这些方法最终会互相循

• oop - 封装、数据抽象和数据隐藏的精确解释

  面向对象的概念:封装、数据抽象和数据隐藏是3个不同的概念，但彼此之间非常相关。所以我很难通过阅读互联网上的信息来完全理解这些概念。一个地方可用的信息与互联网上另一个地方的信息相矛盾。有人可以指导我阅读

• java - 封装，getter返回null或0

  我被封装困住了。在我看来，好像我已经按照规则做了一切，但仍然不起作用。虽然我知道我错过了一些东西。我正在使用 Eclipse。 我想要通过创建一副标准 52 张卡片来进行一些练习，并尝试我学到的新东西

• java - 封装:java中为什么叫keySet

  在java中，要获取映射中的所有键，我们可以使用方法keySet。但我想知道为什么方法名称不只是 keys ？名称 Set 是否会泄露有关实现的详细信息？ 据我了解，Java 是静态类型语言，名称中包

• JavaScript 封装/JQuery

  我正在尝试找出如何防止应用程序中的页面变量被全局定义。我想出了一些方法，但我想知道是否有人们使用的通用标准方法。 我使用这种方法得到了我的插件设计模式:http://www.virgentech.co

• 从异步方法获取更新时的 C# 封装

  我有一个 tcp 连接，我想在服务器类的 HandleConnectionAsync 方法中保持打开状态。它将从客户端接收持续更新。 private async void HandleConnecti

• c++ - 封装 vector

  这是我类(class)的一个小样本: #include #include using std::string; using std::vector; struct Book { string

• c++ - 封装:我应该将一个对象的数据传递给另一个修改它的类吗？

  我想要类似下面的代码: class Foo{ public: void update() { for( auto dataModifier : _dataModifierLis

• c# - PropertyChangedCallback 封装

  这已经困扰我一段时间了，所以我问了一个同事他是否能理解它，现在我来了;) 为什么可以在依赖属性的 PropertyChangedCallback 中访问持有类的私有(private)成员？ 让我通过这

• c# - 封装..最精确的描述？

  我知道封​​装意味着一个对象不应该直接访问不同对象的成员……但我猜它与公共(public)领域有关？我假设公共(public)方法不会破坏封装..？我只是在这里不清楚，很高兴得到任何解释。 最佳答案

• 封装 axios+promise通用请求函数操作

  我就废话不多说了，大家还是直接看代码吧~ ? 1