Vue配置并运行echarts的详细
1、准备工作
- 首先在echarts官方选择好自己需要使用的图表,并配置完成
- 新建一个vue文件
2、正式配置
HTML代码段:
注意id内的命名与下述getElementById一致
<template>
<div id="main" style="width:50%;height:376px"></div>
</template>
SCRIPT代码段:
注意mounted内的函数名与下述methods函数名一致
export default {
mounted(){
this.drawChart()
},
}
建立methods:{},内嵌函数drawChart()
methods: {
drawChart() {
let myChart = this.$echarts.init(document.getElementById("main"));
let option;
{此处为代码粘贴处}
}
myChart.setOption(option);
}
以上都是所有图表必须的内容,接着这里终于可以使用上我们在echarts官方选择好自己需要使用的图表
配置好的图表,复制“代码编辑”-“JS”内的所有内容,粘贴至上述描述的位置
运行,成功!
关于一个图表组件需要使用两次及以上,可参考在 vue 中使用 echarts 的详细步骤
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgaaaig
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24