echarts-plus
v0.1.15
Published
A visualization grammar extension for Echarts to make it more powerful.
Downloads
77
Readme
echarts-plus
A visualization grammar extension for Echarts to make it more powerful.
Why use echarts-plus?
Echarts is awsome, but build echarts series option is annoying. echarts-plus use a visualization grammar to build echarts option. It let you build echarts option from data become quick and more effective.
Echarts 很强大，但是它的配置的设计是从图表本身的角度出发的。所以会导致从数据构建到 echarts 的配置变得很不友好。echarts-plus 从数据可视化本身出发，通过一套可视化语法来让创建echarts图表配置变得更高效。
《 ECharts 的痛点和解决方案 EChartsPlus 》
Quick Start
Simple demo code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts-plus demo</title>
<link rel="stylesheet" href="highlight.css">
</head>
<body>
<div id="main" style="width:800px;height:400px;"></div>
<script src="../dist/echarts-plus-all.js"></script>
<script>
new EChartsPlus([{
dt: '2016-01-01',
value: 21323
}, {
dt: '2016-01-02',
value: 16528
}, {
dt: '2016-01-03',
value: 16028
}], {
coord: 'rect',
series: [{
type: 'bar',
visions: [{
channel: 'y',
field: 'value'
}, {
channel: 'x',
field: 'dt'
}]
}],
option: {
title: {
text: '直角坐标系demo'
}
}
}).renderTo('main')
</script>
</body>
</html>Then you will get:
When you need write a echarts-plus option, you only need follow next steps:
- Choose a coord system,
(map | polar | rect ). - Mapping your data column to vision channel of the coord system.
- Done! Just try it.
当你需要构造一个ecahrts-plus的配置的时候，你只需要按照如下几部即可
- 选择一个坐标系，当前有
(map | polar | rect )坐标系可选。 - 配置数据列到视觉通道的映射。
- 完成！谁用谁知道。
API DOC
License
