封装的charts使用 vue2

2024-03-25 14:28

本文主要是介绍封装的charts使用 vue2,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

//组件
<template><div ref="chartRef" class="echart"></div>
</template><script>
import * as echarts from 'echarts'export default {data() {return {chart: null}},methods: {init() {if (!this.chart) {this.chart = echarts.init(this.$refs.chartRef)}},// 防抖debounce(fun, delay) {let timerreturn function () {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {fun()}, delay)}},// 渲染图表setOptions(option) {if (!this.chart) returnthis.chart.setOption(option)},// 图表重绘setResize() {if (!this.chart) returnthis.chart.resize()}},mounted() {this.init()window.addEventListener('resize', () => this.debounce(this.setResize(), 500))},beforeDestroy() {if (!this.chart) returnthis.chart = null}
}
</script><style lang="scss" scoped>
.echart {width: 100%;height: 100%;min-height: 200px;
}
</style>

使用

<template><div><VueChart ref="lineChartRef" /></div>
</template><script>
import VueChart from './VueChart'const lineOption = {color: ['#317FF6', '#00FF7E'],grid: {top: '16%',left: '2%',right: '2%',bottom: '2%',containLabel: true},tooltip: {trigger: 'axis'},legend: {top: 10,right: 10,textStyle: { color: '#FFFFFF' }},xAxis: {type: 'category',axisLabel: {color: '#C2D7E8',fontSize: 12,rotate: 45},axisLine: {show: true,lineStyle: { color: 'rgba(255, 255, 255, .2)' }},axisTick: { show: false },data: ['星期一', '星期一', '星期一', '星期一', '星期一', '星期一', '星期一', '星期一', '星期一', '星期一', '星期一'],},yAxis: {type: 'value',name: '单位:家',nameTextStyle: { color: '#C2D7E8' },axisLabel: {color: '#C2D7E8',fontSize: 14},axisLine: {show: true,lineStyle: { color: 'rgba(255, 255, 255, .2)' }},splitLine: {lineStyle: {type: 'dashed',color: 'rgba(255, 255, 255, .2)'}}},series: [{name: '总收入',type: 'line',smooth: true,showSymbol: false,areaStyle: {// opacity: 0.8,color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, color: 'rgba(49, 127, 246, .5)'},{ offset: 1, color: 'rgba(43, 254, 192, 0)' }],global: false}},data: [20, 120, 110, 90, 50, 30, 35, 40, 50, 100, 90]},{name: '纯收入',type: 'line',smooth: true,showSymbol: false,areaStyle: {// opacity: 0.8,color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{ offset: 0, color: 'rgba(43, 254, 192, .5)'},{ offset: 1, color: 'rgba(43, 254, 192, 0)' }],global: false}},data: [90, 50, 30, 35, 20, 120, 110, 90, 30, 35, 10]}]
}export default {name: 'Income',components: {VueChart},data() {return {}},mounted() {this.$refs.lineChartRef.setOptions(lineOption)}
}
</script>

这篇关于封装的charts使用 vue2的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

Linux中压缩、网络传输与系统监控工具的使用完整指南

《Linux中压缩、网络传输与系统监控工具的使用完整指南》在Linux系统管理中,压缩与传输工具是数据备份和远程协作的桥梁,而系统监控工具则是保障服务器稳定运行的眼睛,下面小编就来和大家详细介绍一下它... 目录引言一、压缩与解压:数据存储与传输的优化核心1. zip/unzip:通用压缩格式的便捷操作2.

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传:从崩溃边缘抢救进度二、多线程加速:榨干网络带宽三、速度控制:做网络的好邻居四、终端交互

Python中注释使用方法举例详解

《Python中注释使用方法举例详解》在Python编程语言中注释是必不可少的一部分,它有助于提高代码的可读性和维护性,:本文主要介绍Python中注释使用方法的相关资料,需要的朋友可以参考下... 目录一、前言二、什么是注释?示例:三、单行注释语法:以 China编程# 开头,后面的内容为注释内容示例:示例:四

Go语言数据库编程GORM 的基本使用详解

《Go语言数据库编程GORM的基本使用详解》GORM是Go语言流行的ORM框架,封装database/sql,支持自动迁移、关联、事务等,提供CRUD、条件查询、钩子函数、日志等功能,简化数据库操作... 目录一、安装与初始化1. 安装 GORM 及数据库驱动2. 建立数据库连接二、定义模型结构体三、自动迁

ModelMapper基本使用和常见场景示例详解

《ModelMapper基本使用和常见场景示例详解》ModelMapper是Java对象映射库,支持自动映射、自定义规则、集合转换及高级配置(如匹配策略、转换器),可集成SpringBoot,减少样板... 目录1. 添加依赖2. 基本用法示例:简单对象映射3. 自定义映射规则4. 集合映射5. 高级配置匹

Spring 框架之Springfox使用详解

《Spring框架之Springfox使用详解》Springfox是Spring框架的API文档工具,集成Swagger规范,自动生成文档并支持多语言/版本,模块化设计便于扩展,但存在版本兼容性、性... 目录核心功能工作原理模块化设计使用示例注意事项优缺点优点缺点总结适用场景建议总结Springfox 是

嵌入式数据库SQLite 3配置使用讲解

《嵌入式数据库SQLite3配置使用讲解》本文强调嵌入式项目中SQLite3数据库的重要性,因其零配置、轻量级、跨平台及事务处理特性,可保障数据溯源与责任明确,详细讲解安装配置、基础语法及SQLit... 目录0、惨痛教训1、SQLite3环境配置(1)、下载安装SQLite库(2)、解压下载的文件(3)、

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景