dhm-echarts图表架构与说明书

最新推荐文章于 2024-07-14 02:35:36 发布
置顶 最新推荐文章于 2024-07-14 02:35:36 发布
阅读量3k 收藏 1
点赞数 1
文章标签： echarts echarts-java echarts3-0 echarts动态获取数据 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_15906013/article/details/73467580
版权

dhm-echarts

    echarts3图表封装，前台ajax通过自定义div属性实现传值，后台通过各种数据适配器自动组装达到图表封装，以实现echarts图表展示,也可以自定义适配器。以及分析预测echarts图表拟合曲线算法。

项目地址：https://git.oschina.net/duhongming/dhm-echarts

项目交流QQ群：551709145 验证码：码云

目录

1 Maven项目说明

2 dhm-echarts-web项目

3 dhm-echarts-core项目

4 dhm-echarts-calculate项目

5 dhm-echarts-bean项目

6 highcharts3D项目

附录

1 Maven项目说明

  • dhm-echarts-bean：echarts图表的所有Option对象的JavaBean封装，以及针对highcharts的3D柱状图和3D饼状图的JavaBean封装

  • dhm-echarts-calculate：echarts图表拟合曲线算法：多项式回归方程（通过散点拟合最优方程）、余弦相似度（曲线相似度）等算法

  • dhm-echarts-core：echarts图表基本图表配置、数据适配器、图表配置、点击事件数据结构封装

  • dhm-echarts-web：图表演示页面 http://localhost:8080/dhm-echarts-web/echarts/demo

    新版测试地址：http://localhost:8080/dhm-echarts-web/

  • dhm-echarts-springboot：图表演示页面和（dhm-echarts-web）两种展示风格

  • dhm-echarts架构图：
    alt text

1.1 web项目部署（echarts min 部署）

