Vue+Antv F2实现混合图表
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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();
});
},样式
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
