小程序开发-在mpvue中使用图表库
小程序开发
浏览：771 次
wx-f2型
图表库
在开发中使用图表库，推荐百度的Echarts和阿里巴巴的AntV家族，其中移动终端是AntV-F2
埃哈特斯：
AntV-F2：
在这里，AntV-F2有一个关于使用本地小程序的现成教程（wx-F2:），所以我不再重复，只解释如何在mpvue框架中使用它。
在mpvue框架中使用Echarts
参考文件：
安装mpvue图表和echarts插件
##mpvue echarts公司
npm i mpvue echarts--保存
##埃哈特
npm i echarts--保存
用作vue文件中的组件
<模板>
<脚本>
从“echarts”导入echarts
从“mpvueEcharts”导入mpvueEcharts
让图表=空；
函数initChart（画布、宽度、高度）{
chart=echarts。init（画布，空{
width:宽度，
高度：高度
});
canvas.setChart（图表）；
var选项=｛｝；//ECharts配置项
chart.setOption（选项）；
返回图表；//返回图表后，可以自动绑定触摸操作
}
导出默认值{
组件：{
mpvueEcharts公司
},
数据（）{
返回{
echarts公司，
onInit:初始化图表
}
}
}
<样式范围>
.echarts包装{
宽度：100%；
高度：300px；
}
AntV-F2用于mpvue框架
AntV-F2正式提供了小程序的本地使用模式，并且没有与vue相关的依赖插件，因此我们将小程序的本机插件放在**“静态”**文件夹中使用
注意：它不能放在“src”目录中，以防止它被webpack工具打包
Wx-f2可以从ff canvas源代码中看到。vue文件数据OnInit中的opts是一个无法传递给组件的函数。它可以通过主动调用ff canvas组件的init方法并传入initChart来正常使用
将相应的wx-f2导入项目静态文件夹
静态文件夹
页面。项目src目录中的js将wx-f2组件配置作为一个小程序介绍
单元导出=[
{
路径：“pages/testF2/index”，//页面路径也是vue文件相对于src的路径
配置：{
//wx-f2组件的介绍和使用
使用组件：{
'ff canvas'：'/static/libs/f2 canvas/f2-canvas'
}
}
},
{
路径：'packageA/logs'，
subPackage:真，
Config:｛//页面配置，即Page.json的内容
NavigationBarTitleText:'查看启动日志'
}
}
]
用于vue文件
**注意：mpvue必须以延迟加载的形式使用，即主动触发渲染，否则将失败**
<模板>
之前加一个冒号
<脚本>
//请注意此处的路径。应导入静态文件夹中的f2.js文件
从“../../../static/F2 canvas/lib/F2”导入F2；
让图表=空；
函数initChart（画布、宽度、高度）{
//使用F2的图表
常量数据=[{
年份：“1951”，
销售额：38
},
{
年份：“1952”，
销售额：52
},
{
年份：“1956”，
销售额：61
},
{
年份：“1957”，
销售额：145
},
{
年份：“1958”，
销售额：48
},
{
年份：“1959”，
销售额：38
},
{
年份：“1960”，
销售额：38
},
{
年份：“1962”，
销售额：38
}
];
chart=新F2.chart({
el：帆布，
宽度
身高
});
图表源（数据{
销售额：{
tickCount:5
}
});
图表工具提示({
showItemMarker:false，
onShow（电子版）{
常量{
项目
}=ev；
项目[0]。名称=空；
项目[0]。名称=项[0].title；
项目[0]。value=“¥”
