ECharts-Helper

<script src="jquery-1.9.1.min.js"></script>
<script src="echarts.min.js"></script>
<script src="echarts.helper.js"></script>

<div class="echart-canvas"
	echart-data='[{"title":"Основные знания","get_score":11},{"title":"Прибавочные знания","get_score":12},{"title":"Не группировано","get_score":8}]'
	echart-config='{data_name:"Значения",title:"График распределения значений",type:"pie",name_key:"title",value_key:"get_score"}'></div>
```#### JS

```javascript
$('body').EChartHelper();

<div class="canvas-box echart-canvas-01"></div>

var drawData = {
    echart_data: [
        {"title":"Основные знания","get_score":11},
        {"title":"Прибавочные знания","get_score":12},
        {"title":"Не группировано","get_score":8}
    ],
    echart_config: {
        title:"График распределения значений",
        type:"pie",
        name_key:"title",
        value_key:"get_score"
    }
};
$('.canvas-box echart-canvas-01').drawEChart(drawData);

<div class="canvas-box echart-canvas-02"></div>

~~~~
4. html
~~~~
<div class="canvas-box echart-canvas-04"></div>
~~~~
js
~~~~
// data_profession.js в демонстрационной версии возвращает данные {"code":1,"dataset":[{"title":"Базовые знания","get_score":5},{"title":"Дополнительные знания","get_score":10},{"title":"Не группировано","get_score":5}]}
$('.echart-canvas-04').getDrawEChart({
    'url': './data_profession.js',
    'type': 'POST',
    'data': {p:1},
    'success_key': 'code', // данные запроса успешного ключа
    'success_val': '1', // данные запроса успешного значения
    'data_key': 'dataset', // данные используемые ключа
    'draw_data': {
        echart_config: {title:"Распределение баллов", type:"pie", name_key:"title", value_key:"get_score"}
    }
});
~~~~
5. html
~~~~
<div class="echart-canvas canvas-box echart-canvas-01-01"
     echart-url='./data_simple.js'
     echart-config='{"data_name":"Распределение баллов","type":"pie","name_key":"title","value_key":"get_score"}'></div>
~~~~
~~~~
<div class="echart-canvas canvas-box echart-canvas-01-01"
     echart-ajax='{"url":"./data_profession.js","success_key":"code","success_val":1,"data_key":"dataset"}'
     echart-config='{"data_name":"Распределение баллов","type":"pie","name_key":"title","value_key":"get_score"}'></div>
~~~~
6. js
~~~~
<script src="jquery-1.9.1.min.js"></script>
<script src="echarts.min.js"></script>
<script src="./theme/wonderland.js"></script>
<script src="../echarts.helper.js"></script>
<script>
$('body').EChartHelper({
    'theme':'wonderland',
});
</script>
~~~~
![](images/screenshot_1529729300149.png)
7. js
~~~~
$('body').EChartHelper({
    'chartOption':{
        'pie':{
            title : {
                subtext: 'чисто вымышленные данные 123',
            },
        }
    }
});
~~~~
8. Другие конфигурации
   a) Radar chart
> В сравнении с круговой диаграммой добавлено поле общего значения
html

<div class="echart-canvas"
    echart-data='[{"use_second":99,"topic_tip":"Задача 1"},{"use_second":6,"topic_tip":"Задача 2"},{"use_second":3,"topic_tip":"Задача 3"},{"use_second":4,"topic_tip":"Задача 4"}]'
    echart-config='{type:"bar",name_key:"topic_tip",value_key:"use_second",data_name:"Время решения задачи / секунды"}'
    echart-option='{yAxis: {axisLabel: {formatter: "{value} сек"}}}'></div>

<div class="echart-canvas"
    echart-data='[{"use_second":99,"topic_tip":"Задача 1"},{"use_second":6,"topic_tip":"Задача 2"},{"use_second":3,"topic_tip":"Задача 3"},{"use_second":4,"topic_tip":"Задача 4"}]'
    echart-config='{type:"line",name_key:"topic_tip",value_key:"use_second",data_name:"Время решения задачи / секунды"}'></div>

