Yana1225的博客

echarts: confine, markLine, tooltip等

今天修改一个echarts的渲染效率问题。首先修改请求数据的问题，原先的逻辑是点击的时候请求数据，我看了下数据大概有七千多条，请求耗时是1.6s-1.7s，这是在我的电脑上。同事反馈在他的电脑上需要5s以上。于是修改逻辑为：在“分时”的时候就请求“日”和“周”的数据。这样一来优化了请求的时间，渲染图就不会出现长时间留白。其次修改：echarts图渲染的时候会有卡顿的情况，查了下echarts官方配置项，有一个sampling可用，是降采样，也就是渲染的时候不把每一个点渲染出来。e..

今天收到一个需求，是和echarts有关的，不过并不是调整echarts，而是传给echarts的数据要做调整。// 从后端接收到的数据类似这样：[ {statename: 'a', value: 1}, {statename: 'b', value: 2}, {statename: 'c', value: 3}];// 需求的echarts图需要的数据是这样滴：[ {statename: 'a', value: 1}, {statename: 'b

图表特点及问题：1.需要是两种类型的交叉，横轴和纵轴都是字符型，在echarts官网上查到的散点图，横纵轴都是数值类型，结果配成字符之后，无法出现交叉点，变成区域。最后的办法是，将横纵轴的值换成数值型，再通过formatter实现展示为原本的字符2.交叉点上需要展示数量，并根据数量大小展示气泡大小。利用symbolSize实现配置如下：var data = [ {tech...

图表特点及问题：1.柱形图混合折线图2.柱形图为长方体立体图在网上查找一番之后，基本上有个思路方向：立方体为三个柱形拼接成的，三个图要使用同一个name缺陷：肯定是有的，比如第一个柱形图浮在中间菱形图的上面，导致出现比较奇怪的立体图配置如下：var indictedCase = [10, 7, 15, 8, 6, 2, 1, 3,5,8,9];var option = ...

图标特点及问题：1.柱形图和折线图混合2.左右侧分割线对齐3.横轴为月份，而数据是年份区间，导致月份过长不能全部展示。解决方案：就是加上dataZoom，echarts中叫做区域缩放，在这个图表中正好派上用场，并固定一屏显示半年，即六个月配置如下：var option = { backgroundColor: '#051c71', dataZoom: [{ ...

圆角，颜色渐变，x轴为项+百分比配置如下：var caseStateNum = [100, 80, 80, 50, 70, 110, 130, 80, 70, 50, 45, 60, 60];var total = 0;var caseStateRatio = [];caseStateNum.map(function(d ,i){ total += d;})caseSt...

这个图就比较简单了，就是带圆角的彩色柱形图，唯一一个就是不同项颜色不尽相同配置如下：var option = { backgroundColor: '#051c71', tooltip: { trigger: "axis", backgroundColor: 'rgb(11,11,81)', padding: [15,30]...

最近做echarts很多，发现echarts重点在配置，完成之后决定非常有必要把对应图的参数配置记录一下，以免以后遇到再次抓狂代码配置如下：var fontSize = 10;switch(window.innerWidth) { case 1366: fontSize = 10; break; case 1400: fontSize = 12; ...