vue 折线图,
本文主要详细介绍了用vue F2生成折线图的方法。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享了vue F2生成折线图的具体代码，供大家参考。具体内容如下
1.翻译
2.打开命令窗口，通过npm安装F2。
npm安装@antv/f2 -保存
3.使用import或require引入F2
const F2=require( @ antv/F2 )；
4.在页面上创建一个具有宽度和高度的画布标签，并指定id:
模板
div class=容器
画布id=myChart/canvas
/div
/模板
5.编写图表绘制代码。
模板
div class=容器
画布id=myChart/canvas
/div
/模板
脚本
const F2=require( @ antv/F2 )；
导出默认值{
姓名： aaa ，
data() {
返回{
图表数据：[
{
日期： 2017-06-05 ，
价值：116
},
{
日期： 2017-06-06 ，
价值：129
},
{
日期： 2017-06-07 ，
价值：135
},
{
日期： 2017-06-08 ，
价值：86
},
{
日期： 2017-06-09 ，
价值：73
},
{
日期： 2017-06-10 ，
价值：85
},
{
日期： 2017-06-11 ，
价值：73
},
{
日期： 2017-06-12 ，
价值：68
},
{
日期： 2017-06-13 ，
价值：92
},
{
日期： 2017-06-14 ，
价值：130
},
{
日期： 2017-06-15 ，
价值：245
},
{
日期： 2017-06-16 ，
价值：139
},
{
日期： 2017-06-17 ，
价值：115
},
{
日期： 2017-06-18 ，
价值：111
},
{
日期： 2017-06-19 ，
价值：309
},
{
日期： 2017-06-20 ，
数值：206
},
{
日期： 2017-06-21 ，
价值：137
},
{
日期： 2017-06-22 ，
价值：128
},
{
日期： 2017-06-23 ，
价值：85
},
{
日期： 2017-06-24 ，
价值：94
}
]
};
},
已创建(){}，
方法：{
drawChart() {
var _ this=this
//步骤1:创建图表对象
const chart=新F2。图表({
id:“我的图表”，
像素比率：window.devicePixelratio//Specify分辨率
});
//第二步：加载数据源
chart.source(_this.chartData，{
值：{
TickCount: 10，//坐标轴上刻度线的数量
Min: 50，//手动指定值字段的最小值
Max: 350 //手动指定值字段的最大值
},
日期：{
Type: timeCat ，//将日期字段指定为时间类型
范围：[0，0.8]，//占X轴的80%
TickCount: 3 //坐标轴上刻度线的数量
}
});
//第三步：使用图形语法绘制图表。
//注意：f2是移动海图库，图例只能在移动端显示。
chart.tooltip({
Custom: true，//是否自定义工具提示提示框？
XTIP: true，//是否显示X轴的辅助信息？
Showtip: true，//是否显示Y轴的辅助信息？
Snap: true，//是否将辅助线精确定位到数据点？
十字线类型： xy ，//参考线的类型
十字线样式：{
//配置参考线的样式
LineDash: [2]，//虚线的密度
笔画： rgba(255，0，0，0.25)，
线宽：2
}
});
//坐标轴配置(这里配置的是日期对应的坐标轴)
图表.坐标轴(日期，{
标签:函数标签(文本、索引、总计){
const textCfg={
文本对齐：“居中”
};
//第一个点靠左对齐，最后一个点靠右对齐，其余居中，只有一个点时靠左对齐。
if (index===0) {
textCfg.textAlign= left
} else if (index===total - 1) {
textCfg.textAlign= right
}
text CFG . text= day: text；//textCfg.text支持文本格式。
返回textCfg
}
});
//将点按X轴连成一条线，形成线图。
chart.line()。位置(日期*值)；
//步骤4:呈现图表
chart . render()；
}
},
组件：{}，
已安装(){
var _ this=this
_这个。绘制图表()；
},
已计算：{},
观察：{}
};
/脚本
样式范围。容器{
背景色：# fff
}
#我的图表{
宽度：100%;
高度：260像素
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。