基本概念

这个问题是在我使用echarts时出现的，因为echarts有这样的一个函数（官方实例）

let myChart = this.$echarts.init(document.getElementById(this.idStr));

这样的画就需要div的id号，为了使得这个id比较灵活，可以使用vue的绑定:id或者v-bind

这里要注意vue中的template要设置成如下：

<template><div style="width: 500px; height:300px"></div>
</template>

因为在调用这个组件的时候，v-bind的是他template下第一层div。

绑定层如下：

这里还要绑定一个idStr，因为在调用的使用是得到id名

下面来看看浏览器的结果：

代码与实例

这里给出关键代码：

绑定层：

<template><div><div class="ui container"><PieGraph:dataValue="dataValue":titleValue="titleValue":idStr="pieGraph1":id="pieGraph1"/></div></div>
</template><script>import PieGraph from '../../echarts/PieGraph'export default {data(){return{pieGraph1: "HelloWorld"}},components: {PieGraph}}
</script>

echarts层所属的组件：

<template><div style="width: 500px; height:300px"></div>
</template><script>export default {props: {idStr:{type: "",required: true}},mounted(){this.drawLine();},methods: {//开始画图了drawLine(){// 基于准备好的dom，初始化echarts实例let myChart = this.$echarts.init(document.getElementById(this.idStr));// 指定图表的配置项和数据let option = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b}: {c} ({d}%)"},legend: {orient: 'vertical',x: 'left',data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']},series: [{name:'访问来源',type:'pie',radius: ['50%', '70%'],avoidLabelOverlap: false,label: {normal: {show: false,position: 'center'},emphasis: {show: true,textStyle: {fontSize: '30',fontWeight: 'bold'}}},labelLine: {normal: {show: false}},data:[{value:335, name: '直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}}}
</script>

前端笔记-使用vue绑定id使得组件更加灵活（在使用echarts时常用）相关推荐

前端开发之vue可视化数据图表组件（Chart.js）
前端开发之vue可视化数据图表组件(Chart.js) 前言制作好的效果图 vue2中使用Chart.js 1.在项目中安装Chart.js 组件 2.vue文件 vue3中使用Chart.js v ...
「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩源码在文末. 前言上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...
Web前端笔记-解决Vue编写的输入框（input、textarea等）使用JS设置value时提交表单无效的问题
主要的原因是vue相当于套了一层,界面上的输入框会关联model,提交表单的时候,他是直接提交model的值,而不是传统的输入框里面的值. 所以用这种: let textAreaItem = docu ...
Web前端笔记-安装vue的4.5.9版本
安装10版本以上的node 安装完后: node -v npm -v npm get registry npm config set registry http://registry.npm.taob ...
Vue学习笔记02——Vue路由
Vue学习笔记01--Vue开发基础一.初识路由 1.路由的作用 Vue的路由是前端路由,可以让组件之间互相切换. 2.vue-router.js文件 Vue的路由使用需要引入vue-router. ...
Vue 学习笔记（2）Vue 生命周期、组件
Vue Vue 生命周期 Vue 中组件(Component) 全局组件的开发局部组件的开发组件中 props 的使用在组件上声明静态数据传递给组件内部在组件上声明动态数据传递给组件内部 pr ...
开发SpringBoot+Jwt+Vue的前后端分离后台管理系统VueAdmin - 前端笔记
1. 前言而接下来,我们即将开发一个前后端分离的后台管理系统VueAdmin.权限框架采用spring security,然后相对来说权限模块开发就多点代码,也仅此而已了.对了前端的系统界面也是我们 ...
前端七十二变之vue.js组件开发
1.ES6语法 ES6是JavaScript语言的新版本,它也可以叫做ES2015,之前学习的JavaScript属于ES5,ES6在它的基础上增加了一些语法,ES6是未来JavaScript的趋势, ...
09_前端笔记-Vue
文章目录基础项目工程管理编写路由整合插件整合模板个人博客 https://blog.csdn.net/cPen_web Vue.js 官网 https://cn.vuejs.org/ 基础 ...

前端笔记-使用vue绑定id使得组件更加灵活（在使用echarts时常用）

基本概念

代码与实例

前端笔记-使用vue绑定id使得组件更加灵活（在使用echarts时常用）相关推荐

最新文章

热门文章