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();
    });   
  },

样式

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