Vue+Antv?F2實現(xiàn)混合圖表
更新時間：2022年04月07日 12:57:08 作者：灬每天進步一點點
這篇文章主要為大家詳細介紹了Vue+Antv?F2實現(xiàn)混合圖表，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Vue+Antv F2實現(xiàn)混合圖表的具體代碼，供大家參考，具體內容如下
一、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為圖形底部時間 ?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: '累計委案量',
? ? ? ? ?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 對象
? _this.casechart = new _this.$F2.Chart({
? ? id: 'caseChart',
? ? pixelRatio: window.devicePixelRatio // 指定分辨率
? });
? // 載入數(shù)據(jù)源
? _this.casechart.source(_this.chartsData,{
? ? Total: {
? ? ? alias: '委案量'
? ? },
? ? addTotal: {
? ? ? alias: '累計委案量'
? ? }
? });
??
? // 自定義圖例內容以及交互行為
? _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({ ? ? ? ? ? ? ? ? ? ?// 折線點樣式?
? ? ? fill: 'white',
? ? ? stroke: 'red',
? ? ? lineWidth: 1
? ? });
? _this.casechart.render(); ?//渲染圖表
}, ??六、mounted中調用
mounted() {
? ? var v = this;
? ? this.$nextTick(() => {
? ? ? v.caseChart();
? ? }); ??
? },樣式
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue2.x中的父組件傳遞數(shù)據(jù)至子組件的方法
這篇文章主要介紹了Vue2.x中的父組件數(shù)據(jù)傳遞至子組件的方法,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了vuejs對接后端踩過的坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
利用vue + koa2 + mockjs模擬數(shù)據(jù)的方法教程
這篇文章主要給大家介紹了關于利用vue + koa2 + mockjs模擬數(shù)據(jù)的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2017-11-11
這篇文章主要介紹了基于vue和websocket的多人在線聊天室,需要的朋友可以參考下2020-02-02
vue3.x中useRouter()執(zhí)行后返回值是undefined問題解決
這篇文章主要給大家介紹了關于vue3.x中useRouter()執(zhí)行后返回值是undefined問題的解決方法,文中通過代碼示例介紹的非常詳細,對大家學習或者使用vue3.x具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
詳解Vue的computed(計算屬性)使用實例之TodoList
本篇文章主要介紹了詳解Vue的computed(計算屬性)使用實例之TodoList，具有一定的參考價值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了實現(xiàn)一個 Vue 吸頂錨點組件方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
這篇文章主要介紹了Vue通過懶加載提升頁面響應速度，對Vue性能感興趣的同學，可以參考下2021-05-05
在日常使用Vue開發(fā)項目的時候，計算屬性computed是一個非常常用的特性，本文就來分享一些使用Vue的computed計算屬性時的一些小技巧，希望能夠幫助到大家2023-06-06
這篇文章主要介紹了VUE常見知識疑點問題總結,詳細介紹了vue.js @click和v-on:click有什么區(qū)別,v-on和v-bind的區(qū)別,通過本文可以認識Vue的export、export default、import的詳細介紹,感興趣的朋友一起看看吧2024-02-02