`

echart使用记录

 
阅读更多
ECharts详细说明 http://elang0705.iteye.com/blog/2252577





格式化提醒
tooltip: {
                trigger: 'item', // 单个显示,多个提示使用axis
                //formatter: "{a} <br/>{c} ({d}%)"
                formatter:  function(params, ticket, callback){
                    alert("formatter");
                    //自己返回格式化信息
                }
            }

echarts多图例子
http://www.oschina.net/question/2430036_2157470
一张图里面包含两个pie图
option1 = {
                title : {
                    text: '性别统计',
                    subtext: '纯属虚构',
                    x:'right'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['本科男','本科女','硕士男','硕士女']
                },
                series : [
                    {
                        name: '硕士',
                        type: 'pie',
                        radius : '55%',
                        center: ['35%', '30%'],
                        data:[
                            {value:250, name:'硕士男'},
                            {value:150, name:'硕士女'}
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    {
                        name: '本科',
                        type: 'pie',
                        radius: '55%',
                        center: ['70%', '70%'],
                        data: [
                            {value: 500, name:'本科男'},
                            {value: 300, name: '本科女'}
                        ]
                    }
                ]
            };

            myChart1 = echarts.init(document.getElementById('canvas1'), globalEChartTheme);
            myChart1.setOption(option1);



一个柱状图 + 一个pie图
option1 = {
                "title": {"text": "采购统计排行", "subtext": "采购统计排行"},
                "tooltip": {"trigger": "axis"},
                "legend": {
                    "x": "left",
                    "y": "bottom",
                    "data": ["切割机V1", "PVC0.4", "PVC0.9"]
                },
                "toolbox": {
                    "show": true,
                    "orient": "vertical",
                    "x": "right",
                    "y": "center",
                    "feature": {
                        "mark": {"show": true},
                        "dataView": {"show": true, "readOnly": false},
                        "magicType": {"show": true, "type": ["line", "bar", "stack", "tiled"]},
                        "restore": {"show": true},
                        "saveAsImage": {"show": true}
                    }
                },
                "calculable": true,
                "xAxis": [{"type": "category", "data": ["采购数量统计排名"]}],
                "yAxis": [{"type": "value"}],
                "series": [
                    {
                        "type": "bar",
                        "markPoint": {"data": [{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]},
                        "markLine": {"data": [{"type": "average", "name": "平均值"}]},
                        "name": "切割机V1",
                        "data": [13]
                    }, {
                        "type": "bar",
                        "markPoint": {"data": [{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]},
                        "markLine": {"data": [{"type": "average", "name": "平均值"}]},
                        "name": "PVC0.4",
                        "data": [1313]
                    }, {
                        "type": "bar",
                        "markPoint": {"data": [{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]},
                        "markLine": {"data": [{"type": "average", "name": "平均值"}]},
                        "name": "PVC0.9",
                        "data": [1125]
                    },
                    {
                        name: '本科',
                        type: 'pie',
                        radius: '10%',
                        center: ['70%', '20%'],
                        data: [
                            {value: 13, name: '切割机V1'},
                            {value: 1313, name: 'PVC0.4'},
                            {value: 1125, name: 'PVC0.9'}
                        ]
                    }]
            };
            myChart1 = echarts.init(document.getElementById('canvas1'), globalEChartTheme);
            myChart1.setOption(option1);


柱状图每个周期对应单独的一个并图
http://echarts.baidu.com/demo.html#mix-timeline-finance
分享到:
评论

相关推荐

    Hbase结合echart.js实例主要代码

    5. 加载Hbase数据:编写Java代码连接到Hbase,使用Get或Scan操作获取所需数据,然后将数据转换为Echart.js可以识别的格式,例如JSON数组。 6. 渲染图表:将配置项赋值给ECharts实例的`setOption`方法,这将根据配置...

    Delphi-unigui-echart.rar

    - `echarts.identcache`和`echarts.dproj.local`:这些是Delphi项目管理的本地配置文件,记录了项目的依赖和用户特定的设置。 4. **运行流程** - 用户访问指定URL(如127.0.0.1/8077),向服务器发送请求。 - ...

    echart可视化大数据

    - `package.json` 和 `yarn.lock`: 这是项目的核心配置文件,记录了项目的元数据(如名称、版本、作者)以及依赖库及其版本,`yarn.lock` 是 Yarn 包管理器生成的依赖锁定文件。 - `yarn.lock`: 如果项目使用 Yarn ...

    echart拓扑图单节点拖拽互不影响demo

    5. **性能优化**:由于拖拽过程中可能会频繁地更新数据和视图,为了提升性能,可以使用ECharts的`notMerge`和`silent`选项,避免不必要的重绘和动画。 6. **后端交互**:保存节点位置信息通常涉及到与服务器的交互...

    eChart+百度地图.rar

    这次的压缩包“eChart+百度地图.rar”显然涉及到ECharts与百度地图的结合使用,主要关注如何利用ECharts的图表功能和百度地图API来模拟和记录经纬度位置信息。 首先,让我们深入了解一下ECharts。ECharts的核心特性...

    EChart GAS 1 流量计算机手册 EChart燃气流量计算机手册

    - **数据记录功能**:内置存储器,可记录大量的历史数据。 - **远程监控能力**:通过通信接口实现远程数据传输和监控。 #### 三、安装与操作指南 ##### **1. 安装前准备** - **确认安装环境**:确保安装地点符合...

    echart+html5+css3实现大屏监控可视化

    巡查视频问题:页面列出了多个关于“张三丰南京信息工程大学地铁站1号出口监控点”的视频信号不稳定的问题,重复出现多次,表明该监控点可能存在持续的视频信号问题。 巡查视频问题统计:提供了问题总数、已整改和...

    使用echarts绘制android图表

    - 注意 Webview 的内存管理和渲染性能优化,适时调用 `clearCache()` 和 `clearHistory()` 清理缓存和历史记录。 6. **自定义图表**: - ECharts 支持高度定制,开发者可以通过修改 `option` 对象的属性和方法...

    echart3 力引导布局实现节点的提示和折叠

    在本文中,我们将深入探讨如何使用ECharts 3中的力引导布局来实现节点的提示和折叠功能。ECharts是一款基于JavaScript的数据可视化库,它提供了丰富的图表类型和强大的交互能力,适用于网页上的数据可视化。 首先,...

    微信小程序版echart

    5. `package.json`:项目配置文件,记录了依赖、版本、作者等信息。 使用微信小程序版ECharts的步骤通常包括: 1. 安装:将压缩包中的`echarts-for-weixin-2.0.0`目录导入到微信开发者工具的项目中,或者通过npm/...

    一个基于 vue、datav、Echart 框架的大数据可视化(大屏展示)模板.zip

    标题和描述中提到的“一个基于 vue、datav、Echart 框架的大数据可视化(大屏展示)模板”是指一个使用 Vue.js 框架、DataV 和 ECharts 图表库构建的用于大数据可视化的项目模板。这个模板特别适用于创建大屏幕展示...

    mybatis + echart 报表统计实例

    MyBatis允许开发者编写动态SQL,通过XML或注解方式配置和映射原生信息,将接口和Java的POJOs(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录。在本项目中,我们将利用MyBatis从MySQL数据库中查询所需...

    CPU内存使用率图形显示

    此外,有些工具还会提供平均使用率、峰值使用率等统计信息,以及历史数据记录,便于长期跟踪和分析。 对于开发者来说,这样的图形显示非常有用,因为它们能帮助定位性能问题,比如找出哪些程序在后台消耗了大量资源...

    ECharts在React+Antd用法及常见错误

    最近项目中开始使用ECharts做图表,在React+Antd中使用Echart还是遇到了很多坑,希望记录下解决办法可以帮助到大家。由于初次使用,很多代码优化空间很大,希望大家能帮我提出,感恩~ 最终效果 1、实现点击折线图上...

    apache-echarts-4.6.0-incubating-src.zip

    10. **RELEASE_NOTE.txt**: 这个文件记录了版本4.6.0的重大更新、改进和修复的问题,对于了解这个版本的变化非常有帮助。 通过这些源代码,开发者可以自定义ECharts的行为,比如添加新的图表类型、优化渲染效率,...

    Echarts在Taro微信小程序开发中的踩坑记录

    近期笔者在使用Taro进行微信小程序开发,当引入Echarts图表库时,微信检测单包超限2M的一系列优化措施的踩坑记录,期望能指导读者少走一些弯路。 为什么选择Echarts? 微信小程序目录市面上使用最多的两款图表库,...

    淘宝双十一数据分析案例.rar,echart可视化分析,tomcat

    这通常包括从数据库中提取交易记录,处理缺失值,去除异常值,以及对数据进行必要的预处理步骤,确保后续分析的准确性和有效性。在这个过程中,可能会用到SQL等数据库查询语言以及Python或R等编程语言的数据处理库,...

    echart地图,可以下钻,react+echarts

    在本项目中,我们主要探讨如何使用ECharts地图组件与React框架结合,实现具有下钻功能的地图应用。ECharts是一个由百度开发的开源JavaScript图表库,它提供了丰富的可视化图表类型,包括地图。React则是一个流行的...

    Spring Boot +jpa+echart+Vue权限管理系统.zip

    业务日志:通过注解的方式记录用户操作日志,并提供日志查询功能 登录日志:查看用户登录登出日志 cms内容管理,配合flash-vue-h5提供了手机端内容展示系统 消息管理:配置消息模板,发送短信,邮件消息 基于idea...

Global site tag (gtag.js) - Google Analytics