热门搜索 :
教你做菜
您的当前位置:首页正文

使用Vue开发动态刷新Echarts组件的教程详解

2023-11-30 来源:海亿美食网
这篇文章主要介绍了使用Vue开发动态刷新Echarts组件的教程详解,需要的朋友可以参考下

需求背景:dashboard作为目前企业中后台产品的“门面”,如何更加实时、高效、炫酷的对统计数据进行展示,是值得前端开发工程师和UI设计师共同思考的一个问题。今天就从0开始,封装一个动态渲染数据的Echarts折线图组件,抛砖引玉,一起来思考更多有意思的组件。

准备工作

项目结构搭建

因为生产需要(其实是懒),所以本教程使用了 ==vue-cli==进行了项目的基础结构搭建。

安装Echarts

直接使用npm进行安装。

引入Echarts

到此,准备工作已经完成了。

静态组件开发

因为被《React编程思想》这篇文章毒害太深,所以笔者开发组件也习惯从基础到高级逐步迭代。

静态组件要实现的目的很简单,就是把Echarts图表,渲染到页面上。

新建Chart.vue文件

上述文件就实现了将一个简单折线图渲染到页面的组件,怎么样是不是很简单?最简使用方法如下:

App.vue

至此,运行程序你应该能看到以下效果:

第一次迭代

现在我们已经有了一个基础版本,让我们来看看哪些方面做的还不尽如人意:

  1. 图表无法根据窗口大小进行自动缩放,虽然设置了宽度为100%,但是只有刷新页面图表才会重新进行渲染,这会让用户体验变得很差。

  2. 图表目前无法实现数据自动刷新

下面我们来实现这两点:

自动缩放

Echarts本身是不支持自动缩放的,但是Echarts为我们提供了resize方法。

只需要这一句,我们就实现了图表跟随窗口大小自适应的需求。

支持数据自动刷新

因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染,这是实现本需求的基础。我们再设想一下,如果想要支持数据的自动刷新,必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据。所幸Vue为我们提供了==watcher==功能,通过它我们可以很方便的实现上述功能:

上面代码就实现了我们对option对象中属性变化的监听,一旦option中的数据有了变化,那么图表就会重新渲染。

实现动态刷新

下一步我想大家都知道了,就是定时从后台拉取数据,然后更新父组件的option就好。这个地方有两个问题需要思考一下:

  1. 如果图表要求每秒增加一个数据,应该如何进行数据的请求才能达到性能与用户体验的平衡?

  2. 动态更新数据的代码,应该放在父组件还是子组件?

