echarts-简单使用

最新推荐文章于 2022-10-26 23:37:07 发布
最新推荐文章于 2022-10-26 23:37:07 发布
阅读量724 收藏
点赞数
文章标签： echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_16038125/article/details/72717621
版权

仪表盘

//调用入口
//生成仪表盘
                  gaugParams = {
                         "orgName":orgName,
                         "orgSafeIndex":org_safeIndex
                 };

                 gaugChartsInit(gaugDivId,orgId,gaugParams,"50%","32%","58%");

///////////////////////////////////////////////////////////

function gaugChartsInit(divId, orgId, params, x, y, r) {
    //var counts = getGaugChartData(orgId, action);
    var ybp = [ gaugSeriesItem(x, y, r, params["orgSafeIndex"], 0,
            params["orgName"]) ];
    require.config({
        paths : {
            echarts : './pub/chart/ECharts/echarts'
        }
    });

    require([ 'echarts', 'echarts/chart/gauge' // 加载模块，按需加载
    ], function(ec) {
        var myChart = ec.init(document.getElementById(divId));
        var option = {
            tooltip : {
                formatter : "{c}"
            },
            /*
             * legend: { show:false, orient : 'horizontal', x : 'left',
             * y:'bottom', itemHeight:10, textStyle:{ color: 'blue' },
             * data:['安全','较安全','较重','严重','特别严重'] },
             */toolbox : {
                show : false,
                feature : {
                    mark : {
                        show : true
                    },
                    restore : {
                        show : true
                    },
                    saveAsImage : {
                        show : true
                    }
                }
            },
            series : ybp
        // gaugSeriesItem('10%','50%'),gaugSeriesItem('35%','50%'),gaugSeriesItem('60%','50%'),gaugSeriesItem('85%','50%'),
        // gaugSeriesItem('22.5%','80%'),gaugSeriesItem('47.5%','80%'),
        // gaugSeriesItem('72.5%','80%')
        };
        myChart.setOption(option);
    });

}


function gaugSeriesItem(x, y, r, value, max, orgName) {
    var ybp = {
        // name:orgName,
        type : 'gauge',
        center : [ x, y ],
        radius : r,
        min : 0,
        max : 100,
        precision : 0, // 小数精度，默认为0，无小数点
        splitNumber : 5,
        axisLine : { // 坐标轴线
            lineStyle : { // 属性lineStyle控制线条样式
                width : 10,
                color : [ [ 0.2, '#3FA558' ], [ 0.4, '#1796E7' ],
                        [ 0.6, '#FFDD00' ], [ 0.8, '#FA8C35' ],
                        [ 1, '#FF1717' ] ]
            }
        },
        axisTick : { // 坐标轴小标记
            length : 15, // 属性length控制线长
            lineStyle : { // 属性lineStyle控制线条样式
                color : 'auto'
            }
        },
        axisLabel : { // 坐标轴文本标签，详见axis.axisLabel
            show : true,
            /*
             * formatter: function(v){ return v.toFixed(1); },
             */

            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color : '#333'
            }

        },
        splitLine : { // 分隔线\
            length : 20, // 属性length控制线长
            lineStyle : { // 属性lineStyle（详见lineStyle）控制线条样式
                color : 'auto'
            }
        },
        pointer : {
            length : '80%',
            width : 8,
            color : 'auto'
        },
        title : {
            show : false,
            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                // fontWeight: 'bolder',
                fontSize : 1,
            // fontStyle: 'italic'
            }
        },
        detail : {
            formatter : '{value}',
            textStyle : { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight : 'bolder',
                fontSize : 5
            }
        },
        data : [ {
            value : value,
            name : orgName
        } ]
    };
    return ybp;
}

柱状图

//调用入口
barChartsInit("wlzx_rk_year","index/logistics/getInstorageYearStatusCountList.do",dataName,""); 

/
function barChartsInit(divId, action, dataName, titleText) {
    require.config({
        paths : {
            echarts : './pub/chart/ECharts/echarts'
        }
    });

    require([ 'echarts', 'echarts/chart/bar' // 加载bar模块，按需加载
    ], function(ec) {
        var myChart = ec.init(document.getElementById(divId));
        var counts = getBarChartData(action);
        var option = {
            title : {
                text : titleText,
                // subtext: '纯属虚构'
                textStyle : {
                    fontSize : 16,
                    fontWeight : 'bolder',

                // color: '#000',
                // fontFamily: '微软雅黑,宋体'
                },
                x : 'center',
                y : 'bottom'

            },
            /*color : [ '#228B22', '#00008B', '#FFFF00', '#808080', '#FF0000' ],*/
             color:['green','#FF0000','#FA8C35','blue','#FFDD00',], 
            tooltip : {
                trigger : 'axis'
            },
            toolbox : {
                show : false,
                feature : {
                    mark : {
                        show : false
                    },
                    dataView : {
                        show : true,
                        readOnly : false
                    },
                    magicType : {
                        show : true,
                        type : [ 'line', 'bar' ]
                    },
                    restore : {
                        show : true
                    },
                    saveAsImage : {
                        show : true
                    }
                }
            },
            calculable : true,
            legend : {
                data : [ dataName[0], dataName[1], dataName[2], dataName[3],
                        dataName[4] ]
            },
            xAxis : [ {
                type : 'category',
                data : [ counts[0][0], counts[0][1], counts[0][2],
                        counts[0][3], counts[0][4], counts[0][5], counts[0][6],
                        counts[0][7], counts[0][8], counts[0][9],
                        counts[0][10], counts[0][11], counts[0][12] ]
            } ],
            yAxis : [ {
                type : 'value',
                min : 0,
                max : 30,
                name : '数量',
                // boundaryGap:[0,0],
                boundaryGap : false,
                axisLabel : {
                    formatter : '{value}'
                },
                splitArea : {
                    show : true
                }
            }, {
                type : 'value',
                min : 0,
                max : 30,
                name : '数量',
                boundaryGap : [ 0, 0 ],
                axisLabel : {
                    formatter : '{value}'
                },
                splitArea : {
                    show : true
                }
            } ],
            series : [
                    {
                        name : dataName[0],
                        type : 'bar',
                        data : [ counts[1][0][0], counts[1][1][0],
                                counts[1][2][0], counts[1][3][0],
                                counts[1][4][0], counts[1][5][0],
                                counts[1][6][0], counts[1][7][0],
                                counts[1][8][0], counts[1][9][0],
                                counts[1][10][0], counts[1][11][0],
                                counts[1][12][0] ]
                    },
                    {
                        name : dataName[1],
                        type : 'bar',
                        data : [ counts[1][0][1], counts[1][1][1],
                                counts[1][2][1], counts[1][3][1],
                                counts[1][4][1], counts[1][5][1],
                                counts[1][6][1], counts[1][7][1],
                                counts[1][8][1], counts[1][9][1],
                                counts[1][10][1], counts[1][11][1],
                                counts[1][12][1] ]
                    },
                    {
                        name : dataName[2],
                        type : 'bar',
                        yAxisIndex : 1,
                        data : [ counts[1][0][2], counts[1][1][2],
                                counts[1][2][2], counts[1][3][2],
                                counts[1][4][2], counts[1][5][2],
                                counts[1][6][2], counts[1][7][2],
                                counts[1][8][2], counts[1][9][2],
                                counts[1][10][2], counts[1][11][2],
                                counts[1][12][2] ]
                    },
                    {
                        name : dataName[3],
                        type : 'bar',
                        yAxisIndex : 1,
                        data : [ counts[1][0][3], counts[1][1][3],
                                counts[1][2][3], counts[1][3][3],
                                counts[1][4][3], counts[1][5][3],
                                counts[1][6][3], counts[1][7][3],
                                counts[1][8][3], counts[1][9][3],
                                counts[1][10][3], counts[1][11][3],
                                counts[1][12][3] ]
                    },
                    {
                        name : dataName[4],
                        type : 'bar',
                        yAxisIndex : 1,
                        data : [ counts[1][0][4], counts[1][1][4],
                                counts[1][2][4], counts[1][3][4],
                                counts[1][4][4], counts[1][5][4],
                                counts[1][6][4], counts[1][7][4],
                                counts[1][8][4], counts[1][9][4],
                                counts[1][10][4], counts[1][11][4],
                                counts[1][12][4] ]
                    } ]
        };

        myChart.setOption(option);

    });

}

