Sahara云大数据>> echarts-plus>> 返回
项目作者： yutingzhao1991

项目描述 ：
A visualization grammar extension for Echarts to make it more powerful. Help you build echarts option and series more effective!
高级语言： JavaScript
项目地址: git://github.com/yutingzhao1991/echarts-plus.git
创建时间： 2017-02-24T01:52:00Z
项目社区：https://github.com/yutingzhao1991/echarts-plus
开源协议：
下载


echarts-plus

NPM version

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:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>echarts-plus demo</title>
  6.   <link rel="stylesheet" href="highlight.css">
  7. </head>
  8. <body>
  9.   <div id="main" style="width:800px;height:400px;"></div>
  10.   <script src="../dist/echarts-plus-all.js"></script>
  11.   <script>
  12.   new EChartsPlus([{
  13.     dt: '2016-01-01',
  14.     value: 21323
  15.   }, {
  16.     dt: '2016-01-02',
  17.     value: 16528
  18.   }, {
  19.     dt: '2016-01-03',
  20.     value: 16028
  21.   }], {
  22.     coord: 'rect',
  23.     series: [{
  24.       type: 'bar',
  25.       visions: [{
  26.         channel: 'y',
  27.         field: 'value'
  28.       }, {
  29.         channel: 'x',
  30.         field: 'dt'
  31.       }]
  32.     }],
  33.     option: {
  34.       title: {
  35.         text: '直角坐标系demo'
  36.       }
  37.     }
  38.   }).renderTo('main')
  39.   </script>
  40. </body>
  41. </html>

Then you will get:

demo

Live Demo

When you need write a echarts-plus option, you only need follow next steps:

  1. Choose a coord system, (map | polar | rect ).
  2. Mapping your data column to vision channel of the coord system.
  3. Done! Just try it.

当你需要构造一个ecahrts-plus的配置的时候，你只需要按照如下几部即可

  1. 选择一个坐标系，当前有(map | polar | rect )坐标系可选。
  2. 配置数据列到视觉通道的映射。
  3. 完成！谁用谁知道。

API DOC

License

License