对第一个问题,每秒实时获取服务器的数据,肯定是最精确的,这就有两种方案:

  • 每秒向后台请求一次

  • 保持长连接,后台每秒向前端推送一次数据

  • 第一种方案无疑对性能和资源产生了极大的浪费;除非实时性要求特别高(股票系统),否则不推荐这种方式;

    第二种方案需要使用web Socket,但在服务端需要进行额外的开发工作。

    笔者基于项目的实际需求(实时性要求不高,且后台生成数据也有一定的延迟性),采用了以下方案:

    1. 前端每隔一分钟向后台请求一次数据,且为当前时间的上一分钟的数据;

    2. 前端将上述数据每隔一秒向图表set一次数据

    关于第二个问题:笔者更倾向于将Chart组件设计成纯组件,即只接收父组件传递的数据进行变化,不在内部进行复杂操作;这也符合目前前端MVVM框架的最佳实践;而且若将数据传递到Chart组件内部再进行处理,一是遇到不需要动态渲染的需求还需要对组件进行额外处理,二是要在Chart内部做ajax操作,这样就导致Chart完全没有了可复用性。

    接下来我们修改App.vue

    至此我们就实现了图表动态数据加载,效果如下图:

    总结

    这篇教程通过一个动态图表的开发,传递了以下信息:

  • Echarts如何与Vue结合使用

  • Vue组件开发、纯组件与“脏”组件的区别

  • Vue watch的用法

  • let的特性

  • JavaScript EventLoop特性

  • ...

  • 大家可以根据这个列表查漏补缺。

    后续优化

    1. 这个组件还有需要需要优化的点,比如:

    2. 间隔时间应该可配置

    3. 每分钟从后台获取数据,那么图表展示的数据将会越来越多,越来越密集,浏览器负担越来越大,直到崩溃

    4. 没有设置暂停图表刷新的按钮

    5. ...

    上面是我整理给大家的,希望今后会对大家有帮助。

    相关文章:

    Ajax+Struts2实现验证码验证功能(图文教程)

    Ajax点击不断加载数据列表(图文教程)

    非常实用的ajax用户注册模块

    小编还为您整理了以下内容,可能对您也有帮助:

    vue.js中使用echarts实现数据动态刷新功能

    在vue使用echarts时,可能会遇到这样的问题,就是数据变化时,echarts不更新
    这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染
    如果想要支持数据的自动刷新,必然需要一个*能够实时监听到数据的变化然后告知Echarts重新设置数据。
    Vue提供了“watch”:

    vue.js中使用echarts实现数据动态刷新功能

    在vue使用echarts时,可能会遇到这样的问题,就是数据变化时,echarts不更新
    这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染
    如果想要支持数据的自动刷新,必然需要一个*能够实时监听到数据的变化然后告知Echarts重新设置数据。
    Vue提供了“watch”:

    在vue中如何使用echarts

    本篇文章主要介绍了在vue中通过axios异步使用echarts的方法,现在分享给大家,也给大家做个参考。

    现实的工作中, 数据不可能是像之前的demo演示的那样把数据写死的. 所有的数据都应该通过发送请求进行获取, 所以, 这篇文章, 我将在Vue项目中使用Echarts: 在Vue中引入Echarts中的数据提取出来, 放入到static/data.json文件中,请求该文件获取数据。

    一、 实现异步加载数据

    (一)引入vue-resource

    通过npm下载axios

    //命令行中输入

    npm install axios --save在main.js中引入axios并注册

    // main.js

    import http from './http'

    Vue.prototype.$http = http //挂载到原型上(二)设置data.json

    将该柱状图的没有数据的option抽取到data.json中, 代码如下:

    {

    "title": { "text": "简单饼状图" },

    "tooltip": {},

    "xAxis": {

    "data": ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],

    "name": "产品"

    },

    "yAxis": {},

    "series": [{

    "name": "销量",

    "type": "bar",

    "data": [5, 20, 36, 10, 10, 20],

    "itemStyle": {

    "normal": {

    "color": "hotpink"

    }

    }

    }]

    }(三)在async-bar-chart.vue中请求数据

    从aysnc-barChart-option.js中引入option

    在methods中添加drawBarChart()方法

    在mounted()钩子函数中调用drawBarChart()

    代码如下:

    <template>

    <p id="myChart" :style="{width: '800px', height: '400px'}"></p>

    </template>

    <script>

    export default {

    name: 'echarts',

    data() {

    return {

    msg: 'Welcome to Your Vue.js App',

    goods: {}

    }

    },

    mounted() {

    this.drawLine();

    },

    created() {

    this.$http.get('./static/dat.json').then(res => {

    const data = res.data;

    this.goods = data

    console.log(this.goods);

    console.log(Array.from(this.goods.xAxis.data));

    })

    },

    methods: {

    drawLine() {

    // 基于准备好的dom,初始化echarts实例

    let myChart = this.$echarts.init(document.getElementById('myChart'))

    // 绘制图表

    myChart.setOption({

    title: {}, //{text: '异步数据加载示例'},

    tooltip: {},

    xAxis: {

    data: [] //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

    },

    yAxis: {},

    series: [{

    name: '销量',

    type: 'bar',

    data: [] //[5, 20, 36, 10, 10, 20]

    }]

    });

    this.$http.get("./static/dat.json") .then((res) => {

    const data = res.data;

    const list = data.series.map(good=>{

    let list = good.data;

    return [...list]

    })

    console.log(list);

    console.log(Array.from(...list));

    myChart.setOption({

    title: data.title,

    xAxis: [{

    data: data.xAxis.data

    }],

    series: [{

    name: '销量',

    type: 'bar',

    data: Array.from(...list) //[5, 20, 36, 10, 10, 20]

    }]

    });

    })

    }

    }

    }

    </script>

    二. 添加加载动画

    如果数据加载时间较长,一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了,因此需要一个 loading 的动画来提示用户数据正在加载。

    ECharts 默认有提供了一个简单的加载动画。只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。

    在drawLine()方法中添加showLoading()和hideLoading(), 代码如下:

    methods: {

    drawLine() {

    // 基于准备好的dom,初始化echarts实例

    let myChart = this.$echarts.init(document.getElementById('myChart'))

    // 绘制图表

    myChart.setOption({

    title: {}, //{text: '异步数据加载示例'},

    tooltip: {},

    xAxis: {

    data: [] //["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

    },

    yAxis: {},

    series: [{

    name: '销量',

    type: 'bar',

    data: [] //[5, 20, 36, 10, 10, 20]

    }]

    });

    //显示加载动画

    myChart.showLoading();

    this.$http.get("./static/dat.json").then((res) => {

    setTimeout(() => { //未来让加载动画效果明显,这里加入了setTimeout,实现3s延时

    const data = res.data;

    const list = data.series.map(good => {

    let list = good.data;

    return [...list]

    })

    console.log(list);

    console.log(Array.from(...list));

    myChart.hideLoading(); //隐藏加载动画

    myChart.setOption({

    title: data.title,

    xAxis: [{

    data: data.xAxis.data

    }],

    series: [{

    name: '销量',

    type: 'bar',

    data: Array.from(...list) //[5, 20, 36, 10, 10, 20]

    }]

    });

    }, 3000)

    })

    }

    }

    上面是我整理给大家的,希望今后会对大家有帮助。

    相关文章:

    React-native桥接Android如何实现,具体步骤又是什么?

    在vue中如何开发自定义指令directive

    移动web开发中有关touch事件(详细教程)

    详细解读layui父子窗口如何传递参数

    在微信小程序中如何实现image组件图片自适应显示

    在Vue中使用echarts

    由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的(懒省事),eg:vue-echarts ,但是拉取下来发现,跟项目中使用的类型有点偏差,而且他们的数据大多都是定制好的,我很难在此基础上进行更改(惹不起),于是选择了放弃,最终还是选择echarts。以下是我使用的一些心得体会~

    我的示例是在vue-cli搭建

    首先需要全局引入
    在main.js中

    在Echarts.vue中
    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>

    注意:我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

    这样一个简单的图表就完成了,是不是觉得很简单?假如在一个大型的项目中,而且数据是非常复杂的?那么该如何操作?

    由于全局引入会将所有的echarts图表打包,导致体积过大
    在Echarts.vue文件中

    使用 require 而不是 import

    基于前面的疑问,加上实际运用到项目中遇到的一些问题,我思考使用组件的形式。

    从上边可以看出,你每次在使用echarts的时候,都必须要重复的引入,这样很不方便
    vue作为一个组件化开发的框架,我们可以使用组件的方式进行集成。每次我们引入组件,进行使用,这样就方便的多。
    下面是一个我自己对echarts进行的一个简单的vue组件的集成。
    在echarts中
    子组件:

    props部分是我接收到的参数,父组件获取数据分发,data是父组件分发给echarts的数据源。

    父组件:

    如果在大型的项目,而且图表又非常的多,那么vuex少不了。如果把数据集中存储到了vuex中,echarts组件再从vuex中获取数据,我们也能随时保存获取的结果,对这些数据可以添加收藏也可以加入缓存中,下次再请求可以先从缓存调用。接下来会继续分享vuex的使用~~~

    在Vue中使用echarts

    由于在项目中需要对数据进行可视化处理,也就是用图表展示,众所周知echarts是非常强大的插件。一开始想在网上找一个基于vue封装好的(懒省事),eg:vue-echarts ,但是拉取下来发现,跟项目中使用的类型有点偏差,而且他们的数据大多都是定制好的,我很难在此基础上进行更改(惹不起),于是选择了放弃,最终还是选择echarts。以下是我使用的一些心得体会~

    我的示例是在vue-cli搭建

    首先需要全局引入
    在main.js中

    在Echarts.vue中
    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>

    注意:我们要在mounted生命周期函数中实例化echarts对象。因为我们要确保dom元素已经挂载到页面中

    这样一个简单的图表就完成了,是不是觉得很简单?假如在一个大型的项目中,而且数据是非常复杂的?那么该如何操作?

    由于全局引入会将所有的echarts图表打包,导致体积过大
    在Echarts.vue文件中

    使用 require 而不是 import

    基于前面的疑问,加上实际运用到项目中遇到的一些问题,我思考使用组件的形式。

    从上边可以看出,你每次在使用echarts的时候,都必须要重复的引入,这样很不方便
    vue作为一个组件化开发的框架,我们可以使用组件的方式进行集成。每次我们引入组件,进行使用,这样就方便的多。
    下面是一个我自己对echarts进行的一个简单的vue组件的集成。
    在echarts中
    子组件:

    props部分是我接收到的参数,父组件获取数据分发,data是父组件分发给echarts的数据源。

    父组件:

    如果在大型的项目,而且图表又非常的多,那么vuex少不了。如果把数据集中存储到了vuex中,echarts组件再从vuex中获取数据,我们也能随时保存获取的结果,对这些数据可以添加收藏也可以加入缓存中,下次再请求可以先从缓存调用。接下来会继续分享vuex的使用~~~

    vue中用echarts 动态刷新数据没变化解决

        <v-chart :options="options" :auto-resize="true" style="height: 500px; width: 100%;">

    export default {

    // 父组件传递过来的数据 (两种方式声明:1.数组 2.对象)

      props: {

    titleText: {

    type:String,

          default: () => {

    return '2019 前三季度达标率统计'

          }

    }, // 图表名称

        isPercentage: {

    type:Boolean

        }, // 是否是%

        xAxisData: {

    type:Array,

          default: () => {

    return ['兰州市', '嘉峪关市', '金昌市', '白银市', '天水市', '威武市', '庆阳市']

    }

    },

        seriesData: {

    type:Array,

          default: () => {

    return [100, 100, 17, 100, 100, 100, 17]

    }

    }

    },

      // 数据

      data() {

    return {

    title:'',

          options: {}

    }

    },

      // 要用到哪些子组件

      components: {},

      // 计算属性

      computed: {},

      // 监听

      watch: {

    seriesData: {

    handler(newName, oldName) {

    if (oldName) {

    this.setOptions()

    }

    },

          immediate:true,

          deep:true

        }

    },

      // 生命周期钩子:实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用

      created() {

    },

      // 生命周期钩子:组件实例渲染完成时调用

      mounted() {

    this.setOptions()

    },

      // 函数集,

      methods: {

    setOptions() {

    this.options = {

    title: {

    text:this.titleText,

              left:'center'

            },

            color:this.$config.chartsColor,

            tooltip: {

    trigger:'axis',

              axisPointer: {// 坐标轴指示器,坐标轴触发有效

                type:'shadow' // 默认为直线,可选为:'line' | 'shadow'

              }

    },

            grid: {

    left:'3%',

              right:'4%',

              bottom:'3%',

              containLabel:true

            },

            xAxis: [

    {

    type:'category',

                data:this.xAxisData,

                axisTick: {

    alignWithLabel:true

                }

    }

    ],

            yAxis: [

    {

    type:'value',

                axisLabel: {

    formatter:this.isPercentage ?'{value} %' :'{value}'

                }

    }

    ],

            series: [

    {

    name:'直接访问',

                type:'bar',

                barWidth:'38%',

                data:this.seriesData,

                label: {

    show:true,

                  position:'inside',

                  formatter: (params) => {

    return `${params.value}%`

                  }

    }

    }

    ]

    }

    }

    }

    }

    主要在watch中监听事件,发生变化时,setOptions

    在vue 中使用百度echarts

    前言:在vue2.0中使用 百度echarts 有三种解决方案。

    这样每次都要获取图表dom元素 然后通过setOption渲染数据,最后在mounted中初始化。很麻烦。

    vue-echarts 是ECharts 的 Vue.js 组件,基于 ECharts v4.1.0 + 开发,依赖 Vue.js v2.2.6 +,意思就是可以直接把echarts实例当中vue中的组件来使用,不用每次都获取dom、挂在dom,轻松使用echarts的所用功能。。。

    v-charts 是基于vue2二次封装的图表组件库,功能没有echarts多 但也够用了,官网很详细,这里用一个官网例子说明问题。

    以上,可跟据需求选用,如果需求简单可直接用 v-charts

    Top