第四部分 dataset数据集
4. dataset数据集
eCharts 4 支持数据级组件，简单来说就是将数据和逻辑分离，更好的进行复用、理解。
官网代码
option = {
// 数据集
dataset: {
// source必须是二维数组
source: [
// 每一列称为一个『维度』。
// 这里分别是维度 0、1、2、3、4。
[12, 44, 55, 66, 2],
[23, 6, 16, 23, 1],
...
]
},
series: {
type: 'xxx',
// 通过encode去定义哪个维度被映射到哪
encode: {
x: [3, 1, 5], // 表示维度 3、1、5 映射到 x 轴。
y: 2, // 表示维度 2 映射到 y 轴。
tooltip: [3, 2, 4] // 表示维度 3、2、4 会在 tooltip 中显示。
}
}
}
展示案例图：
代码：
let box4 = document.querySelector('.box4')
let myCharts3 = echarts.init(box4)
myCharts3.setOption({
dataset:{
// 二维数组存放数据
source:[
// 0 1 2 3 4 5 六个维度
['衣服',22,15,36,35,18],
['食品',60,39,50,15,22],
['生活用品',60,52,36,15,36],
['家具',45,32,8,25,46],
['厨具',35,42,26,5,16],
['裤子',10,22,46,42,56]
]
},
title: {
text: "dataset数据集",
subtext: '折线、柱状、饼图',
left: "center"
},
xAxis: {
data: ['衣服', '食品', '生活用品', '家具', '厨具', '裤子']
},
yAxis: {
// 设置是否显示y轴线
axisLine: {
show: true
},
// 设置是否显示y轴刻度
axisTick: {
show: true
}
},
series: [
{
type:"line",
// 选择使用哪一个维度
encode:{
// 使用1维度映射到y轴上
y:2
}
},
{
type:"bar",
encode:{
// 使用1维度映射到y轴上
y:4
}
},
{
type:"pie",
width:"260px",
height:"260px",
top:"-60px",
left:"500px",
radius:["0%","40%"],
encode:{
// 饼图旁边的文字
// 使用0维度映射
itemName:0,
// 使用4维度映射
value:4
}
}
]
})
总结
以上就是今天要讲的内容，希望对大家有所帮助！！！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/82880.html