<div class="echart-canvas"
```markdown
```markdown
echart-data='[{"count":2,"day":"2017-09-17","project_name":"Средний PHP-инженер"},{"count":3,"day":"2017-09-16","project_name":"Средний PHP-инженер"},{"count":1,"day":"2017-09-10","project_name":"Средний PHP-инженер"},{"count":2,"day":"2017-08-30","project_name":"Быстрый профессиональный тест"},{"count":1,"day":"2017-08-30","project_name":"Средний PHP-инженер"},{"count":1,"day":"2017-08-29","project_name":"Быстрый профессиональный тест"},{"count":1,"day":"2017-08-29","project_name":"Средний PHP-инженер"},{"count":1,"day":"2017-08-28","project_name":"Быстрый профессиональный тест"},{"count":1,"day":"2017-08-27","project_name":"Быстрый профессиональный тест"},{"count":1,"day":"2017-08-26","project_name":"Быстрый профессиональный тест"},{"count":1,"day":"2017-08-25","project_name":"Быстрый профессиональный тест"},{"count":2,"day":"2017-08-24","project_name":"Быстрый профессиональный тест"},{"count":2,"day":"2017-08-24","project_name":"Средний PHP-инженер"},{"count":1,"day":"2017-08-23","project_name":"Средний PHP-инженер"},{"count":1,"day":"2017-08-21","project_name":"Средний PHP-инженер"}]'
  echart-config='{type:"line",name_key:"day",value_key:"count",data_key:"project_name"}'
  echart-option='{yAxis: {axisLabel: {formatter: "{value} человеко-часов"}}}'
></div>

~~~
![](images/screenshot_1529679137879.png)
e) Объединённый столбчатый график bar
> Аналогично, замени тип в конфигурации объединённого линейного графика echart-config значением "bar"
html
~~~
<div class="echart-canvas"
``````markdown
echart-data='[{"count":2,"day":"2017-09-17","project_name":"Средний PHP-инженер"},{"count":3,"day":"2017-09-16","project_name":"Средний PHP-инженер"},{"count":1,"day":"2017-09-10","project_name":"Средний PHP-инженер"},{"count":2,"day":"2017-08-30","project_name":"Быстрый профессиональный тест"},{"count":1,"day":"2017-08-30","project_name":"Средний PHP-инженер"},{"count":1,"day":"2017-08-29","project_name":"Быстрый профессиональный тест"},{"count":1,"day":"2017-08-29","project_name":"Средний PHP-инженер"},{"count":1,"day":"2017-08-28","project_name":"Быстрый профессиональный тест"},{"count":1,"day":"2017-08-27","project_name":"Быстрый профессиональный тест"},{"count":1,"day":"2017-08-26","project_name":"Быстрый профессиональный тест"},{"count":1,"day":"2017-08-25","project_name":"Быстрый профессиональный тест"},{"count":2,"day":"2017-08-24","project_name":"Быстрый профессиональный тест"},{"count":2,"day":"2017-08-24","project_name":"Средний PHP-инженер"},{"count":1,"day":"2017-08-23","project_name":"Средний PHP-инженер"},{"count":1,"day":"2017-08-21","project_name":"Средний PHP-инженер"}]'

echart-config='{type:"bar",name_key:"day",value_key:"count",data_key:"project_name"}'

echart-option='{yAxis: {axisLabel: {formatter: "{value} человеко-час"}}}'

f) Комбинация столбчатой диаграммы + линейной диаграммы bar+line
> В конфигурацию echart-config используйте массив для настройки связанных полей
html

<div class="echart-canvas"
    echart-data='[{"use_second":140,"get_score":0,"get_score_proportion_centesimal":0,"participator":"Участник №84"},{"use_second":52,"get_score":10,"get_score_proportion_centesimal":40,"participator":"Участник №86"},{"use_second":162,"get_score":15,"get_score_proportion_centesimal":50,"participator":"Участник №88"}]'
    echart-config='{type:["bar","line"],name_key:"participator",value_key:["get_score_proportion_centesimal","use_second"],data_name:["Процент правильных ответов","Затраченное время"]}'
```    echart-option='{yAxis: [{axisLabel: {formatter: "{value} %" }}, {axisLabel: {formatter: "{value} сек"}}]}'></div>
 ~~~
 ![](images/screenshot_1529683074966.png)
 g) Индикатор gauge
 html
 ~~~
 <div class="echart-canvas"
     echart-data='{"get_score_proportion_centesimal":70.833333333333}'
     echart-config='{type:"gauge",data_name:"Статистика баллов",name_value:"Процент правильных ответов",value_key:"get_score_proportion_centesimal"}'></div>
 ~~~
 ![](images/screenshot_1529679800775.png)