jQuery图表插件EChart的使用

作者：管理员

发布时间：2021/5/19 17:28:19

评论数：0

转载请自觉注明原文：http://www.jq-school.com/Show.aspx?id=4747

　　ECharts-Helper


　　项目介绍


　　echart-helper是什么？


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


　　安装教程


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


　　实现原理


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


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


　　实现功能


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


　　js调用生成图表


　　异步请求url渲染图表


　　配置使用主题


　　可自定义基础配置模版


　　使用说明


　　以下为部分使用说明


　　html


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


　　$（'body'）。EChartHelper（）;


　　js调用渲染


　　html


　　js


　　var drawData={


　　echart_data     : [],


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


　　};


　　$（'.canvas-box echart-canvas-01'）。drawEChart（drawData）;


　　js 简单定义数据


　　html


　　js


　　// data_simple.js 在 demo中返回数据为：[]


　　$（'.echart-canvas-02'）。getDrawEChart（{


　　'url'       : '',


　　'drow_data' : {


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


　　}


　　}）;


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






关键字：jquery