Echarts数据到图形的映射(series.encode)
Echarts数据到图形的映射(series.encode)
别团等shy哥发育
发布于 2023-02-25 17:30:35
发布于 2023-02-25 17:30:35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据到图形的映射(使用encode)</title>
<!--引入Echarts文件-->
<script src="js/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var dom=document.getElementById("main");
var myChart=echarts.init(dom);
var app={};
var option=null;
// 初始 option
option = {
grid:{
left:130,
right:'30%',
height:'60%',
bottom:110
},
dataset:{
source:[
['score', 'amount', 'product'],
[89.3, 58212, 'Matcha Latte'],
[57.1, 78254, 'Milk Tea'],
[74.4, 41032, 'Cheese Cocoa'],
[50.1, 12755, 'Cheese Brownie'],
[89.7, 20145, 'Matcha Cocoa'],
[68.1, 79146, 'Tea'],
[19.6, 91852, 'Orange Juice'],
[10.6, 101852, 'Lemon Juice'],
[32.7, 20112, 'Walnut Brownie']
]
},
xAxis:{},
yAxis:{type:'category'},
series:[
{
type:'bar',
encode:{
//将"amount"列映射到X轴
x:'amount',
//将"product"列映射到Y轴
y:'product'
}
}
]
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
在这里插入图片描述
series.encode支持的属性
// 在任何坐标系和系列中，都支持：
encode: {
// 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示
tooltip: ['product', 'score']
// 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）
seriesName: [1, 3],
// 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。
itemId: 2,
// 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。
itemName: 3
}
// 直角坐标系（grid/cartesian）特有的属性：
encode: {
// 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：
x: [1, 5, 'score'],
// 把“维度0”映射到 Y 轴。
y: 0
}
// 单轴（singleAxis）特有的属性：
encode: {
single: 3
}
// 极坐标系（polar）特有的属性：
encode: {
radius: 3,
angle: 2
}
// 地理坐标系（geo）特有的属性：
encode: {
lng: 3,
lat: 2
}
// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：
encode: {
value: 3
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-12-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读