ant F2折线图

1.html

2.css

.body{
　　width:375px;
　　height:600px;
}

3.js

import F2 from '@antv/f2';

//设定主题风格
F2.Global.setTheme({
　　colors: [ '#F04864', '#ffaa00', '#8543E0'],//线条颜色
　　pixelRatio: 2,
　　guide: {
　　　　line: {
　　　　　　stroke: '#F04864',//线条颜色
　　　　　　lineWidth: 2
　　　　}
　　}
});

//mounted()

this.pushdata()

//methods

　　pushdata(){
　　　　for(let j=this.uplength;j<=this.maxlength;j++){
　　　　　　this.chartdata.push(this.data1[j],this.data2[j],this.data3[j])
　　　　}
　　　　var d1length=this.data1.length
　　　　var d2length=this.data2.length
　　　　var d3length=this.data3.length
　　　　var m=[d1length,d2length,d3length]

　　　　//获取最大值
　　　　var res=Math.max(...m)
　　　　for(let i=d1length;i<=res;i++){
　　　　　　var data={ name: null, value: 0,type:null}
　　　　　　this.data1.push(data)
　　　　}
　　　　for(let i=d2length;i<=res;i++){
　　　　　　var data={ name: null, value: 0,type:null}
　　　　　　this.data2.push(data)
　　　　}
　　　　for(let i=d3length;i<=res;i++){
　　　　　　var data={ name: null, value:0,type:null}
　　　　　　this.data3.push(data)
　　　　}
　　　　this.setchart()
　　},

　　setchart(){
　　　　//设置画布
　　　　const chart = new F2.Chart({
　　　　　　id: 'myChart',
　　　　　　pixelRatio: window.devicePixelRatio ,// 指定分辨率
　　　　　　padding: ['auto',30,30,30] ,// 指定几个方向自动计算 padding
　　　　});

　　　　//载入数据
　　　　chart.source(this.chartdata,{

　　　　//chartdata.value和name
　　　　　　value: {
　　　　　　　　// identity，常量类型的数值，也就是说数据的某个字段是不变的常量；
　　　　　　　　// linear: 数值类型
　　　　　　　　// cat: 分类类型
　　　　　　　　// timeCat：时间类型
　　　　　　　　type: 'linear',//该值对应的轴刻度值类型
　　　　　　　　// mask: 'hh:mm',//该值对应的轴刻度值类型(时间格式)
　　　　　　　　tickCount:1,//该值对应的轴刻度值差
　　　　　　　　range: [0,1],//该值对应的轴刻度值差对应折线值差
　　　　　　　　formatter: function formatter(ivalue) {
　　　　　　　　　　return ivalue + '';//自定义该值对应的轴刻度值添加文本
　　　　　　　　},
　　　　　　},
　　　　　　name:{
　　　　　　　　type: 'cat',//该值对应的轴刻度值类型
　　　　　　　　range: [0,1],//该值对应的轴刻度值差对应折线值差
　　　　　　　　tickCount:1,//该值对应的轴刻度值差
　　　　　　　　min:0,
　　　　　　　　max:4
　　　　　　}
　　　　})

　　　　chart.legend({
　　　　　　position: 'top',//标题位置
　　　　　　offsetY: -5
　　　　})

　　　　//图表类型.line、.area、.interval、.polygon、.schema
　　　　chart.line({
　　　　　　generatePoints: true,
　　　　　　sortable: true,
　　　　　　startOnZero:true,
　　　　　　connectNulls: true
　　　　})

　　　　//xy轴格式 'x*y' || [ 'x', 'y' ]
　　　　.position('name*value')//对应data

　　　　//线大小
　　　　// point 图形的 size 影响点的半径大小；
　　　　// line, area, path 中的 size 影响线的粗细；
　　　　// interval 的 size 影响柱状图的宽度。
　　　　.size([ 2,2])//线条大小

　　　　// 常量颜色
　　　　//('red')//统一
　　　　//('type', [ 'red', 'blue' ]) // 指定颜色
　　　　//('type', (type) => { // 通过回调函数
　　　　　　//if (type === 'a') {
　　　　　　　　//return 'red';
　　　　　　//}
　　　　　　//return 'blue';
　　　　//})
　　　　.color('type',(type)=>{
　　　　　　if(type=='a') return 'red'
　　　　　　if(type=='b') return 'blue'
　　　　　　if(type=='c') return 'yellow'
　　　　})

　　　　//图表类型样式
　　　　//line //'line', 'smooth', 'dash' //dash：虚线，smooth：平滑线　　　　　　

　　　　//point 'circle', 'hollowCircle', 'rect' //默认为 'circle'　　　　　　

　　　　//area 'area', 'smooth' //填充内容的区域图　　　　　　

　　　　//interval 'rect'　　　　　　

　　　　//polygon 'polygon'　　　

　　　　//schema 'candle' //目前仅 K 线图

　　　　.shape('type', function(type) {
　　　　　　if (type == 'a') {
　　　　　　　　return 'line';//实线
　　　　　　}
　　　　　　if (type == 'b') {
　　　　　　　　return 'dash';//虚线
　　　　　　}
　　　　　　if (type == 'c'){
　　　　　　　　return 'smooth'//平滑
　　　　　　}
　　　　})

　　　　//绘制层叠图、分组图
　　　　//{ type:'stack' }
　　　　//[{ type: 'dodge',marginRatio: 0, // 数值范围为 0 至 1，用于调整分组中各个柱子的间距}]
　　　　.adjust()

　　　　//线图描述范围填充
　　　　.style('type',{
　　　　　　// fill:'red',//填充颜色,
　　　　　　fill(val){
　　　　　　　　if(val=='a') return 'red'
　　　　　　　　if(val=='b') return 'blue'
　　　　　　　　if(val=='c') return 'yellow'
　　　　　　},//回调函数方法
　　　　　　fillOpacity:0.3,//透明度
　　　　　　// stroke:'blue',//线条颜色
　　　　　　})

　　　　chart.tooltip('type',{

　　　　　　crosshairsType:'xy',//提示线条类型 //x、y、xy
　　　　　　showYTip:true,//展示x或y轴的当前的刻度值 // 可选showXTip、showYTip //值:true、false
　　　　　　yTip:{
　　　　　　　　fontSize: 10, // 字体大小
　　　　　　　　fill: 'white'
　　　　　　},
　　　　　　yTipBackground:{
　　　　　　　　fill:'rgba(0, 0, 0, 0.5)'
　　　　　　}, // Y 轴辅助信息的背景样式
　　　　　　alwaysShow: false, // 当移出触发区域，是否仍显示提示框内容，默认为 false，移出触发区域 tooltip 消失，设置为 true 可以保证一直显示提示框内容
　　　　　　showTooltipMarker: true, // 是否显示 tooltipMarker
　　　　　　tooltipMarkerStyle: {
　　　　　　　　fill: 'white' // 设置 tooltipMarker 的样式坐标点或矩形条选择提示填充色
　　　　　　},
　　　　　　showCrosshairs: true,//显示提示线条
　　　　　　crosshairsStyle: {
　　　　　　　　stroke: 'rgba(0, 0, 0, 0.1)',
　　　　　　　　lineWidth: 2
　　　　　　}, // 配置辅助线的样式

　　　　　　showItemMarker: true,//显示文本框内当前选择的矩形条颜色

　　　　　　//提示框背景色
　　　　　　background: {
　　　　　　　　radius: 2,
　　　　　　　　fill: "#000000",
　　　　　　　　padding: [5, 10]
　　　　　　},

　　　　　　//提示框文本色

　　　　　　// tooltip value 项的文本样式配置

　　　　　　nameStyle: {
　　　　　　　　fontSize: 12,
　　　　　　　　fill: '#fff',
　　　　　　　　textAlign: 'start',
　　　　　　　　textBaseline: 'middle'
　　　　　　}, //x轴
　　　　　　valueStyle: {
　　　　　　　　fontSize: 12,
　　　　　　　　fill: '#fff',
　　　　　　　　textAlign: 'start',
　　　　　　　　textBaseline: 'middle'
　　　　　　}, //y轴

　　　　　　onShow(ev) {
　　　　　　　　const items = ev.items;
　　　　　　　　items[0].name = items[0].title;
　　　　　　}
　　　　})

　　　　//动画
　　　　.animate()

　　　　//渲染画布
　　　　chart.render();
　　},

