2 Star 0 Fork 0

mengweijin / mwj-echarts

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.md

mwj-echarts

介绍

简单封装的百度echarts组件库扩展,支持从服务器异步加载或从本地加载数据。

依赖集成:jquery 3.3.1、echarts 4.1.0-release。

将本项目使用maven打包成jar,并安装到自己本地的maven仓库或者私服,然后添加到自己的工程里。如下:

<dependency>
    <groupId>com.mwj</groupId>
    <artifactId>mwj-echarts</artifactId>
    <version>1.0</version>
</dependency>

demo工程:mwj-echarts-demo

目前支持以下类型图表:

类别 描述
pie 饼图
bar 柱状图(组合图、堆积图)
line 折线图
tree 树图
gauge 仪表盘

对于目前不支持的图表或者支持度不够的图表,可使用echarts原生options配置:

let $demo = $("#demo")
    .css("width", width)
    .css("height", height)
    .css("display", "inline-block")
    .css("margin-bottom", "30px")
    .mwjECharts(config);

// 获取echarts图表对象
let chart = $demo.get(0).chart;
chart.setOption(echarts原生options配置);
// 获取base64编码的图片数据
// $demo.get(0).chartImage;

效果图

配置参数说明

参数名 默认值 必填项 描述
type null 图表类型。可选pie(饼图)/bar(柱状图(组合图、堆积图))/line(折线图)/tree(树图)/gauge(仪表盘)
title 图表标题
theme null 主题(chalk/dark/essos/halloween/infographic/macarons/purple-passion/roma/shine/vintage/walden/westeros/wonderland),如:wonderland, 需要先引入主题wonderland.js文件。可以使用自定义主题,地址:https://echarts.baidu.com/theme-builder/
options {} 用户自定义echarts option,具体参考echarts官方文档
data null 异步加载:非必填;本地加载:必填 根据图表类型的不同,会返回不同结构的数据,具体参考各种图的demo(https://gitee.com/mengweijin/mwj-echarts-demo),或者参考ChartData.java的各种实现类。
ajax.url 异步加载:必填;本地加载:非必填 异步加载数据url。如果存在config.ajax.url不为空,则优先从该url异步加载数据,否则从本地data加载数据。
ajax.params {} 请求参数
ajax.type GET ajax请求类型,GET/POST等
ajax.data_key data 请求成功存放数据的集合的变量名
name_key name 数据集对象名称变量名
value_key value 数据集对象名称变量值
使用方式:
let $demo = $("#demo")
    .css("width", width)
    .css("height", height)
    .css("display", "inline-block")
    .css("margin-bottom", "30px")
    .mwjECharts(config);

    // 获取echarts图表对象
    $demo.get(0).chart;
    // 获取base64编码的图片数据
    $demo.get(0).chartImage;

使用说明

1、将本项目使用maven打包成jar,并安装到自己本地的maven仓库或者私服,然后添加到自己的工程里。如下:

<dependency>
    <groupId>com.mwj</groupId>
    <artifactId>mwj-echarts</artifactId>
    <version>1.0</version>
</dependency>

2、在页面按导入相关js文件,mwj-echarts.js放在最后导入,使用方法和webjars相同(mwj-echarts.jar的webjar已经包含jquery, echarts, echarts主题文件,所以可以直接从mwj-echarts.jar的webjar中引入,如果不想使用自带的jquery版本,在maven中排除依赖,然后引入自己的jquery即可,需要注意引入顺序。)。如下:

<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/echarts/dist/echarts.min.js}"></script>
<!-- echarts主题可按需加载,非必须。 -->
<script th:src="@{/webjars/mwj-echarts/theme/wonderland.js}"></script>
<script th:src="@{/webjars/mwj-echarts/mwj-echarts.js}"></script>

3、饼图使用示例,其他图表使用详情参考:mwj-echarts-demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="demo"></div>
    <div id="demoAjax"></div>

    <div th:include="include::footer"></div>

    <script>
        let width = $('body').width()/2-10;
        let height = 430;

        // 本地加载数据方式
        let config = {
            type: "pie",
            title: "本地加载饼图",
            theme: "wonderland",
            options: {},
            data: [
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}],
            name_key: "name",
            value_key: "value"
        };


        let demo = $("#demo")
            .css("width", width)
            .css("height", height)
            .css("display", "inline-block")
            .css("margin-bottom", "30px")
            .mwjECharts(config);

        console.log(demo.get(0).chart);
        console.log(demo.get(0).chartImage);

        // 从服务端异步加载数据方式
        let ajaxConfig = {
            type: "pie",
            title: "异步加载饼图",
            theme: "wonderland",
            options: {},
            data: null,
            ajax: {
                url: "/demo/pieData",
                params: {},
                type: "GET",
                data_key: "data"
            },
            name_key: "name",
            value_key: "value"
        };
        let demoAjax = $("#demoAjax")
            .css("width", width)
            .css("height", height)
            .css("display", "inline-block")
            .css("margin-bottom", "30px")
            .mwjECharts(ajaxConfig);

    </script>
</body>
</html>

参与贡献

  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request

仓库评论 ( 0 )

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

简介

简单封装的jquery百度echarts组件库扩展 展开 收起
JavaScript
MIT
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/mengweijin/mwj-echarts.git
git@gitee.com:mengweijin/mwj-echarts.git
mengweijin
mwj-echarts
mwj-echarts
master

搜索帮助

182229 41614e54 1850385 182230 7885ed45 1850385