<!-- 必要文件：引入jquery -->
<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
<!-- ECharts必要文件 -->
<script src="${ctxStatic}/echarts/echarts.min.js"></script>
<!-- 引入 ECharts ajax自定义封装 -->
<script src="${ctxStatic}/echarts/echarts.ajax.js"></script>
<!-- 引入 ECharts css样式封装 -->
<style type="text/css">
.echarts {
    height: 360px;
    width: 740px;
    overflow: hidden;
    padding : 10px;
    margin-bottom: 10px;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>

1.2 web项目部署（echarts all 部署）

<!-- 必要文件：引入jquery -->
<script src="${ctxStatic}/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>

<!-- 动态图表文件：sockjs必须要放在echarts.min.js上面、jquery-1.8.3.min.js下面,防止JS冲突 -->
<script src="${ctxStatic}/sockjs/sockjs-1.1.1.min.js" type="text/javascript"></script>

<!-- ECharts必要文件 -->
<script src="${ctxStatic}/echarts/echarts.min.js"></script>
<!-- ECharts统计分析 -->
<script src="${ctxStatic}/echarts/ecStat.min.js"></script>
<!-- ECharts注水图 -->
<script src="${ctxStatic}/echarts/echarts-liquidfill.min.js"></script>
<!-- 引入 ECharts 主题 -->
<script src="${ctxStatic}/echarts/theme/dark.js"></script>
<script src="${ctxStatic}/echarts/theme/infographic.js"></script>
<script src="${ctxStatic}/echarts/theme/macarons.js"></script>
<script src="${ctxStatic}/echarts/theme/roma.js"></script>
<script src="${ctxStatic}/echarts/theme/shine.js"></script>
<script src="${ctxStatic}/echarts/theme/vintage.js"></script>
<!-- 引入 ECharts 地图 -->
<script src="${ctxStatic}/echarts/map/china.js"></script>
<!-- 引入 ECharts ajax自定义封装 -->
<script src="${ctxStatic}/echarts/echarts.ajax.js"></script>

<!-- 弹出dialog -->
<link rel="stylesheet" type="text/css" href="${ctxStatic}/layui/build/css/codeshow.css">
<link href="${ctxStatic}/jquery-jbox/2.3/Skins/Bootstrap/jbox.min.css" rel="stylesheet" />
<script src="${ctxStatic}/jquery-jbox/2.3/jquery.jBox-2.3.min.js" type="text/javascript"></script>

<!-- 引入 ECharts css样式封装 -->
<style type="text/css">
.echarts {
    height: 360px;
    width: 740px;
    overflow: hidden;
    padding : 10px;
    margin-bottom: 10px;
    border: 1px solid #e3e3e3;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
</style>

1.3 web项目部署（3D 图表 部署）

<!-- HighCharts单文件引入 -->
<script src="${ctxStatic}/highcharts/code/highcharts.js"></script>
<script src="${ctxStatic}/highcharts/code/highcharts-3d.js"></script>
<!-- HighCharts导出引入 -->
<script src="${ctxStatic}/highcharts/code/modules/exporting.js"></script>
<!-- HighCharts导出工具类 -->
<script src="${ctxStatic}/export-csv/export-csv.js"></script>
<!-- HighCharts工具类 highchartTable单文件引入 -->
<script src="${ctxStatic}/jquery-highchartTable-plugin/jquery.highchartTable.js"></script>
<!-- HighCharts汉化工具类（放到最后进行汉化） -->
<script src="${ctxStatic}/highcharts-zh_CN/highcharts-lang-zh_CN.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/grid-light.js"></script>
<!-- HighCharts主题
<script src="${ctxStatic}/highcharts/code/themes/dark-green.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/dark-blue.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/dark-unica.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/gray.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/grid.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/sand-signika.js"></script>
<script src="${ctxStatic}/highcharts/code/themes/skies.js"></script>-->

1.4 Maven的POM引用

<!-- echarts图表java封装 -->
<dependency>
    <groupId>com.duhongming</groupId>
    <artifactId>dhm-echarts-core</artifactId>
    <version>3.0.0.2</version>
</dependency>
<!-- java封装计算算法 -->
<dependency>
    <groupId>com.duhongming</groupId>
    <artifactId>dhm-echarts-calculate</artifactId>
    <version>3.0.0.2</version>
</dependency>

<!-- spring websocket-->
<dependency>  
    <groupId>org.springframework</groupId>  
    <artifactId>spring-websocket</artifactId>  
    <version>${spring.version}</version>  
</dependency>  
<dependency>  
    <groupId>org.springframework</groupId>  
    <artifactId>spring-messaging</artifactId>  
    <version>${spring.version}</version>  
</dependency>

<!-- 由于Spring是采用对JSON进行了封装的jackson来生成JSON和返回给客户端 开始-->
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.4.4</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.4.4</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-annotations</artifactId>
    <version>2.4.4</version>
</dependency>
<!-- 由于Spring是采用对JSON进行了封装的jackson来生成JSON和返回给客户端  结束-->

2 dhm-echarts-web项目

2.1 页面图表div设置说明

        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
        <div id="demo-line" style="float:left" class="echarts"
            echarts-type="line"
            echarts-title="未来一周气温变化"
            echarts-link="https://www.baidu.com/"
            echarts-subtitle="折线图"
            echarts-sublink="https://www.baidu.com/"
            echarts-theme="macarons"
            echarts-toolbox="true"
            echarts-datazoom="true"
            echarts-markpoint="true"
            echarts-markline="true"
            echarts-x-axis-name="日期(星期)"
            echarts-y-axis-name="最高温度(°C),最低温度(°C)"
            echarts-url="${contextPath}/echarts/line"
        ></div>
div属性默认值说明
Html属性：id无id必须唯一
Html属性：classecharts必须是echarts
Echarts基础属性： echarts-typelineline：折线图
bar：柱状图
pie：饼状图

rose：玫瑰图
funnel：漏斗图
radar：雷达图
scatter：散点图
gauge：仪表盘
liquidfill：注水图
map：地图
calendar：日历图

pie3d：3D饼状图
bar3d：3D柱状图

multidata-scatter：多维数据散点图
multidata-heatmap:多维数据热力图
Echarts基础属性： echarts-title图表标题图表标题
Echarts基础属性： echarts-link无图表标题链接
Echarts基础属性： echarts-subtitle图表副标题图表副标题
Echarts基础属性： echarts-sublink无图表副标题链接
Echarts基础属性： echarts-theme无macarons/dark/infographic/roma/shine/vintage
Echarts组件：echarts-toolboxfalse是否需要工具栏
Echarts组件：echarts-datazoomfalse是否需要数据域
Echarts组件：echarts-stackfalse是否需要柱状堆积图
Echarts组件：echarts-markpointfalse是否需要标记点
Echarts组件：echarts-marklinefalse是否需要标记线
Echarts坐标轴：echarts-x-axis-name无X轴单位，eg: 日期(星期)
Echarts坐标轴：echarts-split-number5坐标轴的分割段数
Echarts坐标轴：echarts-min-interval0.0坐标轴最小间隔大小
Echarts坐标轴：echarts-y-axis-name无Y轴单位(两个Y轴单位，中间用逗号分隔)
eg: 最高温度(°C),最低温度(°C)
Echarts跳转：echarts-url无后台SpringMVC控制器，通过@RequestBody获取数据
Echarts跳转：echarts-socket为空或没有则不是动态图表后台是Spring Socket控制器，通过TextMessage传递数据
Echarts跳转：echarts-onclick-id图表点击事件关联a标签id
其他：echarts-regression散点图必要参数，否则不必要只有echarts-type=scatter echarts-regression才有意义。
linear：线性回归拟合
exponential：指数回归拟合
logarithmic：对数回归拟合
olynomial：多项式回归拟合
其他：echarts-measure-range量程只有echarts-type=gauge才有意义
其他：echarts-axis-label-show是否显示刻度只有echarts-type=gauge才有意义

2.2 Controller控制器中EchartsCore

1）创建EchartsCore对象，加载前台页面的属性参数，通过getBaseGsonOption获取gsonOption图表的基本配置都已经setter完成

/**
 * 折线图
 * @param echartsConfig
 * @return
 */
@RequestMapping(value="line")
public @ResponseBody String line(@RequestBody EchartsConfig echartsConfig){
    System.out.println("测试传入参数："+echartsConfig.getParameters());
    return EchartsCore.getInstance().adapterLineAndBar(echartsConfig,dataService.getWeatherData()).toString();
}

2）gsonOption可以进行自定义配置

        //自定义配置
        gsonOption.title().x(X.center);
        gsonOption.legend().left(X.left).orient(Orient.vertical);

3）通过adapterLineAndBar将数据setter进gsonOption，然后return gsonOption.toString()通过@ResponseBody返回到页面ajax中

4）gsonOption可以不使用适配器，gsonOption中的series对象完成图表的显示

2.3 页面ajax获取表单中的数据

1）有一个包裹form的标签，传递的button按钮即可

    <form>      
        <input name="dateStr" value="日期"/>
        <input name="temperatureStr" value="温度"/>
    </form>
    <button id="submitButton">测试传入参数</button>

2）刷新指定图表

    $("#submitButton").click(function(){
        $("#demo-line").dblclick();
    });
    #注意:dblclick()要替换成contextmenu(),因为我能通过js控制鼠标不能右击，而通过js控制图表右击点击事件，只有这一个通道供echarts使用。

3）后台获取该图表的数据，已经保存在echartsConfig中

    System.out.println("测试传入参数："+echartsConfig.getParameters());

2.4 给图表添加点击事件

1）准备一个a html标签

    <a id="demo-bar-onclick" href="${contextPath}/echarts/onclick"></a>

2）通过在div属性echarts-onclick-id关联a标签

    <div id="demo-bar" style="float:left" class="echarts"
    …..
    echarts-onclick-id="demo-bar-onclick"
    ></div>

3）当target=\”_jbox\”会弹出对话框

对话框宽度：jbox-width="1200"
对话框高度：jobx-height="400"
对话框标题：jbox-title="跳转dialog对话框-{seriesName}-{name}"，其中{seriesName}是点击图表所在的legend名称，{name}是点击图表所在的x轴的名称。

4） 后台取值

/**
 * 获取参数到前台显示
 * 也可以通过制定控制器去请求其他图表的URL
 * @param echartsOnClick
 * @return
 */
@RequestMapping(value="onclick")
public String onclick(EchartsOnClick echartsOnClick,ModelMap modelMap){
    modelMap.put("echartsOnClick",echartsOnClick);
    return "onclick";
}

2.5 整体图表Echarts背景水印

修改echarts.ajax.js中的var waterMarkText = 'Echarts' 即可，为空则没有背景水印。

3 dhm-echarts-core项目

3.1 echartsCore中调用的适配器

    所模拟的数据都可以通过Mybatis、Hibernate、Spring JDBC、Spring JPA
    生成多行的二维表格式：
            List<Map<String,Object>>
            List<T>
            List<Object[]>
    生成单行的二维表格式：Map<String,Object>
适配器适配器方法适配器数据类型适配器说明
EchartsLineAndBarAdapteradapterLineAndBarList<Map<String,Object>>折线图和柱状图
EchartsPieAdapteradapterPieMap<String,Object>饼状图
EchartsDoubleNumLineAdapteradapterDoubleNumLineMap<String,List<T>>双数值折线图
EchartsReverseBarAdapteradapterReverseBarList<Map<String,Object>>反转柱状图
EchartsRadarAdapteradapterRadarList<Map<String,Object>>雷达图
EchartsMapAdapteradapterMapMap<String,Map<String,Double>>地图
EchartsScatterAdapterlinear:线性回归
exponential:指数回归

logarithmic:对数回归
polynomial:多项式回归		Object[][]散点图
动态仪表(无适配器，只需要数据类型)Socket协议Double动态仪表
动态注水图(无适配器，只需要数据类型)Socket协议Double动态注水图
日历图(无适配器，只需要数据类型)calendar：日历图List<Map<String,Object>>日历图
多维数据(无适配器，只需要数据类型)multidata-scatter：多维数据散点图
multidata-heatmap:多维数据热力图		new EchartsHeatMap(list);多维数据

3.2 adapterLineAndBar、adapterReverseBar适配器数据类型

1）数据库结构

 列1列2列3列n
 x:日期y0:最高气温y1:最低气温…
行1周一1111…
行2周二2222…
行n…………

2）说明
相当于二维数据表数据，x:代表X轴的数据，y0:代表Y轴左面的数据，y1:代表Y轴右面的数据

3）通过数据库sql语句到List

<div echarts-socket="<%=basePath%>/webSocket/line/data">/</div>即可

6）折线图条形图混合图

    //指定每条曲线的类型
    gsonOption.series().get(0).type(SeriesType.line);
    gsonOption.series().get(1).type(SeriesType.bar);

3.3 adapterPie适配器数据类型

Map<String,Object> key-value这个是最简单的，怎么都能实现

3.4 adapterDoubleNumLine适配器数据类型

1）数据结构

Map<String,List<Map<String,Object>>>
Map<String,List<T>>
Map<String,List<Object[]>>

Map中的泛型中的String是每条曲线的名称即legend,即每条曲线的名字

所模拟的数据都可以通过Mybatis、Hibernate、Spring JDBC、Spring JPA
生成多行的二维表格式,如以下三种，其实他们三个是同一个，可互相转换，通过一个适配器完成三种泛型的适配：
        List<Map<String,Object>>（sql只需要两个列，第一列必须是x轴数据，第二列必须是y轴数据）
        List<T>（注意该JavaBean，成员变量第一个必须是x轴数据，第二个必须是y轴数据）
        List<Object[]>（echarts所需数据类型，可以通过上述两个转化成，而上述两个就是jdbc的通用数据类型）

2）代码实现

    EchartsCore.getInstance().adapterDoubleNumLine(echartsConfig,Map<String,List<T>>).toString()

3.5 adapterRadar适配器数据类型

1）数据结构

 列1列2列3列4列n
 x:namey:预算分配（Allocated Budget）y:实际开销（Actual Spending）x:max…
行1销售（sales）430050006500…
行2管理（Administration）100001400016000…
行3信息技术（Information Techology）280002800030000…
行n……………

2）说明

相当于二维数据表数据，x:name代表雷达图中的每一极，x:max 代表雷达图每一极的最大值，
y:预算分配（Allocated Budget）代表所有极组的名称，
y:实际开销（Actual Spending）代表另一所有极组的名称；

3）通过数据库sql语句到List

3.6 adapterMap适配器数据类型

1）数据结构

--|类别Map<String,XXX >
  --|地名：指标Map<XXX,Map<String,Double>>
Map<String,Map<String,Double>>

    {"iphone3":
    {"北京":609.0,"重庆":99.0,"新疆":183.0,"广东":830.0,"天津":883.0,"浙江":335.0,"澳门":541.0,"广西":287.0,"内蒙古":728.0,"宁夏":704.0,"江西":877.0,"台湾":724.0,"贵州":206.0,"安徽":882.0,"陕西":151.0,"辽宁":126.0,"山西":594.0,"青海":184.0,"香港":243.0,"四川":798.0,"江苏":100.0,"河北":191.0,"西藏":210.0,"福建":516.0,"吉林":975.0,"海南":994.0,"云南":155.0,"上海":690.0,"湖北":255.0,"湖南":120.0,"甘肃":471.0,"山东":398.0,"河南":937.0,"黑龙江":467.0},
    "iphone4":
    {"北京":949.0,"重庆":809.0,"新疆":1.0,"香港":856.0,"四川":526.0,"广东":658.0,"天津":6.0,"浙江":754.0,"河北":803.0,"澳门":649.0,"西藏":629.0,"福建":746.0,"内蒙古":684.0,"吉林":876.0,"上海":213.0,"宁夏":337.0,"江西":324.0,"安徽":481.0,"山西":361.0},
    "iphone5":
    {"上海":672.0,"北京":423.0,"香港":376.0,"台湾":45.0,"广东":463.0,"天津":742.0,"澳门":375.0}}

3.7 散点图适配器数据类型

Double data[][] = new Double[][]{{96.24, 11.35},{33.09, 85.11},{57.60, 36.61},{36.77, 27.26},{20.10, 6.72},{45.53, 36.37},  {110.07, 80.13},{72.05, 20.88},{39.82, 37.15},{48.05, 70.50},{0.85, 2.57},{51.66, 63.70}, {61.07, 127.13},{64.54, 33.59},{35.50, 25.01},{226.55, 664.02},{188.60, 175.31},{81.31, 108.68}};
二维数组中第一个是x轴数据，第二个是y轴数据，所以该二维数组就是一堆离散的点

3.8 日历图适配器数据类型

1）数据库结构

 列1列2列3列n
 echartsDate工作睡觉娱乐
行12017-05-011086
行22017-05-028106
行n…………

2）说明
相当于二维数据表数据，echartsDate 代表日历的数据，工作、睡觉、娱乐数据类别

3）通过数据库sql语句到List<Map<String,Object>>应该非常简单我就不具体说明了

3.9 多维数据适配器数据类型

1）数据库结构

 列1列2列3
 xyz
行12017-06-19工作票00
行22017-06-20工作票10
行32017-06-20操作票11
行42017-06-21操作票21

2）调用EchartsHeatMap

EchartsHeatMap echartsHeatMap = new EchartsHeatMap(list);

4 dhm-echarts-calculate项目

计算拟合曲线算法，通过多项式回归分析，找出R^2最优的表达式拟合曲线；

4.1 放入观测值

#Double data[][]中的数组分别代表{x,y}
Double data[][] = new Double[][]{{4d,38.8},{5d,129.6},{6d,259.9},{7d,447.1},{8d,702.5},{9d,1015.2},{10d,1346.5},{11d,1665.1},{12d,1927.8},{12.4,2000d},{13d,2000d},{14d,2000d},{15d,2000d},{16d,2000d},{17d,2000d},{18d,2000d},{19d,2000d},{20d,2000d},{21d,2000d},{22d,2000d},{23d,2000d},{24d,2000d},{25d,2000d}};

4.2 拟合度最好的即R^2最接近1的曲线

String expression = new PolynomialCurveCore().polynomialCurveExpresionAll(data);

4.3准备观测值X轴数据重新拟合下看看

Double d[] = new Double[data.length];

4.4重新生成通过拟合方程计算的Y轴的值

Double newData[][] = FelCore.getResult(expression,d)

5 dhm-echarts-bean项目

我是fork GitHub上的一位同仁的代码：
https://git.oschina.net/free/ECharts

eg:
alt text

6 highcharts3D项目

1.引入JS

        <!-- HighCharts单文件引入 -->
        <script src="${ctxStatic}/highcharts/code/highcharts.js"></script>
        <script src="${ctxStatic}/highcharts/code/highcharts-3d.js"></script>
        <!-- HighCharts汉化工具类（放到最后进行汉化） -->
        <script src="${ctxStatic}/highcharts-zh_CN/highcharts-lang-zh_CN.js"></script>

2.div标签只需bar或者pie后面加上3d

        <!-- 为 HighCharts 准备一个具备大小（宽高）的 DOM -->
        <div id="demo-bar3d" style="float:left" class="echarts"
            echarts-type="bar3d"
            echarts-title="未来一周气温变化"
            echarts-subtitle="条形图"
            echarts-theme="macarons"
            echarts-toolbox="false"
            echarts-datazoom="false"
            echarts-x-axis-name="日期(星期)"
            echarts-y-axis-name="温度(°C)"
            echarts-url="${contextPath}/highcharts/bar3d"
        ></div>
        <!-- 为 HighCharts 准备一个具备大小（宽高）的 DOM -->
        <div id="demo-pie3d" style="float:left" class="echarts"
            echarts-type="pie3d"
            echarts-title="搜索引擎现状"
            echarts-subtitle="饼状图"
            echarts-theme="macarons"
            echarts-url="${contextPath}/highcharts/pie3d"
        ></div>

3.后台解析

    /**
     * 3D条形图
     * @param echartsConfig
     * @return
     */
    @RequestMapping(value="bar3d")
    public @ResponseBody String bar3d(@RequestBody EchartsConfig echartsConfig){
        //配置
        HighChartsCore highChartsCore = HighChartsCore.getInstance();
        GsonOption gsonOption = highChartsCore.getBaseGsonOption(echartsConfig);
        gsonOption = highChartsCore.adapterBar3D(echartsConfig, gsonOption, getBarData());
        System.out.println("测试传入参数："+echartsConfig.getParameters());
        return gsonOption.toString();
    }

    /**
     * 3D饼状图
     * @param echartsConfig
     * @return
     */
    @RequestMapping(value="pie3d")
    public @ResponseBody String pie3d(@RequestBody EchartsConfig echartsConfig){
        //配置
        HighChartsCore highChartsCore = HighChartsCore.getInstance();
        GsonOption gsonOption = highChartsCore.getBaseGsonOption(echartsConfig);
        gsonOption = highChartsCore.adapterPie3D(echartsConfig, gsonOption, getPieData());
        return gsonOption.toString();
    }

eg:
alt text

附录

附Echarts项目

0）echarts

https://github.com/ecomfe/echarts

history：echarts.min3.5.4.js

now：echarts.min3.7.2.js

1）echarts统计插件

https://github.com/ecomfe/echarts-stat

2）echarts注水图插件

https://github.com/ecomfe/echarts-liquidfill

3）echarts字符云插件

https://github.com/ecomfe/echarts-wordcloud

附Highcharts插件

0） highcharts

https://github.com/highcharts/highcharts

1） highcharts导出CSV插件

https://github.com/highcharts/export-csv

2） highcharts汉化插件

https://github.com/hcharts/highcharts-zh_CN

3） highcharts表格插件

https://github.com/highchartTable/jquery-highchartTable-plugin

附Vis插件

http://visjs.org/#download_install

https://github.com/almende/vis

附Socket插件

1）sockjs-client（SpringMVC）

https://github.com/sockjs/sockjs-client

2）stomp-websocket（SpringBoot）

https://github.com/jmesnil/stomp-websocket

附UI页面

1）layui

https://github.com/sentsin/layui/

https://github.com/dabeng/OrgChart

https://sbstjn.com/timesheet.js/
https://github.com/sbstjn/timesheet.js

阿杜杜不是阿木木
关注
专栏目录
目标检测YOLO实战应用案例100讲-基于深度学习的无人机影像小目标识别（续）
qq_36130719的博客
07-08 153
在深度学习的整个训练与计算中，存在着大量的矩阵操作。常规CPU的优势是串行运 算，故GPU是大规模矩阵操作的首选。目前主流的算法都是利用GPU的强大并行运算能力， 对深度学习模型进行训练。表3-2显示了本实验的软件和硬件配置，CUDA是由NVIDIA开发的集成计算平台，它 可以加快对深度学习中的卷积等方面的矩阵操作。在Pytorch神经网络框架下进行训练和预 测时，CUDANN能够利用CUDA+ CUDANN来调用GPU加快模型的训练和预测，提升用户 体验。
Django框架 - 19 Django框架总结
韩波的博客
09-09 763
Django框架总结 Web应用 问题1：描述一个Web应用的工作流程。（如上图所示） 问题2：描述项目的物理架构。（上图中补充反向代理服务器、负载均衡服务器、数据库服务器、文件服务器、缓存服务器、防火墙等，每个节点都有可能是多节点构成的集群） 问题3：描述Django项目的工作流程。（如下图所示） MVC架构模式 问题1：为什么要使用MVC架构模式？（模型和视图解耦合...
scatter ajax,dhm-echarts: echarts3图表封装，前台ajax通过自定义div属性实现传值，后台通过各种数据适配器自动组装达到图表封装，以实现echarts图表展示,也可以...
weixin_30253771的博客
08-06 345
dhm-echartsecharts3图表封装，前台ajax通过自定义div属性实现传值，后台通过各种数据适配器自动组装达到图表封装，以实现echarts图表展示,也可以自定义适配器。以及分析预测echarts图表拟合曲线算法。项目交流QQ群：551709145 验证码：码云1 Maven项目说明1. dhm-echarts-bean：echarts图表的所有Option对象的JavaBean封装...
echarts中国地图如何标记散点图_echarts地图标记点
最新发布
2401_84435192的博客
07-14 400
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它。
32Echarts - 柱状图（Bar Label Rotation）
阿甘兄
04-30 3249
效果图 源代码 var posList = [ 'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'i...
echarts地图带散点标记
weixin_57889610的博客
01-12 1469
series中添加一个type:为 effectScatter 的图表 通过zlevel设置层级 层级大的会在层级小的上面。要进行散点图option中必须要加上geo项 geo map要使用导出的json。1、绘制河南地图 在DATA V里找到河南的位置信息。效果 brushType: "stroke",效果 brushType: "fill",然后添加三点标记 以标记郑州为例。然后在页面引用 代码如下。就得到了一个河南地图。
如何在echarts生成得到地图上添加标记
m0_66722601的博客
05-22 4760
我console.log(markImg)后,在控制台输出,显然图片已经转成了base64格式了。在echarts生成的图形上如果利用本地的图片达到标记的效果。1.首先我们可以在全局先把这个图片引进来。2.在我们的那个生成图形的方法里面可以这样。3.在需要配置的地方。
ECharts：快速构建Web可视化图表的声明式框架
视觉信息学2（2018）136ECharts：一个快速构建基于Web的可视化图表的声明式框架李德清a，梅红辉b，沈毅a，苏爽a，张文丽a，王俊廷a，明祖a，魏晨b，*a百度公司，中国b浙江大学CAD CG国家重点实验室ar t i cl e i nf ...
基于backtrader和miniQMT的量化交易系统设计与实现
曲折旅程，艰难人生
04-18 1477
个人量化炒股实践笔记，从小白到上路。本文在大量阅读各种backtrader文档基础提炼出了一套自己的交易模型。
2021-02-26~27~28 大数据课程笔记 day37day38day39
qq_44745905的博客
02-28 3562
@R星校长 音乐数据中心平台 1.1 数据库与ER建模 1.1.1 数据库（DataBase） 数据库是按照数据结构来组织、存储和管理数据的仓库，是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。 数据库是以一定方式储存在一起、能与多个用户共享、具有尽可能小的冗余度、与应用程序彼此独立的数据集合，可视为电子化的文件柜，存储电子文件的处所，用户可以对文件中的数据进行新增、查询、更新、删除等操作，数据组织主要是面向事务处理任务。 1.1.2 数据库三范式 关系型数据库设计时，遵照一定的.
html5+ECharts企业内部组织结构图代码
06-11
html5+ECharts绘制的一款企业内部组织结构图代码，集团公司组织架构图。支持画辅助线、保存为图片等功能。
echarts简单的前后台交互显示
03-21
SSM-Echarts-Maven 简单的前后台交互.后台数据是固定的.
echarts 框架原理
weixin_45677987的博客
03-04 7692
1： echarts 框架原理： 数据可视化框架原理： 1.1： ECharts 是一个轻量级的 javascript 图形库， 纯 js 实现， mvc 框架，数据驱动。 1.2：Svg 和 Canvas 是两个可以选择的类库之一，其中 svg 交互性更好，性能较弱，不适用于移动端，在绘制数万个点时会崩溃。而 canvas 的渲染速度和性能更好，echarts 在 canvas 上构建一层 MVC层，使得它可以像 svg 一样交互。 1.3：ECharts 的特点：重要性和优先级依次递减...
使用Echarts在地图上实现Marker标注
一只想躺平却不敢躺平的小菜鸟
06-21 5330
使用Echarts在地图上实现Marker标注
Echarts做地图，将每个省的数据标记在地图上，根据数据的大小做散点方大效果，并筛选前五个最大省份进行展示（经常有这种需求，看自己的代码跟屎一样，本文只做记录，）
沧笙踏歌的博客
12-26 6460
效果 js代码 function loadMap() { // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('mapChart')); var nameColor = " rgb(55, 75, 113)" var name_fontFamily = '宋体' var name_fontSize = 35 var mapName = 'china'
vue + echars地图 省市区 + 添加点标记
weixin_42367288的博客
10-11 3432
echars地图 定义地图位置大小 <div id="mapChart" class="mapChart"></div> #mapChart { width: 1000px; height: 600px; } 安装echars,配置地图, 定义三组数据,用于echars地图的展示省市区 var provinces = ['310000', '130000', '140000', '150000', '210000', '220000', '23000
ASP.NET Core 使用SignalR后台实时推送数据给Echarts展示图表
5653325的专栏
07-23 1839
ASP.NET Core SignalR 是一种开放源代码库，可简化将实时 web 功能添加到应用程序的功能。 实时 web 功能使服务器端代码可以立即将内容推送到客户端。
Echarts 3D地图 标记实现
yuhaiyang11的博客
03-11 1396
Echarts 3D地图及标记点实现
wx-echarts 下拉时图表无法下拉
08-09
wx-echarts 是一款基于微信小程序开发的图表插件，它可以实现在小程序中展示丰富的图表数据。根据您的描述，如果在使用 wx-echarts 插件时，下拉操作无法使图表下拉，可能有以下几个原因和解决方法： 1. 插件版本过...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值