在折线图(柱状、散点图类似)中使用
案例一(默认方式)
let option={
dataset:{
source:[
["1","2","3","4"],
//默认情况下,category 轴读取第一列(不包括第一行的值)
//默认情况下,value 轴读取第二列(不包括第一行的值)
[5,6,7,8],
[9,10,11,12],
[13,14,15,16],
[17,18,19,20]
]
},
title:{
text:"line"
},
xAxis:{
type:"category"
},
yAxis:{
type:"value"
},
series:{
type:"line",
}
}
效果图:
案例二(显示指定列为x/y)
...//省略与案例一相同代码
series:{
type:"line",
encode:{
x:1,//从0开始,1代表第2列
y:2
}
}
...
效果图:
案例三(指定某行为x/y)
...//省略与案例一相同代码
series:{
type:"line",
seriesLayoutBy:"row",//按行读取数据,默认
encode:{
x:1,
y:2
}
}
...
效果图
案例四(折线图+折线叠堆图)
let option={
dataset:{
source:[
["1","2","3","4"],
[5,6,7,8],
[9,10,11,12],
[13,14,15,16],
[17,18,19,20]
]
},
title:{
text:"line"
},
legend:{},
xAxis:{
type:"category"
},
yAxis:{
type:"value"
},
series:[
{
name:"line1",
type:"line",
areaStyle:{},
seriesLayoutBy:"row",
encode:{
x:1,
y:2
}
},
{
name:"line2",
type:"line",
areaStyle:{},
seriesLayoutBy:"row",
stack:"a",
encode:{
x:2,
y:3
}
},
{
name:"line3",
type:"line",
stack:"a",
areaStyle:{},
seriesLayoutBy:"row",
encode:{
x:2,
y:0
}
},
]
}
效果图
案例五(将案例四改成柱状图)
let option={
dataset:{
source:[
["1","2","3","4"],
[5,6,7,8],
[9,10,11,12],
[13,14,15,16],
[17,18,19,20]//取不到这一行的值,因为encode中的最大值只能是第一行数组长度-1
]
},
title:{
text:"bar"
},
legend:{},
xAxis:{
type:"category"
},
yAxis:{
type:"value"
},
series:[
{
name:"bar1",
type:"bar",
seriesLayoutBy:"row",
encode:{
x:1,
y:2
}
},
{
name:"bar2",
type:"bar",
seriesLayoutBy:"row",
stack:"a",
encode:{
x:1,
y:3
}
},
{
name:"bar3",
type:"bar",
stack:"a",
seriesLayoutBy:"row",
encode:{
x:1,
y:0
}
},
]
}
效果图
饼图中使用
案例
let option={
dataset:{
source:[
["A","B","C","D",'',''],
["B",6,7,8],
["C",10,11,12],
["D",14,15,16],
["E",18,19,20],
["F",22,23,24],
]
},
title:{
text:"pie"
},
tooltip:{},
legend:{},
series:[
{
name:"pie1",
type:"pie",
seriesLayoutBy:"row",
radius:[30,40],
center:[100,150],
encode:{
itemName:0,
value:1
}
},
{
name:"pie2",
type:"pie",
center:[250,150],
radius:[0,50],
labelLine:{
show:false,
},
label:{
position:"inside"
},
encode:{
itemName:2,
value:3
},
},
{
name:"pie3",
type:"pie",
seriesLayoutBy:"row",
center:[400,150],
radius:50,
labelLine:{
show:false,
},
label:{
position:"inside"
},
encode:{
itemName:4,
value:2
// tooltip:[4,2]
}
},
]
}