vue.js集成echarts时遇到的一些问题总结

前言

最近在做Beetlex的数据分析平台，在开发这个产品过程中涉及到大量的数据图表展示功能；由于产品前端使用的是vuejs开发，所以在集成echarts或多或少会碰到一些问题，在这里主要讲解一下碰到的问题和解决方法。

在讲解之前先分享一下实际使用效果。具体可以查看 http://data.beetlex.io

控件ID

在vuejs中往往会对常用的功能进行组件封装，同样为了让不同图表复用所以也封装成组件来使用。在这个封装过程存在一个问题就是图表元素DIV的ID问题，所以组件建构建图表DIV的ID也必须确保唯一性。可以通过封装一个简单的函数来生成ID

Vue.prototype.$getID = function () {
    page.controlid = page.controlid + 1;
    return page.controlid;
};

通过这个方法来获取动态的元素ID

mounted(){
     this.ChatID = "chat_" + this.$getID();
}
<div :id="ChatID">
​
</div>

初始化问题

在使用Vuejs时很多时候会在mounted()方法中进行一些实始化，但如果在这里实始化echarts就需要注意，毕竟mounted并不代表所有元素被构建，这时候会导致获取元素失败无法对echarts进行初始化操作。所以需要把echarts放到一个方法中根据情况手动调用进行，或者延时一下调用初始化；为了方便选择使用了setTimeout来初始化。

setTimeout(() => {
    var dom = document.getElementById(this.ChatID);
    this.Chat = echarts.init(dom, 'macarons');
    this.Chat.setOption(this.ChatOption, true);
}, 300);

显示切换问题

如果需要对图表进行一个显示切换，最好不要用v-if这样的语法，因为这样的语法是不会在DOM中构建相关元素，引起echarts创建Canvas元素问题导致无法正常工作。最好的办法是通过切换Css的方式来进行显示切换，确保已构建的DOM元素内容没有被更改。

自适应布局

很多时候窗体的大变化和组件切换后会导致echarts无法适应当前布局，碰到这情况需要手动调用echarts的resize方法来进行重置显示布局。实际上在SPA应用中情况复杂很多，全屏显示，窗体要换，再加组件化后多层次嵌套，所以难以确定echarts使用在什么地方。为了满足不同情况的需求，需要一个公共的行为来触发这些变更。

var __resizeHandlers = [];
function __addResizeHandler(handler) {
    __resizeHandlers.push(handler);
};
function __resize() {
    setTimeout(() => {
        __resizeHandlers.forEach(v => {
            v();
        });
    }, 100);
}
window.onresize = function () {
    __resizeHandlers.forEach(v => {
        v();
    });
};
Vue.prototype.$addResize = function (handler) {
    __addResizeHandler(handler);
};
Vue.prototype.$resize = function () {
    __resize();
};

实现一个简单的resize注册和调用机制即可，在使用echarts的组件定义以下代码完美解决

this.$addResize(r => {
     if (this.Chat)
            this.Chat.resize();
});

附：Echarts下载使用

你可以通过以下几种方式获取 ECharts。

1，从 Apache ECharts (incubating) 官网下载界面 获取官方源码包后构建。

2，在 ECharts 的 GitHub 获取。

3，通过 npm 获取 echarts，npm install echarts --save，

4，通过 jsDelivr 等 CDN 引入

出现如下图则成功。

引入

（下载完的前提）

1，通过标签方式直接引入构建好的 echarts 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
</html>

2，全局引用

在vue的main.js中

// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3，直接在组件内引入echarts,

(如果你想在其他组件内用echarts，则必须重新引入)

import echarts from “echarts”;

总结

