• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

mmecharts: echarts 数据、样式配置分离,jquery组件

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

mmecharts

开源软件地址:

https://gitee.com/parki/mmecharts

开源软件介绍:

mmecharts.js

echarts3.x 数据、样式配置分离,jquery组件

1、同一份数据用在不同图表类型2、自动解析不同数据结构3、只修改需要修改的配置

目录

概述

echarts 数据、样式配置分离,jquery组件,让使用echarts更简单

1、同一份数据用在不同图表类型2、自动解析不同数据结构3、只修改需要修改的配置

用法

导入jquery.jsmm.echarts.jsecharts.js

$(function () { $(selector).mmEcharts(options);  }); 

Options

名称标签类型默认描述
chartTypedata-chart-typestringline图表类型;line:折线图,bar:柱状图,bar2:x轴和y轴调换的柱状图,pie:饼状图,map:地图
queryUrldata-query-urlstringundefined请求后台数据URL
queryParamsdata-query-paramsobjectundefined请求后台参数
ajax不支持objectundefinedajax请求配置
dataTypedata-data-typestringrow请求后台返回数据类型,row或者column
chartThemedata-chart-themestringwalden图表主题
chartOptionsdata-chart-optionsobjectundefined图表配置,可以只设置修改部分,会和默认配置合并
groupFielddata-group-fieldstringname数据解码,分组字段
valueFieldsdata-value-fieldsobjectundefined数据解码,值字段,如,显示两条线:valueFields:{'dayValue':'日活完成量','monthTarget':'日活目标按月分解'}
categoryFielddata-category-fieldstringname类目字段,从行数据中获取,则需要配置该字段,如果设置categoryField则不需要设置valueFields
categoryValueFielddata-category-value-fieldstringname如果出现categoryField字段,必须要有categoryValueField字段
dataset不支持objectundefined设置图表数据

事件

名称标签参数描述
on不支持事件配置,{on:{click:function(){},mouserover:function(){};另外还支持事件:before:配置开始;renderBefore:后台数据已经返回开始渲染;complete:渲染完成
beforedata-beforeMMChart配置开始
renderBeforedata-render-beforedata, params, MMChart后台数据已经返回开始渲染
completedata-completeMMChart渲染完成

MMChart方法

名称参数描述
loadDataByUrlurl, params, dataType, defaultOptions, callback通过URL加载数据
addChartBySqloptions, chartType, yAixs, sql, params, dataType, callback添加混合图形
addChartByDataoptions, chartType, yAixs, data, dataType, callback添加混合图形
echartsnone获得echarts对象
setEchartsOptionoptions设置echarts配置
getEchartsOptionnone获取echarts配置
setOptionsoptions设置MMChart配置
getOptionsnone获取MMChart配置

ChartType方法

名称参数描述
type属性图表类型
optiondefaultOption图表默认配置
decodeDatadata,MMChart解码数据

自定义扩展图表类型

默认支持图表类型,line,bar ,bar2,map,pie.可以通过扩展ChartType增加图表类型。可以参考examples\mm.echarts.radar.js,代码结构:

$.mmEcharts.chartType.radar={//扩展的图表名称type: '图表类型',//默认通用配置 option: function () {    return {};  },  /**  * 把数据解码对应的series  * @param data 数据  * @param mmChart   * @returns {echarts.options}  */  decodeData: function (data,mmChart){    return {};  }}

例子

图表例子
折线图例子
柱状图例子
饼状图例子
混合图形例子自定义扩展图表例子


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap