ECharts

ECharts树图节点过多时取消缩放,调整容器高度自适应内容变化

烂漫一生 提交于 2021-02-20 07:36:04
问题现象   使用ECharts树图,在数据维度大,节点过多时,所看到的内容会重叠交错,无法查看。 原因   在给定ECharts树图容器尺寸后,无论数据多么庞大或者稀少,数据始终会尝试在给定容器内撑满、全部显示。 处理 var container = document.getElementById('chart-panel' ); myChart.on( 'click', function (params) { if (params.componentType === 'series' ) { // 点击到了 series 上 if (! params.value) { // 点击的节点有子分支(可点开) var elesArr = Array.from( new Set(myChart._chartsViews[0 ]._data._graphicEls)); var height = 200; // 这里限制最小高 var currentHeight = 10 * (elesArr.length - 1) || 10; // 每项10px var newHeight = Math.max(currentHeight, height); container.style.height = newHeight + 'px' ; myChart.resize(); } } });  

echarts

Deadly 提交于 2021-02-20 04:29:04
一、准备   1. echarts-3.3.2.min.js   2. jquery.1.11.1.min.js 二、圆角加多渐变条形(ie8+)统计图 function barChart(id,data1,data2) { var colorShow = [ [ {offset: 0, color: '#FDD841' }, {offset: 0.5, color: '#FAB84B' }, {offset: 1, color: '#F79E55' } ], [ {offset: 0, color: '#65D5FA' }, {offset: 0.5, color: '#2A93D6' }, {offset: 1, color: '#1868BC' } ], [ {offset: 0, color: '#36CBCE' }, {offset: 0.5, color: '#2EC7BF' }, {offset: 1, color: '#29C3AE' } ], [ {offset: 0, color: '#EC97A7' }, {offset: 0.5, color: '#DA6986' }, {offset: 1, color: '#CA426B' } ] ]; var colorHover = [ {offset: 1, color: '#1868BC' }, {offset:

🎉 echarts-for-react v3 发布

送分小仙女□ 提交于 2021-02-19 10:43:00
echarts 是什么,不用多说了, 国内最知名的可视化图表库之一。 echarts-for-react 是它的一个极简的 React 封装。 一、前言 🎉 echarts ** v5 发布之后**, echarts-for-react 上已经有很多很多的 issue 请求支持最新版本,所以,过年期间升级了 v3 版本,支持了最新的 echarts v5。 **很尴尬,目前我是在蚂蚁,主要做大数据 BI 产品 + AntV 数据可视化技术栈。理论上来说,echarts 使我们的竞品,哈哈,然而,我居然还在过年给它升级周边,我想这应该就是开源精神吧。**那就顺便一起打个广告吧,欢迎大家支持我现在的工作。 G2 :基于图形语法的数据可视化,提供灵活性、定制性 G2Plot :基于 G2 做的一图已封装,降低大部分简单场景的使用成本 Charts :基于 G2Plot,在 Ant Design 上透出的 React 图表组件库 本文还是重点软一下 echarts 和它的 react 封装吧! 二、起源 在蚂蚁之前,自己在网易游戏入坑前端,当时内部使用 SVG 做代码版本控制,所以自己做了一个类似于 travis(但是没有 GitHub Action) 的面向 SVG 的 ci 工具。这个项目是我初次上手 React(0.14.x 版本)。 然而在 JQuery 技术栈下, echarts

vue学习【一】vue引用封装echarts并展示多个echarts图表

谁都会走 提交于 2021-02-18 01:22:54
大家好,我是一叶,经过一段时间对vue的学习,我打算把vue做一个系列,把踩过的坑和大家分享一下。 现在开始第一章:vue引用并封装echarts 在文章开始前,我先舔波echarts(真香)。阿里的G2和百度的echarts都是很不错的,echarts上手难度小,并且用户多,文档多,生态环境较好,所以中小项目的话echarts就是首选。加个题外话,我把G2、echarts都po出来,大家凭喜好选取。 G2官方demo地址: https://antv.alipay.com/zh-cn/index.html echarts官方demo地址: https://echarts.baidu.com/ 现在开始干活,进入echarts网址中,我们能看到,图表的主要参数都在option这函数里,如图1所示。我们将option()放到vue中的methods中即可引用。 图1 在项目中打开命令行(直接在地址栏输入cmd即可打开dos面板),输入命令,如图2 所示。 npm install echarts 图2 打开项目,创建views文件夹,存放父组件index.vue,在components文件夹下创建echartscom.vue子组件,如图3所示。echartscom.vue中主要放option(),用来实现图表渲染,index.vue存放数据,echartscom.vue引用index

Superset 0.37 发布——颜值最高的数据可视化平台

痴心易碎 提交于 2021-02-12 03:38:37
Superset 0.37,增加可视化插件,行级权限控制 使用Superset已经有一段时间,其良好的体验与丰富的图表功能节省了大量的时间。但是对于权限,自定义图表,图表下载,报警邮件一直没有很好的支持,大部分公司对于这些功能的实现还是需要大量的二次开发,费时费力。 近日Superset 0.37 正式发布,令人惊喜的是,新功能几乎都是大家期待已久的,而对于Superset的未来也更加的期待了。 下面简单介绍本次的一些主要的更新~ 距离Superset 0.36 的发布已经过了四个多月的时间,但superset的活跃程度一点没有减弱,GitHub的Star已经突破了30k,Superset已经成为数据可视化平台的不二选择。 可视化插件 0.37对Superset可视化代码进行了重构,开发人员现在可以引用图表API来构建自己的可视化插件,无需再去二次开发代码。 除了对现有图表类型(如数据透视表,饼图和过滤器框)进行的其他小改进和错误修复之外,此新体系结构还 使用户能够对数据进行更多处理 。 现在,可以使用任何可用的基于JavaScript的数据可视化库在Superset上创建自定义可视化插件,例如ECharts,AntV,HighCharts,VX,D3。 行级权限控制 构建新的可视化插件显然是很酷,但是对于要成为企业级的任何数据可视化应用程序,它在安全性上都必须坚如磐石。此次的0

vue2.0引用Echart3.0

。_饼干妹妹 提交于 2021-02-11 18:07:16
一、需求   1、由于我们项目中有个页面,需要统计分析的功能   2、所以才想到vue中引用echart组件(备注:我们是利用vue-cli脚手架,初始化vue项目) 二、如何实现这个需求   1、引入Echart包,通过以下命令安装Echarts   2、写一个环形图的子组件   该组件比较全的代码如下: < template > < div :id ="this.id" :style ="{ height: height + 'px', width: width + '%'}" ></ div > </ template > < script > var echarts = require( ' echarts/lib/echarts ' ) // 引入柱状图 require( ' echarts/lib/chart/pie ' ) // 引入提示框和标题组件 require( ' echarts/lib/component/tooltip ' ) require( ' echarts/lib/component/title ' ) require( ' echarts/lib/component/legend ' ) export default { name: ' VChartPie ' , props: { height: { type: Number, default

web端生成的带有echarts图表的html页面,嵌入在(javaFx)webview中显示错位问题

假如想象 提交于 2021-02-10 06:02:05
web项目需要嵌入到手机APP的webview里面以及 windows客户端应用( JavaFx )的webview里面,这个时候就出现了问题。 echarts渲染的时候根据浏览器不同的内核显示是有区别的。 项目里面的echarts折线图显示的效果是这样的 这个效果在网页上面,跟Android app的webview里面显示是没问题的,但是在window显示的echarts折线图显示是错位的,柱状图也显示错位了。 后来查Echarts的api时发现4.x有新特性,在初始化是可以配置渲染方式为canvas或者svg,默认为canvas。 初始化代码: var mychart = echarts.init(document.getElementById('demo'), null, {renderer: 'svg'}); 在看了下项目显示效果折线是没问题了,但是折线上面的一个标记的特殊的点什么的位置之前是在canvas渲染模式下调整好的,到了svg渲染模式下全变化了,这个需要在从新调整,有时候这个点在不同的环境里面显示的还不一样,得通过修改echarts的options配置来达到显示的最优解。 另外一点要注意的就是修改成svg以后,rich富文本设置的效果就没有效果了, svg渲染下不支持rich 了。 还有一点很重要的就是:

中国式复杂报表怎么做?如何应对企业报表需求?

依然范特西╮ 提交于 2021-02-09 11:51:46
提到复杂报表,第一个想到的就是 中国式报表 。那么到底什么是中国式报表?它到底复杂在哪里?如何应对复杂报表的开发需求?今天我们就聊一聊这些问题。 一、啥是中国式报表? 都说中国式报表是最复杂的报表,没有之一,那么到底什么才是才是中国式报表? 我们总结了中国式报表的几个典型特征:格式复杂、信息量大、表头乱。 举个例子,下图是一张典型的中国式报表,我们可以看到这一张表中的数据是取自数据库中的多个物理表,且表头信息是多层嵌套且有带斜线的表头信息,但这只是中国式报表复杂度的冰山一角。 二、中国式报表复杂在哪里? 1、报表格式 众所周知,中国式报表的边框线规则很复杂,格子往往是一层套一层,在绘制表格的时候要注意兼顾层级关系,最头疼的是有些表格很宽,常常搞得顾了左顾不了右。 Excel 表格的规律性和易用性使得它在财务等系统用户中备受亲睐。excel 采用网格线吧格子围出来的画法,配合以合并格和边框,好比给大家配上了尺子和笔。通过单元格的合并和拆分,再复杂的表样用 excel 也能绘制出来,其他报表工具也同样可以绘制出来。 在报表格式这部分虽然会有些复杂的表样,但是耐心画总会画出来的。而报表数据计算统计的问题是更重要的,因为除了外在,我们要更注重它的内涵。 2、多源报表 同一张报表的数据会来自多个不同的数据表或视图,甚至来自多个不同的异构数据库,这就是我们常说的多源报表。在这种报表需求中,

还有人不会做数据地图?赶紧来学习一下!

邮差的信 提交于 2021-02-05 08:58:05
最近,某某品牌运营的小伙伴最近跟我吐槽,领导要他制作那种在新闻报道和商业杂志上用作分析展示商业现象的地图,还要结合数据进行绘制,他都要都愁翻天了!其实,这样的利用地图来反映和分析数据的形式叫数据地图,在商业数据分析中,有大量数据是与地理位置相关的,这种数据用地图进行分析更直观形象。在数据可视化中,地图可视化是较为常见的一种图形,只要用到一些高阶的数据处理工具,轻轻松松就能简单完成。 下面我就以Smartbi为例子给大家介绍一下数据地图的操作方法,Smartbi的Echarts图形做为数据展现的一种更灵活直观的方式,它基于用户对数据更易于理解、对决策更具科学依据的需求,对不同业务背景下的数据进行处理,可以实现对数据多角度多层次的分析,接下来我就手把手教大家怎么做吧! 前提要求 创建地图分析前,首先要求创建好HTML5地图文件(*.svg格式),创建地图文件请参考 HTML5地图编辑器操作手册。按照在smartbi中使用svg地图文件文档说明,将创建好的svg地图文件加载到smartbi中并配置地图区域。如下: 创建地图分析前需要保证三个地方的地图编码一致:地图svg文件里面区域图层ID、地图区域设置中的对应区域的地图编码、地图分析对应查询的编码数据。 1、地图SVG文件里面区域图层ID。 2、地图区域设置中的对应区域的地图编码。 3、地图分析对应查询的编码数据。 功能入口

Python加载basemap绘制分省地图

瘦欲@ 提交于 2021-02-03 11:56:55
背景 Bokeh的Geo采用谷歌地图API,无法调用;国内的百度、腾讯、高德API在热点图渲染时可以用,至于Echarts的使用,也出现了一些鸡肋BUG,于是想从根源上解决这个问题。 代码 安装Basemap、下载繁体字转简体字代码。 (一)注意在渲染全国地图时,一定要加上湾湾,确保政治正确: m = Basemap ( llcrnrlon = 77 , llcrnrlat = 14 , urcrnrlon = 140 , urcrnrlat = 51 , projection = 'lcc' , lat_1 = 33 , lat_2 = 45 , lon_0 = 100 ) # m= Basemap(llcrnrlon=73, llcrnrlat=18, urcrnrlon=135, urcrnrlat=53) # m.drawcountries(linewidth=0.5) # m.drawcoastlines(linewidth=0.5) m . readshapefile ( 'gadm36_CHN_shp/gadm36_CHN_0' , 'china' , drawbounds = True ) # 中国,竟然没有湾湾,NND m . readshapefile ( 'gadm36_CHN_shp/gadm36_TWN_0' , 'taiwan' , drawbounds