随笔分类 - 数据可视化D3、Echarts
摘要：eCharts对数轴官方示例：https://echarts.apache.org/examples/zh/editor.html?c=line-log 这种图示挺方便的，对于那种既有大数据，又有小数据，并且差别很大的时候，这种就比较方便，对于很小的数据也能看到趋势。比如有大量数据是500-1000
阅读全文
摘要：一、使用 Canvas 或者 SVG 渲染 浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。 ECharts 从初
阅读全文
摘要：1、可以看官网api的入门例子 使用常见的对象数组的格式 第一个默认时x轴，后面是y轴 2、项目应用： 数据格式： 数据： 效果：
阅读全文
摘要：一、Echarts的legend改变图例图标为自定义图片 当折线图时，legend默认时rect形式，如果需要改图例形状，可以自己设置legend的icon属性 legend: { icon:'stack' }, 1、自定义每个图例样式：为data的每个对象修改icon属性 legend:{ sho
阅读全文
echarts使用记录（三）：x/y轴数据和刻度显示及坐标中网格显示、格式化x/y轴数据、echarts 图例显示到右边、折线图平滑曲线、echarts图例不显示问题、让x轴刻度居中、柱状图显示背景色
摘要：1、去掉坐标轴刻度线，刻度数据，坐标轴网格，以Y轴为例，同理X轴 xAxis: [{ type: 'category', axisTick: {//决定是否显示坐标刻度 alignWithLabel: true, show:false }, axisLabel:{ //决定是否显示数据 show:f
阅读全文
摘要：1、业务背景 图形实时从后台获取数据，让图形从最右边出现，每隔一秒向左移一位，当最左边的数据移到Y轴时，最左边的数据移出屏幕，最右边增加一个数。实现一个从右往左动画的效果 2、先看下项目中的demo解决实例 让数据从最右边出，不重复说了，利用数组的length特性 其次就是对数据的处理：当数组长度大
阅读全文
摘要：处理三维数据做图表，比如返回的数据就是一个个list，list里面某几个数据同属于一个维度，项目中的实例效果如下： 上面的khfx会有多个，比如db1、db2、db3等，下面的那些数据也会变化，目前需求就是做的下面的实现单选，可以使用echarts的legend的selectedMode实现，然后上
阅读全文
摘要：1、有时候legend比较多的时候，需要做翻页比较好，有个属性legend的type属性设置为scroll，然后animation可以控制动画，官方文档均可查。 再就是scrollDataIndex，就是默认从哪一项开始翻页。 然后有个问题就是虽然legend可以显示分页，但是series却没法跟随
阅读全文
摘要：这些东西要是有精力和时间可以通读echarts文档，里面都有配置详细介绍。该博客只是把自己使用echarts遇到的问题记录下，并不全，加深印象，抛砖引玉而已，完整学习的请移步官方文档 1、legend设置单选 修改图例legend颜色，定义color数组，对应图例即可 2、添加缩放滚动 加上data
阅读全文
摘要：一、打包图 打包图（ Pack ），用于表示包含与被包含的关系，也可表示各对象的权重，通常用一圆套一圆来表示前者，用圆的大小来表示后者。 1、布局（数据转换） 第 1 行：打包图的布局 第 2 行：size() 设定转换的范围，即转换后顶点的坐标(x,y)，都会在此范围内。 第 3 行：radius
阅读全文
摘要：一、弦图 1、弦图是什么 弦图（Chord），主要用于表示两个节点之间的联系的图表。两点之间的连线，表示谁和谁具有联系。 2、数据 初始数据为： 数据是一些城市名和一些数字，这些数字表示城市人口的来源。其意思如下： 左边第一列是被统计人口的城市，上边第一行是被统计的来源城市，即： 北京市的人口有 1
阅读全文
摘要：一、饼状图 在布局的应用中，最简单的就是饼状图。 1、数据 有如下数据，需要可视化： 这样的值是不能直接绘图的。例如绘制饼状图的一个部分，需要知道一段弧的起始角度和终止角度，这些值都不存在于数组 dataset 中。因此，需要用到布局，布局的作用就是：计算出适合于作图的数据。 2、布局（数据转换）
阅读全文
摘要：一、图表交互操作 与图表的交互，指在图形元素上设置一个或多个监听器，当事件发生时，做出相应的反应。 交互，指的是用户输入了某种指令，程序接受到指令之后必须做出某种响应。对可视化图表来说，交互能使图表更加生动，能表现更多内容。例如，拖动图表中某些图形、鼠标滑到图形上出现提示框、用触屏放大或缩小图形等等
阅读全文
摘要：一、动态效果 D3 支持制作动态的图表。有时候，图表的变化需要缓慢的发生，以便于让用户看清楚变化的过程，也能给用户不小的友好感。 1、什么是动态效果 前面制作的图表是一蹴而就地出现，然后绘制完成后不再发生变化的，这是静态的图表。 动态的图表，是指图表在某一时间段会发生某种变化，可能是形状、颜色、位置
阅读全文
摘要：比例尺是 D3 中很重要的一个概念。绘制图形时直接用数值的大小来代表像素不是一种好方法，本章正是要解决此问题。 一、为什么需要比例尺 上一章制作了一个柱形图，当时有一个数组，绘图时，直接使用 250 给矩形的宽度赋值，即矩形的宽度就是 250 个像素。此方式非常具有局限性，如果数值过大或过小，例如：
阅读全文
摘要：一、元素操作： 1、选择元素 select 和 selectAll，以及选择集的概念 关于 select 和 selectAll 的参数，其实是符合 CSS 选择器的条件的，即用“井号（#）”表示 id，用“点（.）”表示 class。 此外，对于已经绑定了数据的选择集，还有一种选择元素的方法，那就
阅读全文
摘要：D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做数据可视化的。 D3 提供了各种简单易用的函数，大大简化了 JavaScript 操作数据的难度。由于它本
阅读全文
