Vue+Antv F2实现层叠柱状图
作者:weixin_38673922 发布时间:2023-07-02 16:54:55
标签:vue,柱状图
本文实例为大家分享了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
0
投稿
猜你喜欢
- 第一种方法: Minimsdn.com为您提供的代码: -- Turn ON [Display IO Info when execute S
- NumPyNumPy是一个用于科学计算和数据分析的Python库,也是机器学习的支柱。可以说NumPy奠定了Python在机器学习中的地位。
- csv的简单介绍CSV (Comma Separated Values),即逗号分隔值(也称字符分隔值,因为分隔符可以不是逗号),是一种常用
- web.py 是一个轻量级Python web框架,它简单而且功能强大。web.py 是一个Python 的web 框架,它简单而且功能强大
- 当使用SqlDataSource控件选择数据时,可以从两个属性:ConnectionString和SelectCommand开始,如下所示:
- 问题描述:通过EasyConnect登录后可以用xshell连接服务器,同时可以使用navicat和pymysql连接mysql数据库(无论
- 公式如下:rand() * (y-x) + x咱们学php的都知道,随机函数rand或mt_rand,可以传入一个参数,产生0到参数之间的随
- 【原文地址】 Recipe: Deploying a SQL Database to a Remote Hosting Environmen
- 网上提供了很多sqlserver发送邮件的文章,转载居多,大部分介绍win2000+outlook2003环境,在操作系统和office已经
- Python not equal operator returns True if two variables are of same ty
- 第一次做完主从库同步后正常,但工作过程中发现有一个库的数据库没有同步起来,在另外一个mysql(3307)中于是:1、在主库中创建一个临时库
- 由于需要从某个网页上下载一些PDF文件,但是需要下载的PDF文件有几百个,所以不可能用人工点击来下载。正好Python有相关的模块,所以写了
- 这篇分享几个在地址栏实现的Javascript有趣效果和应用。能在浏览器地址栏实现的效果太多了,字体放大、显示所有图片、显示Cookie等等
- 先修改Master(10.1.123.197)的 my.cnf 配置在 [mysqld] 中新增以下内容:log-bin=mysql-bin
- itchat模块官方参考文档:https://itchat.readthedocs.io/zh/latest/安装pip install i
- 日期和时间类型MySQL有多个表示各种日期和时间值的数据类型, 比如YEAR和DATE. MySQL存储时间的最精确粒度是秒。 然而, 能做
- 实战场景经常有朋友问,学 Python 面向对象时,翻阅别人代码,会发现一个 super() 函数,那这个函数的作用到底是什么?super(
- df.groupby() 之后按照特定顺序输出,方便后续作图,或者跟其他df对比作图。## 构造 pd.DataFramepatient_i
- Redis持久化机制实现原理是什么?流程是什么?持久化就是把内存中的数据存放到磁盘中,防止宕机后内存数据丢失。按照指定的时间间隔内将内存的数
- 自定义图片生成词云图的多种方法有时候我们会根据具体的场景来结合图片展示词云,比如我分析的是美团评论,那么最好的展示方法就是利用美团的logo