这篇文章主要介绍“Vue+ Antv F2怎么实现层叠柱状图”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue+ Antv F2怎么实现层叠柱状图”文章能帮助大家解决问题。
一、 创建canvas标签
<canvas id="caseChart" ></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(); }); },三、展示效果
关于“Vue+ Antv F2怎么实现层叠柱状图”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
