php 占比图,ECharts-Helper: echart-helper是一款辅助echarts开发的jQuery插件，能够帮助开发者快速构建echart图表。...

刘兮mkq0.01~

于 2021-03-23 22:09:12 发布

阅读量259

点赞数 1

文章标签： php 占比图

ECharts-Helper

项目介绍

echart-helper是什么？

echart-helper是一款辅助echarts开发的jQuery插件，能够帮助开发者快速构建echart图表。

安装教程

引入jquery、echarts及echarts.helper三个文件即可

实现原理

将 echarts 各类通用配置预先放入插件中，减少后续相关配置信息的写入，同时，任意内容均可通过配置进行覆盖(可完全复制使用echarts原生格式)。

将后端数据自动格式化成 echarts 所需格式，减少数据再次整理的过程。

实现功能

html标签绑定数据，渲染图表

js调用生成图表

异步请求url渲染图表

配置使用主题

可自定义基础配置模版

使用说明

以下为部分使用说明

html

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"}'>

js(后续js部分标签绑定与此处相同，皆省略)

$('body').EChartHelper();

js调用渲染

html

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);

js 简单定义数据

html

// data_simple.js 在 demo中返回数据为：[{"title":"基础知识","get_score":11},{"title":"加分知识","get_score":12},{"title":"未分组","get_score":8}]

$('.echart-canvas-02').getDrawEChart({

'url' : './data_simple.js',

'drow_data' : {

echart_config : {title:"分组得分占比图",type:"pie",name_key:"title",value_key:"get_score"}

}

});

js 完整定义数据，自定义请求类型

html

// data_profession.js 在 demo中返回数据为：{"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', // 数据使用字段

'drow_data' : {

echart_config : {title:"分组得分占比图",type:"pie",name_key:"title",value_key:"get_score"}

}

});

异步请求，url标签绑定

简单数据格式请求

echart-url='./data_simple.js'

echart-config='{data_name:"分值占比",type:"pie",name_key:"title",value_key:"get_score"}'>

完整数据格式请求

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"}'>

配置主题

需要引入样式文件(此处以 wonderland 为例)，可配置自定义样式：http://echarts.baidu.com/theme-builder/ 下载引入后即可配置使用。

$('body').EChartHelper({

'theme':'wonderland',

});

配置模版

在 chartOption 内以图表类型为 key 传入需要自定义的配置内容即可。

具体配置内容请参考 echarts 官方文档。

$('body').EChartHelper({

'chartOption':{

'pie':{

title : {

subtext: '纯属虚构123',

}

});

其他配置展示

a) 雷达图 radar

相对于饼图增加了一个总数字段

html

echart-data='[{"title":"基础知识","get_score":11,"group_total_score":13},{"title":"加分知识","get_score":5,"group_total_score":5},{"title":"未分组","get_score":1,"group_total_score":6}]'

echart-config='{type:"radar",name_key:"title",value_key:"get_score",max_key:"group_total_score",data_name:"得分"}'>

b) 柱状图 bar

html

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} 秒"}}}'>

c) 折线图 line

此处仅需要将柱状图 echart-config 中 type 属性改为 line 即可

html

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:"单题用时/秒"}' >

d) 组合折线图 line

会自动将x轴无数据的字段填充0

html

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} 人次"}}}'>

e) 组合柱状图 bar

同理，修改组合折线图 echart-config 中的 type 值为 bar 即可

html

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

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} 秒"}}]}'>