Vue+Antv F2实现混合图表
作者:灬每天进步一点点
这篇文章主要为大家详细介绍了Vue+Antv F2实现混合图表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue+Antv F2实现混合图表的具体代码,供大家参考,具体内容如下
一、npm安装
npm install @antv/f2 --save
二、在main.js中引入
import F2 from '@antv/f2' Vue.prototype.$F2= F2;
三、在vue页面组件中创建canvas
<template> <div id="app"> <canvas id="caseChart" style="width: 100%;height: 230px;"></canvas> </div> </template>
四、在data中声明数据源
data(){ return{ casechart:null, // 混合图数据(s_Date为图形底部时间 Total为柱状图数据 addTotal为折线图数据) 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 // 创建 Chart 对象 _this.casechart = new _this.$F2.Chart({ id: 'caseChart', pixelRatio: window.devicePixelRatio // 指定分辨率 }); // 载入数据源 _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(); }); },
样式
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。