Vue引入echarts方法与使用介绍
更新时间：2022年08月22日 09:51:21 作者：抗争的小青年
Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，这样很多框架都能使用它，例如Vue，估计IONIC也能用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在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 $router和$route的区别详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-12-12
这篇文章主要介绍了vue使用urlEncode问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了vue+阿里的G2图表-antv+折线图实例，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue3+vite应用中添加sass预处理器问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
今天小编就为大家分享一篇vue动态路由:路由参数改变,视图不更新问题的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
今天小编就为大家分享一篇element-ui中的select下拉列表设置默认值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue中使用echarts制作圆环图的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
在 Vue.js 中，父子组件通信是非常重要的，在本文中，我们讨论了 Vue.js 中父子组件通信的几种方式，包括使用 props 传递数据、使用 Sync 修饰符实现双向绑定、使用自定义事件传递数据、使用 $refs 访问子组件实例以及使用 $children 和 $parent 访问父子组件实例2023-09-09
本文是脚本之家小编给大家带来的使用vue与jquery实时监听用户输入状态，实现效果是input未输入值时，按钮禁用状态，具体操作代码大家参考下本文吧2017-09-09
这篇文章主要介绍了element 表格嵌套表单验证指定行的操作方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
最新评论