Vue+Echarts+datav实现数据可视化

原创

已于 2022-03-17 19:14:17 修改 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js #前端

于 2022-03-17 19:06:57 首次发布

本文展示了如何使用Vue和Echarts库创建动态数据可视化图表，包括机器人巡检异常告警和矿场生产数据的可视化。通过模块化组件设计，实现了点击条形图触发数据缩放的效果，更新数据并展示在多个图表中，如近七天的选矿、宏基建设和地采数据。此外，代码还涉及到了组件间通信，通过props传递数据，实现数据的实时更新。

Vue+Echarts+datav实现数据可视化

首先来看效果图
- 机器人巡检异常告警数据可视化
- 某矿场生产数据可视化（快速原型）
模块化

首先来看效果图

机器人巡检异常告警数据可视化

请添加图片描述

某矿场生产数据可视化（快速原型）

请添加图片描述

模块化

<template>
    <div :id="'barChart' + barSet.barIndex" ref="barChart" style="width: 100%; height: 30vh"></div>
</template>

<script>
    import * as echarts from 'echarts';
    export default {
    
    
        name: "barChart",
        props: {
    
    
          barSet: {
    
     type: Object, required: true }
        },
        data() {
    
    
            return {
    
    
                timer: null,
                option: {
    
    
                    xAxis: [
                        {
    
    
                            data: []
                        }
                    ],
                    yAxis: [

                    ],
                    series: [

                    ]
                }
            }
        },
        methods: {
    
    
            createLineChart() {
    
    
                var chartDom = this.$refs.barChart
                var myChart = echarts.init(chartDom);
                this.option.series.forEach(item => {
    
    
                    item.data = []
                })
                this.option = {
    
    
                    grid:{
    
    
                        x:55,
                        y:35,
                        x2:10,
                        y2:165,
                        borderWidth:10
                    },
                    title: {
    
    
                        text: this.barSet.title,
                        textStyle: {
    
    
                            fontSize: 15,
                            fontWeight: 'normal',              //标题颜色
                            color: '#ffffff',
                        },
                    },
                    xAxis: {

最低0.47元/天解锁文章