Vue+Antv?F2實(shí)現(xiàn)混合圖表
更新時(shí)間：2022年04月07日 12:57:08 作者：灬每天進(jìn)步一點(diǎn)點(diǎn)
這篇文章主要為大家詳細(xì)介紹了Vue+Antv?F2實(shí)現(xiàn)混合圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了Vue+Antv F2實(shí)現(xiàn)混合圖表的具體代碼，供大家參考，具體內(nèi)容如下
一、npm安裝
npm install @antv/f2 --save
二、在main.js中引入
import F2 from '@antv/f2' ?Vue.prototype.$F2= F2;
三、在vue頁面組件中創(chuàng)建canvas
<template> ? <div id="app"> ? ? ?<canvas id="caseChart" style="width: 100%;height: 230px;"></canvas> ? </div> </template>
四、在data中聲明數(shù)據(jù)源
data(){
? ?return{
? ? ?casechart:null,
? ? ?// 混合圖數(shù)據(jù)(s_Date為圖形底部時(shí)間 ?Total為柱狀圖數(shù)據(jù) ?addTotal為折線圖數(shù)據(jù))
?? ?chartsData:[{Total: 0, s_Date: "2020-12", dataType: "patentNum", addTotal: 0},
? ? ? ? ? ? ? ? {Total: 0, s_Date: "2021-01", dataType: "patentNum", addTotal: 0},
? ? ? ? ? ? ? ? {Total: 0, s_Date: "2021-02", dataType: "patentNum", addTotal: 0},
? ? ? ? ? ? ? ? {Total: 8, s_Date: "2021-03", dataType: "patentNum", addTotal: 8},
? ? ? ? ? ? ? ? {Total: 9, s_Date: "2021-04", dataType: "patentNum", addTotal: 17},
? ? ? ? ? ? ? ? {Total: 3, s_Date: "2021-05", dataType: "patentNum", addTotal: 20},
? ? ? ? ? ? ? ? {Total: 0, s_Date: "2021-06", dataType: "patentNum", addTotal: 20}] ?
? ? ? ?// 圖例(marker為圖例樣式) ? ?
? ? ? ?legendItems:[{
? ? ? ? ?name: '委案量',
? ? ? ? ?marker: 'square',
? ? ? ? ?fill: 'rgb(41,141,248)'
? ? ? ?}, {
? ? ? ? ?name: '累計(jì)委案量',
? ? ? ? ?marker: function marker(x, y, r, ctx) {
? ? ? ? ? ?ctx.lineWidth = 1;
? ? ? ? ? ?ctx.strokeStyle = ctx.fillStyle;
? ? ? ? ? ?ctx.moveTo(x - r - 3, y);
? ? ? ? ? ?ctx.lineTo(x + r + 3, y);
? ? ? ? ? ?ctx.stroke();
? ? ? ? ? ?ctx.arc(x, y, r, 0, Math.PI * 2, false);
? ? ? ? ? ?ctx.fill();
? ? ? ? ?},
? ? ? ? ?fill: 'rgb(194,53,49)'
? ? ? ?}] ?
? ?}
} ? ? ? ? ? ? 五、圖表渲染方法
caseChart(){
? var _this = this
? // 創(chuàng)建 Chart 對(duì)象
? _this.casechart = new _this.$F2.Chart({
? ? id: 'caseChart',
? ? pixelRatio: window.devicePixelRatio // 指定分辨率
? });
? // 載入數(shù)據(jù)源
? _this.casechart.source(_this.chartsData,{
? ? Total: {
? ? ? alias: '委案量'
? ? },
? ? addTotal: {
? ? ? alias: '累計(jì)委案量'
? ? }
? });
??
? // 自定義圖例內(nèi)容以及交互行為
? _this.casechart.legend({
? ? custom: true,
? ? items: _this.legendItems,
? ? align: 'center',
? ? onClick: function onClick(ev) {}
? });?
??
? // Tooltip樣式配置
? _this.casechart.tooltip({
? ? showCrosshairs: true,
? ? custom: true,
? ? 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;
? ? ? ? }
? ? ? });
? ? },
? ? onHide: function onHide() {
? ? ? const legend = _this.casechart.get('legendController').legends.top[0];
? ? ? legend.setItems(_this.casechart.getLegendItems().country);
? ? }
? }); ? ? ?
? _this.casechart.interval().position('s_Date*Total').color('rgb(41,141,248)'); ?// 柱狀圖顏色
? _this.casechart.line().position('s_Date*addTotal').color('rgb(194,53,49)'); ? ?// 折線圖顏色
? _this.casechart.point().position('s_Date*addTotal').style({ ? ? ? ? ? ? ? ? ? ?// 折線點(diǎn)樣式?
? ? ? fill: 'white',
? ? ? stroke: 'red',
? ? ? lineWidth: 1
? ? });
? _this.casechart.render(); ?//渲染圖表
}, ??六、mounted中調(diào)用
mounted() {
? ? var v = this;
? ? this.$nextTick(() => {
? ? ? v.caseChart();
? ? }); ??
? },樣式
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決
這篇文章主要介紹了vue關(guān)于重置表單數(shù)據(jù)出現(xiàn)undefined的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue3異步組件Suspense的使用方法詳解,需要的朋友可以參考下2023-01-01
electron-vue利用webpack打包實(shí)現(xiàn)多頁面的入口文件問題
項(xiàng)目需要在electron的項(xiàng)目中新打開一個(gè)窗口，利用webpack作為靜態(tài)資源打包器，發(fā)現(xiàn)在webpack中可以設(shè)置多頁面的入口，今天來講一下我在electron中利用webpack建立多頁面入口的踩坑經(jīng)驗(yàn),需要的朋友可以參考下2019-05-05
vue中provide和inject的用法及說明(vue組件爺孫傳值)
這篇文章主要介紹了vue中provide和inject的用法及說明(vue組件爺孫傳值)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了基于Vue的延遲加載插件vue-view-lazy，可以使圖片或者其他資源進(jìn)入可視區(qū)域后加載，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
vue項(xiàng)目使用luckyexcel預(yù)覽excel表格功能(心路歷程)
這篇文章主要介紹了vue項(xiàng)目使用luckyexcel預(yù)覽excel表格,我總共嘗試了2種方法預(yù)覽excel,均可實(shí)現(xiàn),還發(fā)現(xiàn)一種方法可以實(shí)現(xiàn),需要后端配合,叫做KKfileview,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
詳解vue中v-for和v-if一起使用的替代方法template
這篇文章主要介紹了vue中v-for和v-if一起使用的替代方法template,使用的版本是vue?2.9.6和element-ui:?2.15.6，通過實(shí)例代碼給大家講解的非常詳細(xì)，需要的朋友可以參考下2022-05-05
vue中created、watch和computed的執(zhí)行順序詳解
由于vue的雙向數(shù)據(jù)綁定,自動(dòng)更新數(shù)據(jù)的機(jī)制,在數(shù)據(jù)變化后,對(duì)此數(shù)據(jù)依賴?的所有數(shù)據(jù),watch事件都會(huì)被更新、觸發(fā),下面這篇文章主要給大家介紹了關(guān)于vue中created、watch和computed的執(zhí)行順序,需要的朋友可以參考下2022-11-11
useEffect理解React、Vue設(shè)計(jì)理念的不同
這篇文章主要為大家介紹了useEffect理解React、Vue設(shè)計(jì)理念的不同詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的方法
之前做項(xiàng)目的時(shí)候,使用了Collapse折疊面板,下面這篇文章主要給大家介紹了關(guān)于Vant?UI中van-collapse下拉折疊面板默認(rèn)展開第一項(xiàng)的相關(guān)資料,需要的朋友可以參考下2022-03-03