目錄

?

?

基本概念

代碼與實例

---

?

基本概念

這個問題是在我使用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/>: {c} (ze8trgl8bvbq%)"},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时常用）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。