Vue怎么封装Echarts图表

这篇文章主要讲解了“Vue怎么封装Echarts图表”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue怎么封装Echarts图表”吧！

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：主机域名、雅安服务器托管、营销软件、网站建设、沐川网站维护、网站推广。

在开始之前，我们先按照正常的组件注册流程，在项目components目录中新建一个名为radar-chart的组件，然后在一个Demo页面引入该组件使用。

新建的 radar-chart 组件内容：

// radar-chart.vue （子组件）

Demo 页面代码：

// demo.vue （父组件）

Demo 页面效果图一：

初始化图表

准备工作完成之后，我们要做的是引入 ECharts，并在组件中初始化一个 ECharts 的实例，这里可以先照搬官网的实例和数据。
（1）在 radar-chart.vue 引入 ECharts ：

// radar-chart.vue （子组件）
import echarts from 'echarts';

（2）在 methods 中创建图表配置数据的方法，数据格式参考 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）'}]
                }]
            };
        },
    },

（3）初始化图表： 在组件钩子 mounted 方法中：

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

在 methods 中：

// radar-chart.vue （子组件）
   ready() {
      let vm = this;
      let dom = document.getElementById('radar-chart');

      vm.myChart = echarts.init(dom);
      vm.myChart && vm.myChart.setOption(vm.option);
   },

Demo 页面效果图二：

这里一共分了三步，引入 ECharts、初始化图表配置、初始化图表，最后可以在 Demo 页面中看到，已经初步地把 ECharts 的雷达图显示到项目中来了。

提取图表配置属性（重点）

上面我们已经成功创建一个雷达图了，但是很明显的是，radar-chart.vue 里的数据写死的，无法重复调用。接下来着手封装的事情了。

封装的思路是这样的：

1、demo.vue 向 radar-chart.vue 传递一组个性化数据

2、radar-chart.vue 通过 props 选项接收数据

3、提炼接收到的数据，覆盖配置数据 option

4、初始化图表

具体实现： 向子组件传递数据，在 data 中定义变量，在 mounted 中赋值

// demo.vue （父组件）

在 props 中接收来自父组件的数据

// radar-chart.vue （子组件）

    props: {
        // 指示器数据，必传项
        // 格式举例 [{ name: 'a', max: 1},{ name: 'a', max: 1},{ name: 'a', max: 1}]
        indicator: {
            type: Array,
            default: () => []
        },
        // 图例数据，必填项。
        // 格式举例 [{ value: [5000, 14000, 28000], name: 'name' }，{ value: [5000, 14000, 28000], name: 'name' }]
        legendData: {
            type: Array,
            default: () => []
        },
    },

在 ready() 中更新图表数据 option 如果在这里更新 indicator、data 这两个属性值，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 && vm.myChart.setOption(vm.option);
    },

Demo 页面效果图三：

细节优化与其他注意事项：

1.一个页面有多个图表的情况下，自动生成图表 ID。

// radar-chart.vue （子组件）

2.图表数据属性用 props 接收，图表默认配置属性用 defaultConfig 保存，父组件传入的配置属性 chartConfig 通过 $attrs 直接取得，最终合并为 finallyConfig 使用，利于扩展与维护。

// radar-chart.vue （子组件）

3.使用 watch 监听图表数据更新

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

4.添加窗口 resize 事件和图表 click 事件

// 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 && vm.myChart.resize();
            }, 200);
        },
    },
    beforeDestroy() {
        // 释放该图例资源，较少页面卡顿情况
        if (this.myChart) this.myChart.clear();
        // 移除窗口resize事件
        window.removeEventListener('resize', this.handleChartResize);
    }
};

感谢各位的阅读，以上就是“Vue怎么封装Echarts图表”的内容了，经过本文的学习后，相信大家对Vue怎么封装Echarts图表这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

当前题目：Vue怎么封装Echarts图表
网址分享：http://6mz.cn/article/pdpjej.html