行者 / ECharts-HelperJavaScriptApache-2.0

0 Watch 64 Star 144 Fork 30
加入码云
与超过 300 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
echart-helper是一款辅助echarts开发的jQuery插件,能够帮助开发者快速构建echart图表。 展开 收起

whalephp 最后提交于 update readme
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md 9.92 KB

ECharts-Helper

项目介绍

echart-helper是什么?

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

安装教程

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

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

实现原理

  • 将 echarts 各类通用配置预先放入插件中,减少后续相关配置信息的写入,同时,任意内容均可通过配置进行覆盖(可完全复制使用echarts原生格式)。
  • 将后端数据自动格式化成 echarts 所需格式,减少数据再次整理的过程。

实现功能

  • html标签绑定数据,渲染图表
  • js调用生成图表
  • 异步请求url渲染图表
  • 配置使用主题
  • 可自定义基础配置模版

使用说明

完整使用说明请前往看云:https://www.kancloud.cn/qw_xingzhe/echart-helper/668005

以下为部分使用说明

html

<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(后续js部分标签绑定与此处相同,皆省略)

$('body').EChartHelper();

  1. js调用渲染

html

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

js

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);
  1. js 简单定义数据

html

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

js

// 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"}
    }           
});
  1. js 完整定义数据,自定义请求类型

html

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

js

// 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"}
    }           
});
  1. 异步请求,url标签绑定

简单数据格式请求

<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>            
  1. 配置主题

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

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>

  1. 配置模版

在 chartOption 内以图表类型为 key 传入需要自定义的配置内容即可。 具体配置内容请参考 echarts 官方文档。

$('body').EChartHelper({
    'chartOption':{
        'pie':{
            title : {
                subtext: '纯属虚构123',
            },
        }
    }
});
  1. 其他配置展示

a) 雷达图 radar

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

html

<div class="echart-canvas" 
    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:"得分"}'></div>

b) 柱状图 bar 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>

c) 折线图 line

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

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:"line",name_key:"topic_tip",value_key:"use_second",data_name:"单题用时/秒"}' ></div>

d) 组合折线图 line

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

html

<div class="echart-canvas" 
    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>

e) 组合柱状图 bar

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

html

<div class="echart-canvas" 
    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} 人次"}}}'></div>

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>

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>

项目点评 ( 21 )

你可以在登录后,发表评论

搜索帮助

12_float_left_people 12_float_left_close