到此这篇关于vue.js集成echarts遇到问题的文章就介绍到这了,更多相关vue.js集成echarts问题内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 在vue项目中封装echarts的步骤

    在vue项目中封装echarts的步骤

    为什么需要封装echarts 每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置,十分冗余 在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作 可能有一些开发者忘记考虑echarts更新数据的特性,以及窗口缩放时的适应问题.这样导致数据更新了echarts视图却没有更新,窗口缩放引起echarts图形变形问题 我希望这个echarts组件能设计成什么样 业务数据和样式配置数据分离,我只需要传入业务数据就行了 它的大小要完全由使用者决定 不会因为缩放出现变形问题

  • Vue项目如何引入bootstrap、elementUI、echarts

    引入bootstrap 安装依赖包 cnpm install bootstrap --save-dev cnpm install jquery --save-dev cnpm install popper.js --save-dev 全局引入 在项目中根目录下的main.js中添加如下代码: import 'bootstrap' import $ from 'jquery' 在vue文件中引用 <script> import 'bootstrap/dist/css/bootstrap.min.

  • VUE2.0+Element-UI+Echarts封装的组件实例

    本文用Vue2.0+elementUI的panel组件和table组件+echarts的柱状图和折线图实现对结果的展示,实现了表格和图之间的切换和图和表之间的转置. -html <div class="resultDiv"> <div id="panels"> <el-collapse> <el-collapse-item v-for="item in indicators"> <templa

  • Vue Element前端应用开发之echarts图表

    Vue Element前端应用开发之echarts图表

    概述 基于图表的处理,我们一般往往都是利用对应第三方的图表组件,然后在这个基础上为它的数据模型提供符合要求的图表数据即可,VUE+Element 前端应用也不例外,我们这里使用了基于vue-echarts组件模块来处理各种图表vue-echarts是对echarts图表组件的封装. 1.图表组件的安装使用 首先使用npm 安装vue-echarts组件. git地址:https://github.com/ecomfe/vue-echarts NPM安装命令 npm install echarts

  • vue中使用echarts的示例

    vue中使用echarts的示例

    1:首先要用到echarts 2:在vue中安装这个依赖 3:引入要用的页面 import echarts from 'echarts'; 4:然后初始化 <template> <a-col span="12" style="min-height:343px;width:100%;background:#fff" ref="getwidth" :style="'display:'+ model"> &l

  • VUE+elementui组件在table-cell单元格中绘制微型echarts图

    需求效果图示例 实际完成效果图 ** 代码实现 注:table表格为二次封装的子组件 -在table表格中 根据 scope.$index动态设置元素的id ,便于指定单元格的echarts初始化: -在单元格中触发一个方法,传入当前的scope.row数据或者指定其他数据,并且传入 scope.$index 以及一个字符串便于识别当前是哪条数据的charts -在方法中绘制echarts** <el-table-column align="center"> <tem

  • vue中使用element ui的弹窗与echarts之间的问题详解

    今天项目中有个需求,就是在页面中点击一个图标,弹出一个抽屉式的弹窗(弹窗是element UI的抽屉),弹窗里边是echarts呈现的数据,当我直接用echarts的时候,报错dom没有获取到: 这就陷入疑惑,平时都是这样获取的,怎么今天就不行了呢,搜索了很多答案之后才知道,在刚进入页面的时候抽屉是关闭的,那echarts不进行获取dom,当点击抽屉出来的时候,有个opened事件,在这个事件里边进行echarts的初始化,执行数据: <el-drawer title="分析图表"

  • vue使用echarts画组织结构图

    vue使用echarts画组织结构图

    昨天,写了一篇关于圆环进度条的博客(请移步:Vue圆环进度条),已经烦不胜烦,今天又遇到了需要展示类似公司的组织结构图的功能需求,要冒了!!! 这种需求,自己用div+css也是可以实现的,但是没有什么动画效果,我的css3又很差劲,而且项目中已经使用到了折线图.饼状图.柱状图之类的图表,用的还是百度的echarts,所以这个组织结构图之类的需求也就用了百度的echarts来实现了. 以前用echarts写折线图.柱状图.饼状图的较多,它的API还算比较熟悉,但是画组织结构这样的树状图就很苦逼了

  • vue+echarts实现中国地图流动效果(步骤详解)

    vue+echarts实现中国地图流动效果(步骤详解)

    @vue+echarts实现中国地图流动效果 #话不多说看效果图 操作步骤: 执行命令:npm run echarts -s 并回车 看到这样的提示代表安装成功 PS:网络不好的情况建议用cnpm淘宝镜像(全局终端执行命令:npm i -g cnpm --registry=https://registry.npm.taobao.org) 下载china.js 链接: https://pan.baidu.com/s/1EODVh9tJNEbFebbrhKyd_Q 提取码: gjz4 引入 impo

  • vue中echarts的用法及与elementui-select的协同绑定操作

    vue中echarts的用法及与elementui-select的协同绑定操作

    1.vue中echarts的使用 引入echarts后 let myChart = echarts.init(document.getElementById('dsm'));//dsm为绑定的dom结构 var option = { //backgroundColor:"#111c4e", tooltip: { trigger: 'axis' }, legend: { //图表上方的图例显隐 data:['光合有效辐射'], textStyle: { color: '#fff' } }

随机推荐