vue使用环图 百分比显示
目录1.安装2.在main.js中引入环图3.页面中插入环图标签4.传入数据5.显示效果6.参考资料1.安装npm i v-charts echarts -S2.在main.js中引入环图因为只用到环图,所以只引入VeRing,需要其他的可以用同样方式引入// main.jsimport VeRing from 'v-charts/lib/ring.common'// 环形图Vue.compone
·
1.安装
npm i v-charts echarts -S
2.在main.js中引入环图
因为只用到环图,所以只引入VeRing,需要其他的可以用同样方式引入
// main.js
import VeRing from 'v-charts/lib/ring.common'// 环形图
Vue.component(VeRing.name, VeRing)
3.页面中插入环图标签
<ve-ring
height="250px"
width="350px"
:data="chartData"
:extend="chartExtend"
:settings="chartSettings"
>
</ve-ring>
我用的是下面这个
<ve-ring :data="chartData" :settings="chartSettings"></ve-ring>
4.传入数据
export default {
name: 'Dashboard',
data() {
return {
dd: '222',
pie: '',
radar: '',
a: '',
charts: '',
type: 'pie',
chartData:{
columns: ['日期', '访问用户'],
formatter: '{b}: {d}',
rows: [
{ '日期': '1/1', '访问用户': 1393 },
{ '日期': '1/2', '访问用户': 3530 },
{ '日期': '1/3', '访问用户': 2923 },
{ '日期': '1/4', '访问用户': 1723 },
{ '日期': '1/5', '访问用户': 3792 },
{ '日期': '1/6', '访问用户': 40000 }
]
},
chartSettings : {
radius: [60, 100],
offsetY: 200,
label: {
// show: true,
formatter: '{b}: {d}%',
}
},
// cDataType: 'percent',
}
},
5.显示效果
6.参考资料
vue 使用 v-charts 实现环形图
https://blog.csdn.net/luyu13141314/article/details/94992121
vue中使用v-charts
https://juejin.im/post/6844903863917494286
官方文档
https://v-charts.js.org/#/ring
在线示例
https://echarts.apache.org/zh/option.html#series-pie.label.show
更多推荐
已为社区贡献2条内容
所有评论(0)