vue仪表盘,使用antv/G2实现简单的仪表盘效果
效果图: 以下代码就可以展示出效果图中的简易仪表,数据还需使用者自己处理一下,一些简要注释都在代码中不了解其中的一些参数,可访问https://antv.alipay.com/zh-cn/g2/3.x/demo/gauge/color.htmlDashboard.vue:<template><div id="mountNode" cla
·
效果图:
以下代码就可以展示出效果图中的简易仪表,数据还需使用者自己处理一下,一些简要注释都在代码中
不了解其中的一些参数,可访问https://antv.alipay.com/zh-cn/g2/3.x/demo/gauge/color.html
Dashboard.vue:
<template>
<div id="mountNode" class='dashboard' @click="score">
</div>
</template>
<script type="text/ecmascript-6">
import G2 from '@antv/g2'
export default {
name: 'Dashboard',
data() {
return {
chart: null,
personInfo: null, //数据
}
},
props:{
show: String, //定义传值的类型
basic: Boolean, //无需理会,本人项目中需要的
idenId: Boolean //无需理会,本人项目中需要的
},
created() {
},
mounted() {
this.getScore();
},
methods:{
getScore() {
//获取单个分数或者对象数据传入仪表方法中
_this.drawChart(_this.personInfo);
},
//仪表
drawChart(personInfo) {
var _this = this;
var Shape = G2.Shape;// 自定义Shape 部分
Shape.registerShape('point', 'pointer', {
//绘制指针,不需要的可以去掉
drawShape: function drawShape(cfg, group) {
var center = this.parsePoint({ // 获取极坐标系下画布中心点
x: 0,
y: 0
});
},
group.addShape('line', {
attrs: {
x1: center.x,
y1: center.y,
x2: cfg.x,
y2: cfg.y,
stroke: cfg.color,
lineWidth: 5,
lineCap: 'round'
}
});
return group.addShape('circle', {
attrs: {
x: center.x,
y: center.y,
r: 9.75,
stroke: cfg.color,
lineWidth: 4.5,
fill: '#fff'
}
});
});
//数据
var data = [{
value: personInfo.user_score
}];
//chart初始化
var chart = new G2.Chart({
container: 'mountNode', //标签id
forceFit: true,
height: '180',
padding: [0, 0, 30, 0]
});
chart.source(data);
chart.coord('polar', {
startAngle: -29 / 30 * Math.PI, //开始角度
endAngle: -1 / 30 * Math.PI, //结束角度
radius: 0.9
});
//刻度分数值设置
chart.scale('value', {
ticks: [ 300, 350, 400, 450, 500,550, 600,650,700 ], //分数值
tickInterval: 1,
nice: false
});
chart.axis('1', false);
chart.axis('value', {
zIndex: 2,
line: null,
//表盘中样式设置
label: {
offset: -15,
textStyle: {
fontSize: 12,
fill: '#fff',
textAlign: 'center',
textBaseline: 'middle'
}
},
subTickCount: 4,
//副刻度线的设置
subTickLine: {
length: -8,
stroke: '#fff',
strokeOpacity: 1
},
//刻度线的设置
tickLine: {
length: -17,
stroke: '#fff',
strokeOpacity: 1
},
grid: null
});
chart.legend(false);
chart.point().position('value*1').shape('pointer').color('#1890FF').active(false);
// 绘制仪表盘背景
chart.guide().arc({
zIndex: 0,
top: false,
start: [0, 1],
end: [9, 1],
style: { // 底灰色
stroke: '#FEA7AC',
lineWidth: 10
}
});
// 绘制指标
chart.guide().arc({
zIndex: 1,
start: [300, 1],
end: [ personInfo.user_score, 1],
style: {
stroke: '#FFEBEC',
lineWidth: 10
}
});
// 绘制指标数字
chart.guide().html({
position: ['50%', '80%'],
html: `${_this.isShow(personInfo)}`
});
chart.render();
},
//显示的刻度中的一些html元素,如:中间的分数
isShow(personInfo){
var html='';
//判断无需理会,直接取其中的一段即可
if(this.show=='home'){
html=
` <div style="width: 300px;color: #fff;text-align: center;">
<p style="font-size: 12px;">BETA</p>
<p style="font-size: 38px;font-weight: bold;"> ${personInfo.user_score}</p>
<p style="font-size: 15px;" class="abc">分</p>
</div>`;
}else {
html= ` <div style="width: 300px;color: #fff;text-align: center;">
<p style="font-size: 19px;font-weight: bold;">分:${personInfo.user_score}</p>
<p style="margin-top:8px;font-size: 19px;font-weight: bold;">度:${personInfo.user_amount}</p>
</div>`;
}
return html;
}
}
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
附一个《关于vue antV G2-3.X组件化》的介绍链接:http://www.php.cn/js-tutorial-406358.html
更多推荐
已为社区贡献3条内容
所有评论(0)