//获取数据
function getBarChartData(action) {
    var months = [ '', '', '', '', '', '', '', '', '', '', '', '', '' ];

    for ( var i in months) {
        var myMon = new Date().getMonth() + 1;
        var myYear = new Date().getFullYear() - 1;
        myMon = myMon + parseInt(i);
        if (myMon > 12) {
            myMon = myMon - 12;
            myYear++;
        }
        months[i] = new Date(myYear, myMon - 1).format("yyyy-MM");
    }
    var sts = [];
    for (var i = 0; i < 13; i++) {
        sts[i] = [ 0, 0, 0, 0, 0 ];
    }
    var counts = [ months, sts ]; // 存放月份和状态信息

    $.ajax({
        cache:false,
        url : action,
        type : "get",
        async : false,// 同步
        success : function(data) {
            // counts = data.rows;
            var flag = 0;
            for ( var i in data.rows) {
                for ( var j in months) {
                    if (data.rows[i].month == months[j]) {
                        flag = j;// 月份作为下标
                    }
                }
                // $.ligerDialog.error(data.rows[i].zc);
                var k = 0;
                sts[flag][k++] = data.rows[i].zc; // 月(下标1)-状态(下标2)-数量
                sts[flag][k++] = data.rows[i].qs;
                sts[flag][k++] = data.rows[i].gq;
                sts[flag][k++] = data.rows[i].jgq;
                sts[flag][k++] = data.rows[i].wsz;

            }

        },
        error : function() {
            $.ligerDialog.error("ajax请求失败！");
        }
    });
    return counts;
}

饼状图

//调用入口
pieChartsInit("wlzx_rk_month","index/logistics/getInstorageMonthStatusCountList.do","","预警状态",dataName); 

/

function pieChartsInit(divId, action, titleText, seriesName, dataName) {
    require.config({
        paths : {
            echarts : './pub/chart/ECharts/echarts'
        }
    });

    require([ 'echarts', 'echarts/chart/pie' // 使用饼图就加载pie模块，按需加载
    ], function(ec) {
        var myChart = ec.init(document.getElementById(divId));
        var counts = getPieChartData(action);
        var option = {
            title : {
                text : titleText,
                subtext : '',
                x : 'left'
            },

            tooltip : {

            },
            legend : {
                orient : 'vertical',
                x : 'left',
                selectedMode : false,
                data : [ dataName[0], dataName[1], dataName[2], dataName[3],
                        dataName[4] ]
            },
            color : [ '#228B22', '#00008B', '#FFFF00', '#808080', '#FF0000' ],
            toolbox : {
                show : false,
                feature : {
                    mark : {
                        show : false
                    },
                    dataView : {
                        show : true,
                        readOnly : false
                    },
                    restore : {
                        show : true
                    },
                    saveAsImage : {
                        show : true
                    }
                }
            },
            calculable : false,
            series : [ {
                name : seriesName,
                type : 'pie',
                radius : [ 0, '40%' ],
                center : [ '70%', '30%' ],
                selectedMode : 'multiple',
                itemStyle : {
                    normal : {
                        label : {
                            show : true,
                            fontSize : 5
                        },
                        labelLine : {
                            show : true,
                            length : 5
                        }
                    }
                },
                data : [ {
                    value : counts[0],
                    name : dataName[0]
                }, {
                    value : counts[1],
                    name : dataName[1]
                }, {
                    value : counts[2],
                    name : dataName[2]
                }, {
                    value : counts[3],
                    name : dataName[3]
                }, {
                    value : counts[4],
                    name : dataName[4]
                } ]
            } ]
        };

        myChart.setOption(option);

    });
}

