dataset数据到图形的映射
- 效果图:
- 源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dataset数据到图形的映射</title>
<!-- 引入echarts支持库 -->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
</head>
<body style="height: 700px; margin: 0">
<!-- echarts DOM 容器 -->
<div id="container" style="height: 100%; margin: 0"></div>
</body>
<script type="text/javascript">
let chart = echarts.init(document.getElementById("container"));
let option = {
legend: {},
tooltip: {},
dataset: {
source: [
['product', '2012', '2013', '2014', '2015'],
['banana', 41.1, 30.4, 65.1, 53.3],
['apple', 86.5, 92.1, 85.7, 83.1],
['mango', 24.1, 67.2, 79.5, 86.4]
],
},
xAxis: [
{
type: 'category', //坐标轴类型。[ default: 'category' ] ['value'(数值轴) | 'category'(类目轴) | 'time'(时间轴) | 'log'(对数轴)]
gridIndex: 0//x 轴所在的 grid 的索引,默认位于第一个 grid。
},
{type: 'category', gridIndex: 1}
],
yAxis:[
{gridIndex: 0},//y 轴所在的 grid 的索引,默认位于第一个 grid。
{gridIndex: 1}
],
grid: [//直角坐标系内绘图网格,单个 grid 内最多可以放置上下两个 X 轴,左右两个 Y 轴。
{bottom: '55%'},//grid 组件离容器下侧的距离。
{top: '55%'}//grid 组件离容器上侧的距离。
],
series: [
// 这几个系列会在第一个直角坐标系中,每个系列对应到 dataset 的每一行。
{
type: 'bar',//柱状/条形图
seriesLayoutBy: 'row'//系列“排布”到 dataset 行/列。[ default: 'column' ] [column' | 'row']
},
{type: 'bar', seriesLayoutBy: 'row'},
{type: 'bar', seriesLayoutBy: 'row'},
// 这几个系列会在第二个直角坐标系中,每个系列对应到 dataset 的每一列。
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},
]
};
if(option && typeof option === 'object') {
chart.setOption(option, null);
}
</script>
</html>