Vue Echarts实现图表轮播图以及图表组件封装和节流函数优化讲解
目录
- 一、为什么要优雅的使用echarts
- 二、最初的表格组件
- 三、初步的封装
- 四、性能优化
一、为什么要优雅的使用echarts
为了提高代码的规范性、复用性，vue中最常用的就是将具有某些功能的代码封装到一个插件。如果没有对插件进行封装，在后期使用插件的时候效率会十分低下也不便于后期对程序的维护拓展，在优雅的使用echarts时，首先，我们考虑到多个地方需要用到echarts，就需要封装一个组件出来，由于每一个图中的属性均由配置项option进行控制，所以我们可以将option选项提取出来，在将来用到图表的时候从父组件传进来，父组件需要做的就是为图标提供一个有大小的盒子，以便于将图表放进盒子内。当然这只是粗略的想法，具体应如何做还要向下继续看。接下来的几个例子均是由App.vue组件承担父组件角色，Mycharts.vue承担子组件的角色。
二、最初的表格组件
这种方法也是我们在上一篇博客中介绍到的，目的就是为了让大家画出来一个表格体验到画表格的喜悦感。在实际使用过程中我们并不这么干，这样只能一个组件画出一个表格，并且后期维护非常麻烦。我们首先考虑的就是将option选项提取出来，在父组件用到图表时将其传进来然后渲染出表格。
MyCharts.vue
<template>
<div class="hello">
</div>
</template>
<script>
import * as echarts from "echarts"
export default {
name: 'HelloWorld',
mounted() {
this.initOneEcharts();
},
methods: {
initOneEcharts() {
const option = {
color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
title: {
text: "Gradient Stacked Area Chart",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
legend: {
data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"],
},
toolbox: {
feature: {
saveAsImage: {},
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
],
yAxis: [
{
type: "value",
},
],
series: [
{
name: "Line 1",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(128, 255, 165)",
},
{
offset: 1,
color: "rgb(1, 191, 236)",
},
]),
},
emphasis: {
focus: "series",
},
data: [140, 232, 101, 264, 90, 340, 250],
},
{
name: "Line 2",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(0, 221, 255)",
},
{
offset: 1,
color: "rgb(77, 119, 255)",
},
]),
},
emphasis: {
focus: "series",
},
data: [120, 282, 111, 234, 220, 340, 310],
},
{
name: "Line 3",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(55, 162, 255)",
},
{
offset: 1,
color: "rgb(116, 21, 219)",
},
]),
},
emphasis: {
focus: "series",
},
data: [320, 132, 201, 334, 190, 130, 220],
},
{
name: "Line 4",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(255, 0, 135)",
},
{
offset: 1,
color: "rgb(135, 0, 157)",
},
]),
},
emphasis: {
focus: "series",
},
data: [220, 402, 231, 134, 190, 230, 120],
},
{
name: "Line 5",
type: "line",
stack: "Total",
smooth: true,
lineStyle: {
width: 0,
},
showSymbol: false,
label: {
show: true,
position: "top",
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "rgb(255, 191, 0)",
},
{
offset: 1,
color: "rgb(224, 62, 76)",
},
]),
},
emphasis: {
focus: "series",
},
data: [220, 302, 181, 234, 210, 290, 150],
},
],
};
echarts.init(document.getElementById("app")).setOption(option);
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#hello{
width: 1000px;
height: 600px;
}
</style>
App.vue
<template>
<div id="app"><HelloWorld/></div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue"
export default {
name: "app",
components:{
HelloWorld
}
};
</script>
<style scoped>
#app{
width: 1000px;
height: 600px;
}
</style>
三、初步的封装
初步的封装并没有考虑太多性能方面的东西，而是将组件提取出来，能够再父组件中使用起来，以下代码是通过简单的算法实现了一个echarts图例轮播图
当然其中有许多不足，大家只需要体会以下将其封装的感觉就好。
MyCharts.vue 封装好的图表组件
<template>
<div id="mycharts"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
mounted() {
if (this.option) {
this.initOneEcharts();
}
},
data() {
return {
mycharts: null,
};
},
props: {
option: {
Object,
},
},
methods: {
initOneEcharts() {
this.mycharts = echarts.init(document.getElementById("mycharts"));
this.mycharts.setOption(this.option);
},
},
watch: {
option() {
// 不为空的话先销毁，然后再初始化新的
if (this.mycharts) {
this.mycharts.dispose();
}
this.initOneEcharts();
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#mycharts {
width: 100%;
height: 100%;
}
</style>
App.vue 将数据传向图表组件，并渲染
<template>
<div id="app">
<div class="charts">
<my-charts :option="option"></my-charts>
</div>
<div class="footer">
<button class="b1" @click="b1">上一个</button>
<button class="b2" @click="b2">下一个</button>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import MyCharts from "./components/MyEcharts.vue";
export default {
name: "app",
components: {
MyCharts,
},
data() {
return {
// 指向目前指向的是哪个图表
pointer: 0,
option: null,
chartsList: [这里存放option对象],
};
},
mounted() {
this.option = this.chartsList[0];
},
methods: {
b1() {
console.log("后退！！");
if (this.pointer == 0) {
this.pointer = this.chartsList.length;
}
this.pointer--;
this.option = this.chartsList[this.pointer];
},
b2() {
console.log("前进！！", this.chartsList.length + 1, this.pointer);
this.pointer = (this.pointer + 1) % this.chartsList.length;
this.option = this.chartsList[this.pointer];
},
},
};
</script>
<style scoped>
#app {
background-color: #ddd;
text-align: center;
width: 100%;
height: 800px;
}
.charts {
width: 100%;
height: 90%;
/* background-color: blue; */
}
.footer {
margin-top: 20px;
/* background-color: red; */
}
.b1 {
margin: 0 50px;
}
</style>
四、性能优化
截止目前，我们的mycharts插件具备的以下功能：
- 数据源与展示的模板进行了分离
- mycharts插件可以在多个插件中使用（只需传入option配置即可）
- 数据源发生改变时插件可以感知到然后重新渲染模板(如果是内部数据改变可以在watch中加入deep:true)
看似已经齐活了，但是从性能方面来说还有很大的差距：
- 没有进行全局注册（哪里用到哪里引入，使用频繁就需要进行全局注册）
- 窗口大小适配能力差，传统适配方案效率低下
- option内容丰富，声明在data中性能差需要声明在外部
于是可以做以下调整
将封装好的插件注册为全局插件
import MyEcharts from "./components/MyEcharts"
Vue.component("MyEcharts",MyEcharts)
添加窗口改变监听事件
this.mychart.__resize = function(){
chart.resize();
};
setTimeout(() => {
window.addEventListener('resize',this.chart.__resize);
}, 200);
移除窗口改变监听事件
beforeDestroy() {
// 移除窗口改变监听
window.removeEventListener('resize',this.chart.__resize);
}
频繁的窗口改变会降低效率（使用节流函数）
mounted(){
this.chart = echarts.init(document.getElementById(this.id));
this.chart.setOption(this.option);
// 节流函数,来自Lodash，这里可以自己写一个简单点的
// 如果有多个地方用到，也可以使用引入的方式
function throttle(func, wait, options) {
let time, context, args, result;
let previous = 0;
if (!options) options = {};
let later = function() {
previous = options.leading === false ? 0 : new Date().getTime();
time = null;
func.apply(context, args);
if (!time) context = args = null;
};
let throttled = function() {
let now = new Date().getTime();
if (!previous && options.leading === false) previous = now;
let remaining = wait - (now - previous);
context = this;
args = arguments;
if (remaining <= 0 || remaining > wait) {
if (time) {
clearTimeout(time);
time = null;
}
previous = now;
func.apply(context, args);
if (!time) context = args = null;
} else if (!time && options.trailing !== false) {
time = setTimeout(later, remaining);
}
};
return throttled;
};
var chart = this.chart;
this.chart.__resize = throttle(function(){
chart.resize();
},200);
setTimeout(() => {
window.addEventListener('resize',this.chart.__resize);
}, 200);
},
将数据源提出去(与vue对象分离)
<template>
<div id="mycharts"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "MyEcharts",
beforeDestroy() {
// 移除窗口改变监听
window.removeEventListener("resize", this.mycharts.resize);
},
data() {
return {
mycharts: null,
};
},
methods: {
//当数据变化的时候调用这个接口即可
setOption(option) {
if (this.mycharts){
this.mycharts.dispose()
}
this.mycharts = echarts.init(document.getElementById("mycharts"));
this.mycharts.setOption(option);
window.addEventListener("resize", this.mycharts.resize);
},
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#mycharts {
width: 100%;
height: 100%;
}
</style>
修改后完整的代码如下：
main.js
import Vue from 'vue'
import App from './App.vue'
import * as echarts from "echarts"
// 绑定在vue的原型对象上
Vue.prototype.$echarts=echarts
import MyEcharts from "./components/MyEcharts"
Vue.component("MyEcharts",MyEcharts)
// 关闭生产提示
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#root')
App.vue
<template>
<div id="app">
<div class="charts">
<my-echarts ref="chart1" :option="option"></my-echarts>
</div>
<div class="footer">
<button class="b1" @click="b1">上一个</button>
<button class="b2" @click="b2">下一个</button>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
let chartsList=[这里存放图标配置项option]
export default {
name: "app",
components:{},
data() {
return {
// 指向目前指向的是哪个图表
pointer: 0,
option: null,
};
},
mounted() {
this.$refs.chart1.setOption(chartsList[0])
},
methods: {
b1() {
console.log("后退！！");
if (this.pointer == 0) {
this.pointer = chartsList.length;
}
this.pointer--;
// this.option = chartsList[this.pointer];
this.$refs.chart1.setOption(chartsList[this.pointer])
},
b2() {
console.log("前进！！", chartsList.length + 1, this.pointer);
this.pointer = (this.pointer + 1) % chartsList.length;
// this.option = chartsList[this.pointer];
this.$refs.chart1.setOption(chartsList[this.pointer])
},
},
};
</script>
<style scoped>
#app {
background-color: #ddd;
text-align: center;
width: 100%;
height: 800px;
}
.charts {
width: 100%;
height: 90%;
/* background-color: blue; */
}
.footer {
margin-top: 20px;
/* background-color: red; */
}
.b1 {
margin: 0 50px;
}
</style>
MyEcharts.vue
<template>
<div id="mycharts"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "MyEcharts",
beforeDestroy() {
// 移除窗口改变监听
window.removeEventListener("resize", this.mycharts.resize);
},
data() {
return {
mycharts: null,
};
},
methods: {
setOption(option) {
if (this.mycharts){
this.mycharts.dispose()
}
this.mycharts = echarts.init(document.getElementById("mycharts"));
this.mycharts.setOption(option);
window.addEventListener("resize", this.mycharts.resize);
},
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#mycharts {
width: 100%;
height: 100%;
}
</style>
程序到目前为止已经该有的都有了但是还是不够完善，如果大家有什么好的介意或者意见欢迎共同探讨。
到此这篇关于Vue Echarts实现图表轮播图以及图表组件封装和节流函数优化讲解的文章就介绍到这了,更多相关Vue Echarts图表轮播图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue echarts封装实现流程
将echarts封装成组件,达到只要调用方法,传入数据和相应的参数就能生成图表的效果,避免在项目中编写大量重复和累赘的echarts的配置代码,实现的思路如下: 接口返回的一般是json数据,所以首先要将json数据进行处理,处理成echarts需要的数据形式 将echarts的配置代码封装在一个方法里,通过自定义的配置名进行调用 下面对我自己封装的组件 EchartsGenerate 逐步解释 首先看template <template> <div> <slot>&l
-
Vue ECharts简易实现雷达图
目录 前言 雷达图特点 雷达图的基本实现 雷达图的常见效果 显示数值 区域面积 绘制类型 完整代码 前言 本篇来学习写雷达图 雷达图特点 可以用来分析多个维度的数据与标准数据的对比情况 雷达图的基本实现 ECharts 最基本的代码结构 定义各个维度的最大值 准备具体产品的数据 在 series 下设置 type:radar <!DOCTYPE html> <html lang="en"> <head> <meta charset="
-
Vue使用Echarts实现大屏可视化布局示例详细讲解
目录 一.效果展示 二.基本的布局 三.背景 四.代码 布局中遇到的一些问题 一.效果展示 先看一下展示的效果,无论是尺寸多宽的屏幕,都会将内容显示完整,做到了正正的响应式.唯一不足的是图表中的样例,会随着图表的缩放而变换位置,窗口尺寸变化过快会反应不过来,好在有节流函数,可以让浏览器计算量没有那么大.本篇博客不会直接拿echarts图表下手,会先介绍一些这个大屏可视化的响应式布局.后面会出一个专门的博客介绍echarts的使用. 二.基本的布局 大致的布局如下,整体分为头部与body,头部有标
-
Vue使用Echarts画柱状图详解
目录 前言 柱状图实现步骤 柱状图常见效果 标记 显示 前言 本篇来学习下柱状图的实现 柱状图实现步骤 ECharts 最基本的代码结构 准备x轴的数据 准备 y 轴的数据 准备 option , 将 series 中的 type 的值设置为: bar <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v
-
Vue ECharts设置主题实现方法介绍
目录 前言 内置主题 自定义主题 前言 本篇来学习下ECharts中如何设置图表主题 内置主题 ECharts 中默认内置了两套主题: light dark var chart = echarts.init(dom, 'light') var chart = echarts.init(dom, 'dark') <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu
-
Vue Echarts简易实现仪表盘
目录 前言 仪表盘的特点 仪表盘的基本实现 仪表盘的常见效果 前言 本篇来学习写仪表盘图 仪表盘的特点 可以更直观的表现出某个指标的进度或实际情况 仪表盘的基本实现 ECharts 最基本的代码结构 准备数据, 设置给 series 下的 data 在 series 下设置 type:gauge <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
-
Vue Echarts实现图表轮播图以及图表组件封装和节流函数优化讲解
目录 一.为什么要优雅的使用echarts 二.最初的表格组件 三.初步的封装 四.性能优化 一.为什么要优雅的使用echarts 为了提高代码的规范性.复用性,vue中最常用的就是将具有某些功能的代码封装到一个插件.如果没有对插件进行封装,在后期使用插件的时候效率会十分低下也不便于后期对程序的维护拓展,在优雅的使用echarts时,首先,我们考虑到多个地方需要用到echarts,就需要封装一个组件出来,由于每一个图中的属性均由配置项option进行控制,所以我们可以将option选项提取出来,
-
Vue手写横向轮播图的实例
目录 Vue手写横向轮播图 Vue常见的轮播图 Vue手写横向轮播图 前提:自己封装的轮播图,暂时没测出bug~ 效果如下图,一行三个,点击上一张/下一张 向前或向后移动一格,窗口缩放会适当变形,不影响切换 <template> <div class="swiper-template"> <div class="my-swiper-page"> <div class="page-left"> <
-
vue利用better-scroll实现轮播图与页面滚动详解
前言 better-scroll 也很强大,不仅可以做普通的滚动列表,还可以做轮播图.picker 等等...所以本文主要给大家介绍了关于vue用better-scroll实现轮播图与页面滚动的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 1.安装better-scroll 在根目录中package.json的dependencies中添加: "better-scroll": "^0.1.15" 然后 npm i 安装. 2.封装代码
-
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
先看案例,使用vue+swiper实现,slide不同高度时,动态计算盒子高度,让其下方高度自适应的效果 首先搭建vue项目,这里不做过多说明,然后安装swiper npm install swiper --save-dev 1. js部分:初始化swiper组件,vue要在mounted生命周期中进行初始化,代码如下: import Swiper from 'swiper' import { TweenMax, Power2 } from 'gsap' 初始化时调用resize函数,计算屏幕容
-
vue中使用swiper轮播图的正确姿势(亲测有效)
目录 前言 1.新建vue项目 2.装swiper的包 3.使用swiper 总结 前言 网上搜了一大堆在vue中如何使用swiper,结果搜出来一堆垃圾,也不知道从哪里复制的,吐槽完毕.假设你是个新手,我从新建项目开始跟你讲,以下是步骤. 1.新建vue项目 vue create 项目名 然后选最下面那一个(键盘上下键操作)然后回车 选择Bable,Router,Vuex,Css-Processords四个,其他的不要选中(空格键是选中和取消选中) 剩下的步骤按这张图来进行选择,然后项目就创建
-
Python轮播图与导航栏功能的实现流程全讲解
目录 轮播图功能 安装依赖模块 上传文件相关配置 注册home子应用 创建轮播图的model模型 创建Banner的序列化器 创建Banner的视图类 配置Banner的路由 配置Xadmin 配置文件注册Xadmin应用 在总路由中添加xadmin的路由信息 给Xadmin配置基本的站点信息 注册轮播图模型到xadmin中 修改后端Xadmin中子应用名称 给轮播图添加测试数据 web端代码获取数据 导航栏的实现 前端导航栏子组件Header的代码 后端导航栏的实现 设计导航栏的model模型
-
js轮播图的插件化封装详解
本文实例为大家分享了js轮播图的插件化封装代码,供大家参考,具体内容如下 具体代码如下: ~function(){ function AutoBanner(curEleId,ajaxURL,interval){ //把之前存储获取元素的变量都作为当前实例的私有属性 this.banner = document.getElementById(curEleId); this.bannerInner = utils.firstChild(this.banner); this.bannerTip = u
-
vue.js实现简单轮播图效果
学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的.说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition. (1)先写出整体的框架 <template> <div class="slide-show&
-
Vue中如何实现轮播图的示例代码
这个功能我感觉在任何项目中都会涉及到,今天我就把我的实现方法跟大家分享一下,有不对的地方还请指出,我好更新. 下面是整体代码,我把轮播图单独做了一个组件,大家可以拿来就用,具体代码如下: <template> <div class="content"> <div class="focus"> <!-- focus begin --> <swiper :options="swiperOption"
-
vue如何实现无缝轮播图
目录 vue实现无缝轮播图 轮播图的思路 无缝轮播(跑马灯效果) vue实现无缝轮播图 轮播图的思路 一组图片进行不停地循环,如果循环到最后一张图片,就从第一张开始,不停循环,我们可以设置图片切换的时间. 1.首先我们先把我们需要用到的数据以数组的方式定义在data中,再定义一个当前显示在页面的图片的值,默认为0. data() { return { v:0, imglist:[ {"id":0,img:"/pics/pic