Vue+Antv F2实现混合图表

 更新时间:2022年04月07日 12:57:08   作者:灬每天进步一点点  
这篇文章主要为大家详细介绍了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();
    });   
  },

样式

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

相关文章

  • vue子组件实时获取父组件的数据实现

    vue子组件实时获取父组件的数据实现

    本文主要介绍了vue子组件实时获取父组件的数据实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12
  • 使用Vue快速实现一个无缝轮播效果

    使用Vue快速实现一个无缝轮播效果

    这篇文章主要为大家详细介绍了如何使用Vue快速实现一个无缝轮播效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下
    2024-04-04
  • 一篇文章,教你学会Vue CLI 插件开发

    一篇文章,教你学会Vue CLI 插件开发

    这篇文章主要介绍了Vue CLI插件开发,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue3如何通过ref获取元素离顶部的距离

    vue3如何通过ref获取元素离顶部的距离

    这篇文章主要给大家介绍了关于vue3如何通过ref获取元素离顶部的距离,文中通过代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • vant-ui AddressEdit地址编辑和van-area的用法说明

    vant-ui AddressEdit地址编辑和van-area的用法说明

    这篇文章主要介绍了vant-ui AddressEdit地址编辑和van-area的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 命令行CLI一键生成各种烦人的lint配置实例

    命令行CLI一键生成各种烦人的lint配置实例

    这篇文章主要为大家介绍了命令行CLI一键生成各种烦人的lint配置实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • Vue3+axios+Mock.js实现登录功能的示例代码

    Vue3+axios+Mock.js实现登录功能的示例代码

    本文主要介绍了Vue3+axios+Mock.js实现登录功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • sublime如何配置开发VUE环境自动格式化代码

    sublime如何配置开发VUE环境自动格式化代码

    这篇文章主要介绍了sublime如何配置开发VUE环境自动格式化代码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • ElementPlus组件与图标按需自动引入的实现方法

    ElementPlus组件与图标按需自动引入的实现方法

    这篇文章主要介绍了ElementPlus组件与图标按需自动引入的实现方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • vue项目预览excel表格功能(file-viewer插件)

    vue项目预览excel表格功能(file-viewer插件)

    这篇文章主要介绍了vue项目预览excel表格功能(file-viewer插件),本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-10-10

最新评论