在微信小程序中使用 F2
本项目是 F2 的 Mpvue 小程序版本。开发者可以通过熟悉的 F2 配置方式及 Vue 语法,快速开发图表,满足各种可视化需求。
扫码体验
安装
npm i mpvue-f2
使用
<template><div class="echarts-wrap"><mpvue-f2 :f2="f2" :onInit="onInit" canvasId="demo-canvas" /></div></template><script>import mpvueF2 from 'mpvue-f2'const F2 = require('@antv/f2')let chart = nullfunction initChart (canvas, width, height) {const data = [{ 'year': 1997, 'type': 'United States', 'value': 4.9 }, { 'year': 1997, 'type': 'Florida', 'value': 4.8 }, { 'year': 1998, 'type': 'United States', 'value': 4.5 }, { 'year': 1998, 'type': 'Florida', 'value': 4.3 }, { 'year': 1999, 'type': 'United States', 'value': 4.2 }, { 'year': 1999, 'type': 'Florida', 'value': 3.9 }, { 'year': 2000, 'type': 'United States', 'value': 4 }, { 'year': 2000, 'type': 'Florida', 'value': 3.7 }, { 'year': 2001, 'type': 'United States', 'value': 4.7 }, { 'year': 2001, 'type': 'Florida', 'value': 4.7 }, { 'year': 2002, 'type': 'United States', 'value': 5.8 }, { 'year': 2002, 'type': 'Florida', 'value': 5.6 }, { 'year': 2003, 'type': 'United States', 'value': 6 }, { 'year': 2003, 'type': 'Florida', 'value': 5.2 }, { 'year': 2004, 'type': 'United States', 'value': 5.5 }, { 'year': 2004, 'type': 'Florida', 'value': 4.6 }, { 'year': 2005, 'type': 'United States', 'value': 5.1 }, { 'year': 2005, 'type': 'Florida', 'value': 3.7 }, { 'year': 2006, 'type': 'United States', 'value': 4.6 }, { 'year': 2006, 'type': 'Florida', 'value': 3.2 }, { 'year': 2007, 'type': 'United States', 'value': 4.6 }, { 'year': 2007, 'type': 'Florida', 'value': 4 }, { 'year': 2008, 'type': 'United States', 'value': 5.8 }, { 'year': 2008, 'type': 'Florida', 'value': 6.3 }, { 'year': 2009, 'type': 'United States', 'value': 9.3 }, { 'year': 2009, 'type': 'Florida', 'value': 10.4 }, { 'year': 2010, 'type': 'United States', 'value': 9.6 }, { 'year': 2010, 'type': 'Florida', 'value': 11.1 }, { 'year': 2011, 'type': 'United States', 'value': 8.9 }, { 'year': 2011, 'type': 'Florida', 'value': 10 }, { 'year': 2012, 'type': 'United States', 'value': 8.1 }, { 'year': 2012, 'type': 'Florida', 'value': 8.5 }, { 'year': 2013, 'type': 'United States', 'value': 7.4 }, { 'year': 2013, 'type': 'Florida', 'value': 7.2 }, { 'year': 2014, 'type': 'United States', 'value': 6.2 }, { 'year': 2014, 'type': 'Florida', 'value': 6.3 }, { 'year': 2015, 'type': 'United States', 'value': 5.3 }, { 'year': 2015, 'type': 'Florida', 'value': 5.4 }, { 'year': 2016, 'type': 'United States', 'value': 4.9 }, { 'year': 2016, 'type': 'Florida', 'value': 4.9 }, { 'year': 2017, 'type': 'United States', 'value': 4.4 }, { 'year': 2017, 'type': 'Florida', 'value': 4.3 }]chart = new F2.Chart({el: canvas,width,height})chart.source(data, {year: {range: [0, 1],ticks: [1997, 1999, 2001, 2003, 2005, 2007, 2009, 2011, 2013, 2015, 2017]},value: {tickCount: 10,formatter (val) {return val.toFixed(1) + '%'}}})chart.tooltip({custom: true,showCrosshairs: true,onChange (obj) {const legend = chart.get('legendController').legends.top[0]const tooltipItems = obj.itemsconst legendItems = legend.itemsconst map = {}legendItems.map(item => {map[item.name] = Object.assign({}, item)})tooltipItems.map(item => {const { name, value } = itemif (map[name]) {map[name].value = value}})legend.setItems(Object.values(map))},onHide () {const legend = chart.get('legendController').legends.top[0]legend.setItems(chart.getLegendItems().country)}})chart.guide().rect({start: [2011, 'max'],end: ['max', 'min'],style: {fill: '#CCD6EC',opacity: 0.3}})chart.guide().text({position: [2014, 'max'],content: 'Scott administratio\n(2011 to present)',style: {fontSize: 10,textBaseline: 'top'}})chart.line().position('year*value').color('type', val => {if (val === 'United States') {return '#ccc'}})chart.render()return chart}export default {components: {mpvueF2},data () {return {f2: F2,onInit: initChart}}}</script><style scoped>.echarts-wrap {width: 100%;height: 300px;}</style>
这对于所有 F2 图表都是通用的,用户只需要修改上面 initChart
的内容,即可改变图表。
本项目只展示了部分 demos,更全的见 AntV F2。
完整的例子请参见 examples 分支。
属性
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
f2 | Object | null | f2 对象 |
canvasId | String | f2-canvas | canvasId |
onInit | Function | null | 初始化函数 |
lazyLoad | Boolean | false | 懒加载 |
微信版本要求
支持微信版本 >= 6.6.3,对应基础库版本 >= 1.9.91。
调试的时候,需要在微信开发者工具中,将“详情”下的“调试基础库”设为 1.9.91 及以上版本。
发布前,需要在 https://mp.weixin.qq.com 的“设置”页面,将“基础库最低版本设置”设为 1.9.91。当用户微信版本过低的时候,会提示用户更新。
暂不支持的功能
- Tooltip