echarts 数据、样式配置分离,jquery组件 让echarts用起来更加方便

简介: echarts 数据、样式配置分离,jquery组件 项目地址:https://gitee.com/parki/mmecharts 1、同一份数据用在不同图表类型 2、自动解析不同数据结构 3、只修改需要修改的配置

mmecharts.js

echarts 数据、样式配置分离,jquery组件 项目地址:https://gitee.com/parki/mmecharts 1、同一份数据用在不同图表类型 2、自动解析不同数据结构 3、只修改需要修改的配置

目录

概述

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

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

用法

导入jquery.jsmm.echarts.js和  echarts.js 


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

Options

名称 标签 类型 默认 描述
chartType data-chart-type string line 图表类型;line:折线图,bar:柱状图,bar2:x轴和y轴调换的柱状图,pie:饼状图,map:地图
queryUrl data-query-url string undefined 请求后台数据URL
queryParams data-query-params object undefined 请求后台参数
ajax 不支持 object undefined ajax请求配置
dataType data-data-type string row 请求后台返回数据类型,row或者column
chartTheme data-chart-theme string walden 图表主题
chartOptions data-chart-options object undefined 图表配置,可以只设置修改部分,会和默认配置合并
groupField data-group-field string name 数据解码,分组字段
valueFields data-value-fields object undefined 数据解码,值字段,如,显示两条线:valueFields:{'dayValue':'日活完成量','monthTarget':'日活目标按月分解'}
categoryField data-category-field string name 类目字段,从行数据中获取,则需要配置该字段,如果设置categoryField则不需要设置valueFields
categoryValueField data-category-value-field string name 如果出现categoryField字段,必须要有categoryValueField字段
dataset 不支持 object undefined 设置图表数据

事件

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

MMChart方法

名称 参数 描述
loadDataByUrl url, params, dataType, defaultOptions, callback 通过URL加载数据
addChartBySql options, chartType, yAixs, sql, params, dataType, callback 添加混合图形
addChartByData options, chartType, yAixs, data, dataType, callback 添加混合图形
echarts none 获得echarts对象
setEchartsOption options 设置echarts配置
getEchartsOption none 获取echarts配置
setOptions options 设置MMChart配置
getOptions none 获取MMChart配置

ChartType方法

名称 参数 描述
type 属性 图表类型
option defaultOption 图表默认配置
decodeData data,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 {};
  }
}

例子

图表例子
折线图例子
柱状图例子
饼状图例子

混合图形例子 自定义扩展图表例子

原文发布时间为:2018年02月27日
原文作者:parky_18 

本文来源:开源中国 如需转载请联系原作者

   

目录
相关文章
|
1月前
|
JavaScript 前端开发 索引
JQuery样式操作、click事件以及索引值-选项卡应用示例
JQuery样式操作、click事件以及索引值-选项卡应用示例
28 1
|
1月前
|
前端开发 算法 数据可视化
怎么在echarts图上左右滑动切换数据区间
怎么在echarts图上左右滑动切换数据区间
78 0
|
1月前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
94 0
|
1月前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
85 2
|
1月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
38 0
|
29天前
|
前端开发 JavaScript
|
1月前
|
新零售 分布式计算 数据可视化
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
数据分享|基于Python、Hadoop零售交易数据的Spark数据处理与Echarts可视化分析
|
1月前
|
存储
vue2、vue3分别配置echarts多图表的同步缩放(二)
vue2、vue3分别配置echarts多图表的同步缩放
25 0
|
1月前
|
API
vue2、vue3分别配置echarts多图表的同步缩放(一)
vue2、vue3分别配置echarts多图表的同步缩放
29 0
|
1月前
|
JavaScript 前端开发
jquery的属性样式
jquery的属性样式
10 1