//获取数据
function getPieChartData(action) { // action
    var counts = [];
    $.ajax({
        cache: false,
        url : action,
        type : "get",
        async : false,// 同步
        success : function(data) {
            $.each(data.rows, function(i) {
                counts[data.rows[i].status] = data.rows[i].count;
            });
        },
        error : function() {
            $.ligerDialog.error("ajax请求失败！" + action);
        }
    });
    return counts;
}

function pieChartsInit(divId, action, titleText, seriesName, dataName) {
    require.config({
        paths : {
            echarts : './pub/chart/ECharts/echarts'
        }
    });

    require([ 'echarts', 'echarts/chart/pie' // 使用饼图就加载pie模块，按需加载
    ], function(ec) {
        var myChart = ec.init(document.getElementById(divId));
        var counts = getPieChartData(action);
        var option = {
            title : {
                text : titleText,
                subtext : '',
                x : 'left'
            },

            tooltip : {

            },
            legend : {
                orient : 'vertical',
                x : 'left',
                selectedMode : false,
                data : [ dataName[0], dataName[1], dataName[2], dataName[3],
                        dataName[4] ]
            },
            color : [ '#228B22', '#00008B', '#FFFF00', '#808080', '#FF0000' ],
            toolbox : {
                show : false,
                feature : {
                    mark : {
                        show : false
                    },
                    dataView : {
                        show : true,
                        readOnly : false
                    },
                    restore : {
                        show : true
                    },
                    saveAsImage : {
                        show : true
                    }
                }
            },
            calculable : false,
            series : [ {
                name : seriesName,
                type : 'pie',
                radius : [ 0, '40%' ],
                center : [ '70%', '30%' ],
                selectedMode : 'multiple',
                itemStyle : {
                    normal : {
                        label : {
                            show : true,
                            fontSize : 5
                        },
                        labelLine : {
                            show : true,
                            length : 5
                        }
                    }
                },
                data : [ {
                    value : counts[0],
                    name : dataName[0]
                }, {
                    value : counts[1],
                    name : dataName[1]
                }, {
                    value : counts[2],
                    name : dataName[2]
                }, {
                    value : counts[3],
                    name : dataName[3]
                }, {
                    value : counts[4],
                    name : dataName[4]
                } ]
            } ]
        };

        myChart.setOption(option);

    });
}
猿与禅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Echarts处理tooltip数据，比如添加单位%,四舍五入等
weixin_43991257的博客
04-18 1084
var option = { tooltip: { trigger: 'axis', formatter: function (params) { var relVal = params[0].name; for (var i = 0; i < params.length; i++) { //遍历出来的值一般是字符串，需要转换成数字，再
hive级联求和、三大框架的搭建以及echarts的基本使用
Carina_____的博客
12-30 558
hive级联求和 create table t_salary_detail(username string,month string,salary int) row format delimited fields terminated by ‘,’; load data local inpath ‘/export/servers/weblog/accumulate.txt’ into table t_salary_detail; 用户 时间 收到小费金额 A,2015-01,5 A,2015-01,15 B
echart的 formatter不是四舍五入，而是五舍六入，可以自定义四舍五入
qq_41046717的博客
07-15 1770
function chart3() { var obj = {ym: para.date, pid: para.id}; $.ajax({ type: 'post', url: url + '/chart3', data: JSON.stringify(obj), dataType: "json", contentType: "application/json", success: functi.
Spark数据数据存入数据库，前端通过Echarts展示
m0_74067323的博客
10-26 1499
首先通过Spark读取本地的CSV文件，该文件中的内容是由Python爬虫得到 然后对其中相关的数据进行分析，例如电影类型分析、电影导演出现次数前十、电影主演次数出现前十、电影年代分布以及各类型平均票房等。 并将这些分析处理的结果写入到数据库对应的表当中。 对于出现次数需要进行相应的词频统计。 此处以电影类型对应电影出现次数进行举例，以下是存入数据库的数据。 然后我们通过后端去读取该表的数据，首先创建一个实体类Genres。 接着我们在mapper层创建GenreM
Echarts pie 饼图踩坑详细配置
时光足迹
08-26 5857
Echarts | pie 饼图踩坑配置：[https://juejin.cn/post/7000547459210412040](Echarts | pie 饼图踩坑配置) Echarts 图标样式个性化设置，如饼图空白间距，图例自定义，图例显示百分比，提示框自定义，百分比和标签同时存在等等，解决折磨人的细节样式问题。 环形饼图 官网环形饼图示例：https://echarts.apache.org/examples/zh/editor.html?c=pie-doughnut legend 图例位置
[数据可视化] 饼图(Pie Chart)
Hudas的博客
08-19 7198
本文主要讲解饼图
echarts-liquidfill-master2.0.4.zip
05-15
水球图是一种适合于展现单个百分比数据的图表类型，ECharts 的水球图插件使你能够通过非常简单的配置，实现酷炫的数据展示效果。
echarts结合echarts-gl实现3D飞线地球可视化
08-05
echarts结合echarts-gl实现3D飞线地球可视化，这里提供一个简单案例的实现方式，访问页面需要通过类似vscode插件之Live Server等服务器的方式打开
ECharts-GL 3D可视化库-其他
06-12
ECharts-GL是Apache ECharts（正在孵化）的扩展包，它提供...这个功能比较简单但是非常实用，能够配置地球的底图纹理图片，使得展现更有质感，以后也会在 ECharts 的 map 中加入。下面截图是将地图换成木星纹理的效果。
echarts+echarts-gl实现带有散点、路径的3d地球
07-22
该资源主要是使用echarts+echarts-gl实现带有散点、路径的3d地球的简单示例代码 效果可见本人的一篇文章 https://blog.csdn.net/weixin_45669156/article/details/125932601?spm=1001.2014.3001.5502 文章提到的...
apache-echarts-5.3.3下载资源
09-23
2022年8月最新版，apache-echarts-5.3.3-src、echarts.min最新、echarts-4.5.0
hbase数据可视化系统
07-14
springboot搭建的hbase可视化界面 支持hbase的建表与删除 支持根据rowkey查询数据
Hadoop+hive+flask+echarts大数据可视化之系统数据收集
play_big_knife的博客
07-15 2444
涉及到Hadoop分布式存储数据，将数据导入到Hive数据仓库，使用flask连接hive数据库并返回前端接口数据，前端使用echarts对数据分析结果展示，是大数据可视化的综合项目。
Google pieCharts的学习
weixin_30906701的博客
07-07 1595
在公司项目开发过程中, 尤其是在网站的开发过程中，用到很多的前端的插件,在这里, 我简单介绍下近期Google pieCharts的是使用方法 https://developers.google.com/chart/interactive/docs/gallery/piechart （需要FQ才能打开） 我的代码如下: <script type="text/javascript...
Pie Chart 学习例子
wdt3385的专栏
08-21 2752
1 Side Labelled Pie Chart class pietests(_DrawingEditorMixin,Drawing): def __init__(self,width=400,height=200,*args,**kw): Drawing.__init__(self,width,height,*args,**kw) self._
echarts+ajax+restful实现图表(bar/line)
u012514278的博客
08-17 871
先看效果图： ajax通过restful的服务来交互数据，相关restful的开发，请参考本博客：http://blog.csdn.net/bdchome/article/details/45937751 基本的js引用: 1 2 3 pre name="code" class="javascript">script 
基于restful 风格的Echart图标系统
杨宇
04-09 635
第一步导入相应的架包  基于maven 的情况下基于Spring+mybatis+Ecahrt    org.springframework spring-webmvc 4.3.2.RELEASE org.springframework spring-jdbc 4.3.2.RELEASE org.springframework spring-
Python读取Hbase静态数据并绘制多个Echarts图
ECNU_sei_mfj的博客
01-09 349
from pyecharts import Bar, Line, Scatter, EffectScatter, Grid, Pie import happybase import pyecharts #bytes.decode('utf-8') #from pyecharts.charts import Bar from pyecharts import Bar conn=happybase.Connection("localhost",9090) table=conn.table("gdp1") r.
echarts-wordcloud使用举例
最新发布
05-16
下面我给出一个简单的使用示例： 1. 引入 echarts 和 echarts-wordcloud 库 ```html <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"> <script src="https://cdn.jsdelivr.net/npm/...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

猿与禅

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值