jquery实现柱形图、饼图等

主要借助 百度开发的开源的echarts.js插件,挺好用的。(自行查看官网)

https://www.echartsjs.com/examples/zh/index.html#chart-type-bar

在官网实例上部分没有在对应的图形上面显示数据,所以记录下:

主要是添加label来实现在图形上显示对于的数据
饼图显示数据:
option1 = {
            title: {
                text: ‘学历统计‘,
                subtext: ‘‘,
                x: ‘center‘
            },
            tooltip: {
                trigger: ‘item‘,
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: ‘vertical‘,
                left: ‘left‘,
                data: []
            },
            series: [
                {
                    name: ‘‘,
                    type: ‘pie‘,
                    radius: ‘55%‘,
                    center: [‘50%‘, ‘60%‘],
                    label: {//在圆内显示具体数据数字
                        normal: {
                            formatter: ‘{b}:{d}%‘,
                            position: ‘inside‘
                        }
                    },
                    data: [],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: ‘rgba(0, 0, 0, 0.5)‘
                        }
                    }
                }
            ]
        };

柱形图:

  option = {
            title: {
                text: ‘人数统计‘
            },
            color: [‘#749f83‘],
            tooltip: {},
            legend: {
                data: [‘人数‘]
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: ‘人数‘,
                type: ‘bar‘,
                label: {
                    normal: {
                        position: ‘top‘,
                        show: true
                    }
                },
                data: []
            }]
        };

原文地址:https://www.cnblogs.com/-lin/p/11718833.html

时间: 2024-08-30 11:09:35

jquery实现柱形图、饼图等的相关文章

highcharts 柱形图 饼图 加URL或Click事件

我们在做图表的时候,有时候需要在单个数据上加链接或点击事件,是在plotOptions里的events里设置的 plotOptions: { pie: { cursor: 'pointer', events: { click: function(e) { location.href = e.point.url; //上面是当前页跳转,如果是要跳出新页面,那就用 //window.open(e.point.url); //这里的url要后面的data里给出 } }, } }, series: [{

利用echarts highcharts 实现自定义地图 关系图效果 侧边3D柱形图饼图散点图

github 地址:  https://https://github.com/Gengshaoxuan/medataMap github 地址:  https://https://github.com/Gengshaoxuan/medataMap github 地址:  https://https://github.com/Gengshaoxuan/medataMap github 地址:  https://https://github.com/Gengshaoxuan/medataMap gi

jquery html5图表动画圆形饼图特效

上图: html和jquery实现的饼图特效,效果特好 使用方法: 引入脚本和css <link href="css/style.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery.js"></script> <script src="

2016年最牛逼的分类Android项目源码免费一次性打包下载!

之前发过一个帖子,但是那个帖子有点问题我就重新发一个吧,下面的源码是我从今年开始不断整理源码区和其他网站上的安卓例子源码,目前总共有810套左右,根据实现的功能被我分成了100多个类,总共接近2.5G,还在不断更新.初学者可以快速方便的找到自己想要的例子,大神也可以看一下别人的方法实现.虽然的例子都是我一个人辛辛苦苦花了很多时间和精力整理的,但是既然这些例子是来自于社区那就让他们免费回归社区吧,(是的!特么的不要一分钱!最看不起那些挂羊头卖狗的)你可以在本帖里面按Ctrl+F查找你需要的关键字,

android源码大放送(实战开发必备),免费安卓demo源码,例子大全文件详细列表

免费安卓demo源码,例子大全文件详细列表 本列表源码永久免费下载地址:http://www.jiandaima.com/blog/android-demo 卷 yunpan 的文件夹 PATH 列表 卷序列号为 0000-73EC E:. │ jiandaima.com文件列表生成.bat │ 例子大全说明.txt │ 本例子永久更新地址~.url │ 目录列表2016.03.10更新.txt │ ├─前台界面 │ ├─3D标签云卡片热门 │ │ Android TagCloudView云标签

转--2014年最新810多套android源码2.46GB免费一次性打包下载

转载自:http://www.eoeandroid.com/thread-497046-1-1.html 感谢该博客主人无私奉献~~ 下面的源码是从今年3月份开始不断整理源码区和其他网站上的安卓例子源码,目前总共有810套左右,根据实现的功能被博主分成了100多个类,总共接近2.5G,还在不断更新.初学者可以快速方便的找到自己想要的例子,大神也可以看一下别人的方法实现.虽然的例子都是博主一个人辛辛苦苦花了很多时间和精力整理的,但是既然这些例子是来自于社区那就让他们免费回归社区吧,(是的!特么的不

ym——android源代码大放送(实战开发必备)

转载请注明本文出自Cym的博客(http://blog.csdn.net/cym492224103),谢谢支持! 目录 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载很多其它源代码.url │  文件夹列表.txt │ ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMobil

ym——android源码大放送(实战开发必备)

文件夹 PATH 列表 卷序列号为 000A-8F50 E:. │  javaapk.com文件列表生成工具.bat │  使用说明.txt │  免费下载更多源码.url │  目录列表.txt │ ├─android web应用 │      jqmDemo_static.zip │      jqmMobileDemo-master.zip │      jqmMobileDemo1_1-master.zip │      Location1014.rar │ ├─anko │      

2014年最新720多套Android源码2.0GB免费一次性打包下载

之前发过一个帖子,但是那个帖子有点问题我就重新发一个吧,下面的源码是我从今年3月份开始不断整理源码区和其他网站上的android源码,目前总共有720套左右,根据实现的功能被我分成了100多个类,总共2G多,还在不断更新安卓源码.初学者可以快速方便的找到自己想要的例子,大神也可以看一下别人的方法实现.虽然的例子都是我一个人辛辛苦苦花了很多时间和精力整理的,但是既然这些例子是来自于社区那就让他们免费回归社区吧,(是的!特么的不要一分钱!最看不起那些挂羊头卖狗的)你可以在本帖里面按Ctrl+F查找你