Vue+Antv F2实现层叠柱状图
作者:weixin_38673922 时间:2023-07-02 16:54:55
本文实例为大家分享了Vue+ Antv F2实现层叠柱状图的具体代码,供大家参考,具体内容如下
一、 创建canvas标签
<canvas id="caseChart" style="width: 100%;height: 230px;"></canvas>
二、 编写图表绘制代码
methods:{
//获取专利案件Chart图标信息
getCaseChartData(){
var _this = this;
var params = {
dataType:_this.caseDataType,
beginDate:'',
endDate:_this.endDate
}
_this.$http.get('/api/patent/StatisticsPatentChartAmount',{params:params})
.then(res =>{
if(res.status == 200){
for(var i = 0; i < res.data.length; i++){
if(res.data[i].dataType == "monthPatent"){res.data[i].dataType = '新立案'}
else if(res.data[i].dataType == "applyPatent"){res.data[i].dataType = '新申请'}
else if(res.data[i].dataType == "PCTPatent"){res.data[i].dataType = 'PCT国际'}
else if(res.data[i].dataType == "otherPatent"){res.data[i].dataType = '其他案件'}
else {}
res.data[i].date = res.data[i].date+"-01" + " 00:00:00"
}
_this.caseData = res.data;
_this.$options.methods.caseChart.bind(this)();
}else{
}
})
.catch(error =>{
})
},
caseChart(){
var _this = this;
//创建 Chart 对象
_this.casechart = new this.$F2.Chart({
id: 'caseChart',
pixelRatio: window.devicePixelRatio, //指定分辨率
});
//source 载入数据
_this.casechart.source(JSON.parse(JSON.stringify(this.caseData)), {
date: { //x轴
type: 'timeCat',
tickCount: 6,
// range: [ 0.1, 0.9 ],
mask:'YY-MM',
},
// amount: {
// }
});
_this.casechart.tooltip({
custom: true, // 自定义 tooltip 内容框
onChange: function onChange(obj) {
const legend = _this.casechart.get('legendController').legends.top[0];
const tooltipItems = obj.items;
const legendItems = legend.items;
const map = {};
legendItems.forEach(function(item) {
map[item.name] = item;
});
tooltipItems.forEach(function(item) {
const name = item.name;
const value = item.value;
if (map[name]) {
map[name].value = value;
}
});
// legend.setItems(_.values(map));
},
onHide: function onHide() {
const legend = _this.casechart.get('legendController').legends.top[0];
legend.setItems(_this.casechart.getLegendItems().country);
}
});
var barWidth = 16 * (window.innerWidth / 375);
//创建图形语法,绘制图,由 date 和 amount 两个属性决定图形位置,date 映射至 x 轴,amount 映射至 y 轴
_this.casechart.interval()
.position('date*amount')
.color('dataType')
.adjust('stack')
.size(barWidth)
//渲染图表
_this.casechart.render();
}
},
mounted() {
var v = this;
this.$nextTick(() => {
v.caseChart();
});
},
三、展示效果
来源:https://blog.csdn.net/weixin_38673922/article/details/107785786
标签:vue,柱状图
0
投稿
猜你喜欢
推荐四款可视化工具(解决99%的可视化大屏需求)
2022-05-06 03:37:39
golang切片扩容规则实现
2024-04-27 15:31:22
你真的知道怎么优化SQL吗
2024-01-23 02:59:23
php中设置index.php文件为只读的方法
2023-11-17 20:13:54
python+pytest接口自动化之token关联登录的实现
2023-01-21 13:27:37
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2021-10-22 00:11:23
OpenCV制作Mask图像掩码的案例
2023-09-20 16:34:04
python 实现图片上传接口开发 并生成可以访问的图片url
2021-03-19 01:02:02
SQL Server日志清除的两种方法教程简介
2008-05-04 20:59:00
JavaScript判断微信浏览器实例代码
2024-04-18 09:30:31
Django在pycharm下修改默认启动端口的方法
2023-09-27 09:04:07
数组保存为txt, npy, csv 文件, 数组遍历enumerate的方法
2021-05-05 05:36:39
如何向scrapy中的spider传递参数的几种方法
2021-12-16 20:04:48
SQL语句学习
2024-01-18 15:07:00
python人工智能tensorflow函数tf.assign使用方法
2023-04-08 00:59:03
SQL查询语句优化的实用方法总结
2024-01-25 18:51:21
Numpy广播域的理解
2023-03-11 14:37:11
Python二进制数据结构Struct的具体使用
2022-07-10 00:01:59
vue如何实现动态加载脚本
2024-05-25 15:19:28
基于python实现高速视频传输程序
2022-04-01 02:14:17