　　//判断鼠标下落点
　　leftorright(e){
　　　　this.left=e.targetTouches[0].clientX
　　},

　　//滑动距离
　　scrollor(e){
　　　　this.scorll=e.targetTouches[0].clientX
　　},

　　//松手触发
　　setchartdata(){
　　　　　　var res=this.left-this.scorll

　　　　　　//左滑
　　　　　　if(this.scorll!=0 && res>150){
　　　　　　　　if(this.maxlength*3<this.chartdata.length){
　　　　　　　　　　this.chartdata=[]
　　　　　　　　　　this.uplength=this.maxlength+1
　　　　　　　　　　this.maxlength=this.maxlength+this.lengthnumber
　　　　　　　　　　for(let j=this.uplength;j<=this.maxlength;j++){
　　　　　　　　　　　　this.chartdata.push(this.data1[j],this.data2[j],this.data3[j])
　　　　　　　　　　}
　　　　　　　　　　this.left=0
　　　　　　　　　　this.scorll=0
　　　　　　　　　　this.setchart()
　　　　　　　　}
　　　　　　　　return
　　　　　　}

　　　　　　//右滑
　　　　　　if(res<-150){
　　　　　　　　if(this.uplength>=this.lengthnumber){
　　　　　　　　this.chartdata=[]
　　　　　　　　this.uplength=this.uplength-this.lengthnumber
　　　　　　　　this.maxlength=this.maxlength-this.lengthnumber
　　　　　　　　for(let j=this.uplength;j<=this.maxlength;j++){
　　　　　　　　　　this.chartdata.push(this.data1[j],this.data2[j],this.data3[j])
　　　　　　　　}
　　　　　　　　this.left=0
　　　　　　　　this.scorll=0
　　　　　　　　this.setchart()
　　　　　　　　}
　　　　　　}
　　}

4data

data1:[
　　{ name: 'Sports', value: 100,type:'a' },
　　{ name: 'Strategy', value:300 ,type:'a'},
　　{ name: 'Action', value: 200,type:'a' },
　　{ name: 'Shooter', value: 100,type:'a' },
　　{ name: 'Other', value: 300 ,type:'a'},
　　{ name: 'a', value: 200 ,type:'a'},
　　{ name: 'b', value: 300 ,type:'a'},
　　{ name: 'c', value: 400 ,type:'a'},
　　{ name: 'd', value: 200 ,type:'a'},
],
data2:[
　　{ name: 'Sports', value:200 ,type:'b'},
　　{ name: 'Strategy', value:400 ,type:'b'},
　　{ name: 'Action', value: 300,type:'b' },
　　{ name: 'Shooter', value: 200,type:'b' },
　　{ name: 'Other', value: 400, type:'b'},
],
data3:[
　　{ name: 'Sports', value: 300,type:'c'},
　　{ name: 'Strategy', value:200 ,type:'c'},
　　{ name: 'Action', value: 100,type:'c'},
　　{ name: 'Shooter', value: 300,type:'c'},
　　{ name: 'Other', value: 100, type:'c'},
],
chartdata:[
],