Vue+Antv?F2實現(xiàn)層疊柱狀圖

更新時間：2022年04月07日 11:07:23 作者：weixin_38673922

這篇文章主要為大家詳細(xì)介紹了Vue+Antv?F2實現(xiàn)層疊柱狀圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Vue+ Antv F2實現(xiàn)層疊柱狀圖的具體代碼，供大家參考，具體內(nèi)容如下

一、創(chuàng)建canvas標(biāo)簽

<canvas id="caseChart" style="width: 100%;height: 230px;"></canvas>

二、編寫圖表繪制代碼

methods:{
?? ? ? ?//獲取專利案件Chart圖標(biāo)信息
?? ? ? ?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;

?? ??? ??? ?//創(chuàng)建 Chart 對象
?? ??? ??? ?_this.casechart = new this.$F2.Chart({?? ??? ??? ?
?? ??? ??? ? ?id: 'caseChart',
?? ??? ??? ? ?pixelRatio: window.devicePixelRatio,?? ??? ??? ?//指定分辨率
?? ??? ??? ?});

?? ??? ??? ?//source 載入數(shù)據(jù)
?? ??? ??? ?_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 內(nèi)容框
?? ??? ??? ? ?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);
?? ??? ??? ?
?? ??? ??? ?//創(chuàng)建圖形語法，繪制圖，由 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();
?? ??? ?});
?? ?},