ECharts使用dataset管理数据
ECharts使用dataset管理数据
别团等shy哥发育
发布于 2023-02-25 17:31:25
发布于 2023-02-25 17:31:25
代码可运行
运行总次数：0
代码可运行
ECharts使用dataset管理数据
- Apache ECharts (incubating)TM 4 开始支持了 dataset 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。
数据集（dataset）组件来单独声明数据，它带来了这些效果：
- 能够贴近这样的数据可视化常见思维方式：(I) 提供数据，(II) 指定数据到视觉的映射，从而形成图表。
- 数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。
- 数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。
- 支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。
1、Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用dataset管理数据</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 = {
legend:{},
tooltip:{},
dataset:{
//提供一份数据
source:[
['product','2015','2016','2017'],
['Matcha Latte',43.3,85.8,93.7],
['Milk Tea',83.1,73.4,55.1],
['Cheese Cocoa',86.4,65.2,82.5],
['Walnut Brownie',72,4,53.9,39.1]
]
},
//声明一个X轴，类目轴(category).默认情况下，类目轴对应到dataset第一列
xAxis:{type:'category'},
//声明一个Y轴，数值轴
yAxis:{},
//声明多个bar系列，默认情况下,每个系列会自动对应到dataset的每一列
series:[
{type:'bar'},
{type:'bar'},
{type:'bar'}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>2、效果:
3、也可以使用常见的对象数组的格式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用dataset管理数据</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 = {
legend: {},
tooltip: {},
dataset: {
// 用 dimensions 指定了维度的顺序。直角坐标系中，
// 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
// 如果不指定 dimensions，也可以通过指定 series.encode
// 完成映射，参见后文。
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-12-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
