Vue引入echarts方法与使用介绍
目录
- 1. 引入echarts
- 2. 将echarts设置为全局
- 3. 在相关组件中使用
在Vue中引入echarts以及使用
今天来告诉大家如何将echart引入vue并巧妙利用钩子函数对表格数据进行渲染。
1. 引入echarts
npm install echarts --save
在vue项目中安装
2. 将echarts设置为全局
main.js（项目入口文件）
//引入echarts文件 import * as echarts from 'echarts' Vue.prototype.$echarts = echarts
这样我们就可以使用this.$echarts来使用echarts了
3. 在相关组件中使用
要注意的是在表格显示的区域一定要定义宽度和高度，这样才可以正常显示。
组件使用element-ui的card
<div class="datamap">
<el-row :gutter="20">
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>订单统计</span>
</div>
<div id="one"></div>
</el-card>
</el-col>
<el-col :span="12">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>商品种类</span>
</div>
<div id="two"></div>
</el-card>
</el-col>
</el-row>
</div>
设置表格盒子的宽度和高度(one、two)
.datamap #one {
height: 500px;
}
.datamap #two {
height: 500px;
}
配置钩子函数mounted时，调用图标生成函数
export default {
name: "dataview",
data() {
return {};
},
mounted() {
this.init();
},
methods: {
init() {
setTimeout(() => {
this.initCharOne();
this.initCharTwo();
}, 1000);
},
//两个图标的生成函数
initCharOne() {},
initCharTwo() {},
},
};
为了防止异步导致数据无法正常显示，我这里使用setTimeout方法，让表格延迟显示，确保表格数据显示不受任务队列的影响。
配置函数initCharOne()
这里就涉及到echarts的用法了，具体方法不在这里细说，若有需要跳转echarts官方文档
initCharTwo() {
const option = {
dataset: [
{
dimensions: ["name", "age", "profession", "score", "date"],
source: [
["Hannah Krause", 41, "Engineer", 314, "2011-02-12"],
["Zhao Qian", 20, "Teacher", 351, "2011-03-01"],
["Jasmin Krause ", 52, "Musician", 287, "2011-02-14"],
["Li Lei", 37, "Teacher", 219, "2011-02-18"],
["Karle Neumann", 25, "Engineer", 253, "2011-04-02"],
["Adrian Groß", 19, "Teacher", "-", "2011-01-16"],
["Mia Neumann", 71, "Engineer", 165, "2011-03-19"],
["Böhm Fuchs", 36, "Musician", 318, "2011-02-24"],
["Han Meimei", 67, "Engineer", 366, "2011-03-12"],
],
},
{
transform: {
type: "sort",
config: { dimension: "score", order: "desc" },
},
},
],
xAxis: {
type: "category",
axisLabel: { interval: 0, rotate: 30 },
},
yAxis: {},
series: {
type: "bar",
encode: { x: "name", y: "score" },
datasetIndex: 1,
},
};
var myChartTwo = this.$echarts.init(document.getElementById("two")); //图标初始化\
myChartTwo.setOption(option);
window.onresize = function () {
myChartTwo.resize();
};
},
如果你按照以上几步走下来，那你肯定可以成功展示。
到此这篇关于Vue引入echarts方法与使用介绍的文章就介绍到这了,更多相关Vue echarts内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue中的echarts图表如何实现loading效果
目录 echarts图表实现loading效果 Vue使用echarts图表总结 安装echarts依赖 创建图表 在页面中的使用(在这里我用的局部引入) echarts图表实现loading效果 main.js 中配置Vue属性ecahrts // 引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts data() 初始化数据调用数据 mounted() 周期函数内获取画布节点,并且调用加载loadi
-
Vue使用echarts的完整步骤及解决各种报错
前言: Echarts,它是一个与框架无关的 JS 图表库,但是它基于Js,这样很多框架都能使用它,例如Vue,估计IONIC也能用,下次研究. 因为我的习惯,每次新尝试做一个功能的时候,总要新创建个小项目,做做Demo. 首先看自己电脑是否安装了Vue,打开终端命令:vue --version,我以前安装过Vue,但是不知道为何报错: vue/cli Error: Cannot find module ‘@vue/cli-shared-utils‘ 注意:如果是全局module出错,就全局更新
-
vue中echarts关系图动态增删节点以及连线方式
目录 echarts关系图动态增删节点及连线 echarts关系图vue完整代码 echarts关系图动态增删节点及连线 首先,echarts的关系图有个非常坑的地方,就是节点的id必须连续,否则增删之后节点无法连接! 下面是简单的演示实现,实际要用动态增删的话,要复杂的多得多. 我是用的关系图是力引导图 更新后不会重新渲染,只是动态增加的效果 //假设你已经渲染了关系图 test() { let option = this.chart.getOption() //获取option配置项 //S
-
vue echarts实现航班选座案例分析
目录 背景 实现思路 代码分析 获取svg 注册自定义地图 geo组件的配置 举一反三 三 效果图 注意点 背景 最近在echarts官方看到了一个航班选座的示例,感觉很好,可以扩大,缩小,鼠标放置到座位上可以显示座位号,允许默认选中座位.于是在5.1假期抽了一点点时间,来写一篇文章,深入研究分析一下这个示例,解析一下这个示例的完整代码.首先让我们来看下示例的效果图. 实现思路 代码是使用echarts来实现的,主要用到的是svg和自定义地图的相关知识.示例的完整代码 在做选座的功能,我们使用d
-
在vue中使用echarts实现飞机航线水滴图词云图效果
目录 vue中引入echarts 飞机航线 html css 准备数据 处理飞行数据获得起点和终点坐标起点和终点 配置地图 配置折线line和散点 使用 水滴图 配置 词云图 配置 vue中引入echarts npm install echarts 在main.js中引用并挂载到vue上便于使用 import * as echarts from 'echarts' Vue.prototype.$echarts =echarts 飞机航线 html <template> <div clas
-
vue中封装echarts公共组件过程
目录 1.安装echarts 2.在mian.js中全局引入 3.下面开始封装图表 4.接下来只需要在需要显示图表的地方引入Echart.vue 定义图表公共样式是为了统一同一网站各页面图表的基础样式baseOption.js(轴线.区域.色系.字体),统一封装后页面需要直接引入,传入所需参即可覆盖基础样式. 以下示例封装图表组件Echart.vue. 1.安装echarts npm install echarts --save npm install lodash --save // 若已安装
-
vue-echarts如何实现图表组件封装详解
目录 背景: 有哪些工具? 怎么封装? 总结 背景: 需要大量使用图表的项目,为了提升开发效率,可以对图表类进行封装成组件,方便页面的搭建,也能进行统一管理维护,即使后面系统风格需要调整,调整起来也比较方便.快速. 有哪些工具? 常用的有Echarts.AntV,使用起来都大同小异,具体图表如何实现,看官网参数进行配置调整即可. 怎么封装? 以Echarts为例,效果截图 安装依赖,安装vue-echarts需要安装echarts,vue2下使用vue-echarts还需要安装@vue/comp
-
vue中使用echarts实现动态数据绑定以及获取后端接口数据
目录 前言 1.柱状图 2.折线图 3.饼状图 4.地图 总结 前言 之前几篇echarts的文章是实现了静态的柱状图.折线图.饼状图.地图,在项目中我们肯定是需要获取后端接口,将后端返回的数据显示在图表上,所以这次就记录一下如何实现echarts的动态数据绑定. 简单来讲,就是从接口获取到的数据,需要在图表的方法里再次定义一下,然后用setOption方法就可以获取到了. 1.柱状图 首先看接口传过来的数据,传过来一个数组,第一条年度2021,数量1,第二条年度2022,数量3 因为柱状图的数
-
vue使用Echarts设置数据无效问题记录及解决方法
目录 场景: 遇到的问题: 最终解决方案: 小结: 场景: 做一个动态的柱状图,模拟socket效果,如图所示: 遇到的问题: 元数据格式是这样的: config: { data: [ { name: '义乌市', value: 169 }, { name: '东阳市', value: 123 }, { name: '武义县', value: 98 }, { name: '兰溪市', value: 75 }, { name: '金东区', value: 66 }, ], colors: ['#e
-
Vue引入echarts方法与使用介绍
目录 1. 引入echarts 2. 将echarts设置为全局 3. 在相关组件中使用 在Vue中引入echarts以及使用 今天来告诉大家如何将echart引入vue并巧妙利用钩子函数对表格数据进行渲染. 1. 引入echarts npm install echarts --save 在vue项目中安装 2. 将echarts设置为全局 main.js(项目入口文件) //引入echarts文件 import * as echarts from 'echarts' Vue.prototype
-
Vue项目中引入 ECharts
目录 1.安装 2.引入 3.使用 4.按需引入 ECharts 图表和组件 1.安装 使用如下命令通过 npm 安装 ECharts npm install echarts --save 2.引入 安装完成以后,可以将echarts全部引入,这样一来,我们可以在该页面使用echarts所有组件:引入代码如下: import * as echarts from "echarts"; 3.使用 引入完毕之后,我们可通过echarts提供的接口画出对应的图表,使用方法如下: <tem
-
Vue使用echarts可视化组件的方法
echarts组件官网地址:https://echarts.apache.org/examples/zh/index.html 1.找到脚手架项目所在地址,执行cnpm install echarts,安装echarts组件(脚手架的地址就是你vue项目的地址) (E:\demo\vuepro)这是我的项目地址,vuepro为项目名 2.按需导入,以加快打开速度 //引入echarts组件 import echarts from "echarts" // 引入基本模板 let echa
-
vue使用echarts图表的详细方法
本文为大家分享了vue使用echarts图表的方法,供大家参考,具体内容如下 该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --registry=https://registry.npm.taobao.org 使用 cnpm install echarts -S 创建图表 全局引入 main.js // 引入echarts import echarts fro
-
vue学习笔记五：在vue项目里面使用引入公共方法详解
今天早上来到公司,没事看了一下别人的博客,然后试了一下,发现的确是可以的,在此记录一下,方便自己日后查阅. 首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js 建立好之后,在main.js里面引入这个公共方法 最后是调用这个公共方法 测试一下,我在公共方法里面写了一个简单的一段代码如下: export default{ login:function(){ console.log("1111"); } } 如何在我的login.vue里面控制台
-
vue引入静态js文件的方法
由于一些演示,需要对编码名称等可快速进行修改,需要页面方便配置.由于build后的vue项目基本已经看不出原样,因此需要创建一个文件,并在打包的时候不会进行编译. vue-cli 2.0的作法是在static文件下创建js.vue-cli 3.0 的写法则是直接在public文件夹下创建js. 具体操作如下: 1.在public文件夹下创建config.js文件,里面文件的语法是es5,不允许使用浏览器不能兼容的es6语法.因为该文件不进行编译,es6部分语法浏览器不兼容. 2..在html文件
-
vue 项目引入echarts 添加点击事件操作
main.js中 import echarts from 'echarts' Vue.prototype.$echarts = echarts vue文件中 _this.calendarChart=_this.$echarts.init(document.getElementById('earlyWarningCalendar')) _this.calendarChart.on('click',function (param) { console.log(param) }) _this.cale
-
Vue使用Echarts图表多次初始化报错问题的解决方法
目录 问题 方法一 销毁实例 方法二 不要频繁创建实例 总结 问题 Vue项目中需要用Echarts的柱状图显示数据,并且每次搜索要更新柱状图. 这时候小编发现在控制台会出现这样的报错: 原来的代码是这样的,页面挂载和搜索时都会调用init方法 initChart (dataSet = [5, 20, 36, 10, 10, 20]) { this.barChart = echarts.init(this.$refs.chartBox) const option = { title: { tex