<template>
<div>
<table>
<tr v-for="i in item">
<td>{{i.number}}</td>
<td>
<ve-gauge :data="https://bbs.csdn.net/topics/chartdata" :settings="chartsetting">
</ve-gauge>
</td>
</tr>
</table>
</div>
</template>
<script>
export default{
data(){
this.chartsetting={
dataType:{
' 占比':' percent'
}，
seriesMap:{
' 占比':{
min:0,
max:1
}
}
}
return:{
chartdata:{
columns:['type'，'value']，
rows:[
{type: '占比'，value: 0.5}
]
}
}
}
}
</script>
根據i.number傳的值就是所占的百分比，賦值給value，每一行刷一個對應i.number值百分比的儀表盤。
uj5u.com熱心網友回復：
這個可以解決嗎，有人回答一下嗎？
uj5u.com熱心網友回復：
又或者有什么其他的解決辦法，根據每一行的對應的百分比值生成一個儀表盤
uj5u.com熱心網友回復：
有人能來回答一下嗎？。。。。。。。
uj5u.com熱心網友回復：
基本代碼：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">
<div id="app2">
<v-chart></v-chart>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
Vue.component('v-chart', {
template: `<div>
<table>
<tr v-for="i in item">
<td>{{i}}</td>
<td style="width:420px">
<ve-gauge :data="https://bbs.csdn.net/topics/chartData(i)" :settings="chartSettings"></ve-gauge>
</td>
</tr>
</table>
</div>`,
data: function () {
this.chartSettings = {
dataType: {
'占比': 'percent'
},
seriesMap: {
'占比': {
min: 0,
max: 1
}
}
};
return {
chartData(i) {
return {
columns: ['type', 'value'],
rows: [
{ type: '占比', value: i }
]
}
},
item: [0.1,0.3,0.5,0.8,0.55]
};
}
});
new Vue({
el: '#app2'
});
uj5u.com熱心網友回復：
謝謝，解決了，我這里還有一個問題，不知有沒有時間回答一下，<table>能不能在每一行前面有一個下拉，點擊下拉顯示另一個表格，不能的話，我看了下<el-table>好像可以，我剛學，不知道怎么把儀表盤刷到每一行。
uj5u.com熱心網友回復：
這個就不清楚了，我也剛了解VUE
uj5u.com熱心網友回復：
你是想做表格行展開效果嗎？如果用elementui的話，可以看下表格的行展開介面
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/112686.html
標籤：JavaScript
上一篇：vue專案新版腳手架如何配置tomcat，并且如何解決重繪404錯誤
下一篇：網頁設計一定要給高嗎
