源码搜藏网

本文实例为大家分享了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();
  }); 
 },

样式

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。