首页 > 新闻中心
专业知识

高速焊接工艺

浏览:725次    发布日期: 2017-06-03


简介

在开发前端项目的过程中华体会首页 ,有大量的图表数据要显示。为了简化代码的使用和重用,基于ECharts封装了各种图表组件。直接使用打包的组件对本项目的新手会更加友好,理解组件的打包思想和打包细节将有助于我们在实践中更熟练地使用组件。本文将以雷达图为例,逐步说明如何在Vue项目中使用echart以及如何将echart封装到可以重复调用的组件中。

准备工作

开始之前凤凰体育App ,我们首先按照正常的组件注册过程进行操作,在项目components目录中创建一个名为radar-chart的新组件,然后在“演示”页面上介绍要使用的组件。

新创建的雷达图组件的内容:

// radar-chart.vue (子组件)
<div style="width:100%;height:100%;"></div>

演示页面代码:

// demo.vue (父组件)
<div style="border:1px solid #000000;width:400px;height:300px;margin:5px;">
        </div>

封装json数据_数据封装过程_数据通信的基本过程

演示页面渲染图之一

file

初始化图表

准备工作完成后,我们要做的是引入ECharts并在组件中初始化ECharts的实例。在这里,我们可以先复制官方网站的实例和数据。

(1)将ECharts引入radar-chart.vue:

// radar-chart.vue (子组件)
import echarts from 'echarts';

([2)在方法中创建图表配置数据的方法,有关数据格式数据封装过程,请参阅Echarts官方网站:

// radar-chart.vue (子组件)
    methods: {
        // 初始化图表配置
        initOption() {
            let vm = this;
            vm.option = {
                title: {
                    text: '基础雷达图'
                },
                tooltip: {},
                legend: {
                    data: ['预算分配(Allocated Budget)', '实际开销(Actual Spending)']
                },
                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator: [{ name: '销售(sales)', max: 6500}, { name: '管理(Administration)', max: 16000}, { name: '信息技术(Information Techology)', max: 30000}, { name: '客服(Customer Support)', max: 38000}, { name: '研发(Development)', max: 52000}, { name: '市场(Marketing)', max: 25000}]
                },
                series: [{
                    name: '预算 vs 开销(Budget vs spending)',
                    type: 'radar',
                    // areaStyle: {normal: {}},
                    data: [{value: [4300, 10000, 28000, 35000, 50000, 19000], name: '预算分配(Allocated Budget)'}, {value: [5000, 14000, 28000, 31000, 42000, 21000], name: '实际开销(Actual Spending)'}]
                }]
            };
        },
    },

数据通信的基本过程_封装json数据_数据封装过程

([3)初始化图表:

在组件挂钩的安装方法中:

// radar-chart.vue (子组件)
    mounted() {
        this.initOption();
        this.$nextTick(() =&gt; { // 这里的 $nextTick() 方法是为了在下次 DOM 更新循环结束之后执行延迟回调。也就是延迟渲染图表避免一些渲染问题
            this.ready();
        });
    },

在方法中:

// radar-chart.vue (子组件)
        ready() {
            let vm = this;
            let dom = document.getElementById('radar-chart');
            vm.myChart = echarts.init(dom);
            vm.myChart &amp;&amp; vm.myChart.setOption(vm.option);
        },

演示页面呈现两种:

file

这里有三个步骤,介绍ECharts,初始化图表配置和初始化图表。最后鸭脖官网 ,您可以在“演示”页面上看到ECharts的雷达图已最初显示在项目中。

封装json数据_数据封装过程_数据通信的基本过程

提取图表配置属性(重点)

我们已经成功地在上面创建了雷达图,但是很明显,radar-chart.vue中的数据是硬编码的,不能重复调用。接下来,我们开始封装事物。

封装的想法是这样的

demo.vue将一组个性化数据传递给radar-chart.vue Radar-chart.vue通过props选项接收数据以优化接收到的数据并覆盖配置数据选项以初始化图表

具体实现:

将数据传输到子组件,定义数据中的变量并分配已安装的值

// demo.vue (父组件)
<div style="border:1px solid #000000;width:900px;height:600px;margin:5px;">
        </div>

从道具中的父组件接收数据

数据通信的基本过程_数据封装过程_封装json数据

// radar-chart.vue (子组件)
    props: {
        // 指示器数据,必传项
        // 格式举例 [{ name: 'a', max: 1},{ name: 'a', max: 1},{ name: 'a', max: 1}]
        indicator: {
            type: Array,
            default: () =&gt; []
        },
        // 图例数据,必填项。
        // 格式举例 [{ value: [5000, 14000, 28000], name: 'name' },{ value: [5000, 14000, 28000], name: 'name' }]
        legendData: {
            type: Array,
            default: () =&gt; []
        },
    },

ready()中的更新图表数据选项

如果您在此处更新指标和数据的两个属性值,则无需在initOption()中初始化这两个值

// radar-chart.vue (子组件)
    ready() {
            let vm = this;
            let dom = document.getElementById('radar-chart');
            vm.myChart = echarts.init(dom);
            // 得到指示器数据
            vm.option.radar.indicator = vm.indicator;
            // 得到图例数据
            vm.option.series[0].data = vm.legendData;
            vm.myChart &amp;&amp; vm.myChart.setOption(vm.option);
        },

演示页面效果图三:

file

细节优化和其他考虑因素

>以下代码是基于对完整代码的修改和添加的

数据封装过程_封装json数据_数据通信的基本过程

1.如果一页上有多个图表数据封装过程鸭脖app官网 ,则会自动生成图表ID。有关实现原理诈金花官网 ,请参阅[ES6模块化和.vue组件应用示例]“ ES6模块化和.vue组件应用示例”)。补充代码:

// radar-chart.vue (子组件)
<div style="height:100%;width:100%;"></div>

2.图表数据属性是通过prop接收的,图表默认配置属性是使用defaultConfig保存的,父组件chartConfig传入的配置属性是通过$ attrs直接获取的,并最终合并到finallyConfig中以供使用,这有利于扩展和维护。补充代码:

// radar-chart.vue (子组件)

3.使用手表监视图表数据更新

// radar-chart.vue (子组件)
    watch: {
        legendData() {
            this.$nextTick(() =&gt; {
                this.ready();
            });
        }
    },

4.添加窗口调整大小事件和图表单击事件

// radar-chart.vue (子组件)
export default {
    data() {
	    return {
            chartResizeTimer: null, // 定时器,用于resize事件函数节流
		};
	},
	methods: {
		ready() {
            // 添加窗口resize事件
            window.addEventListener('resize', vm.handleChartResize);
			
            // 触发父组件的 @chartClick 事件
            vm.myChart.on('click', function(param) {
                vm.$emit('chartClick', param);
            });
		},
		
		// 处理窗口resize事件
        handleChartResize() {
            let vm = this;
            clearTimeout(vm.chartResizeTimer);
            vm.chartResizeTimer = setTimeout(function() {
                vm.myChart &amp;&amp; vm.myChart.resize();
            }, 200);
        },
    },
    beforeDestroy() {
        // 释放该图例资源,较少页面卡顿情况
        if (this.myChart) this.myChart.clear();
        // 移除窗口resize事件
        window.removeEventListener('resize', this.handleChartResize);
    }
};

辛运28
分享到:
上一篇:焊割自动化解决方案
下一篇:
返回列表
首页 |  关于我们 |  新闻中心 |  产品中心 |  成功案例 |  联系我们 | 
分享到: