echarts 踩坑 : id必须不同
摘要：我们可能用react前端框架开发项目。 也就是组件化开发。 一个页面里可能有很多组件。 而echarts是寻找特定ID的DOM去渲染的。 也就是说，如果整个页面。包括所有页面组件，有id相同的DOM，只会渲染其中一个DOM。 就会出现某些图表没有渲染的情况。 结论：一个页面中，所有组件的所有图表的I
阅读全文
posted @ 2020-06-24 19:15
随笔分类 - web数据可视化
echarts 实战 : 怎么写出和自动生成的一样的 tooltip ?
摘要：找到答案很麻烦，但答案本身很简单。 假设 需要给 echarts 的数据是 option。 params 是数组和对象暂时还不确定，如果是一个key 对应多个数据，那肯定是数组。
阅读全文
posted @ 2019-11-29 11:51
react实战 : react 与 canvas
摘要：有一个需求是这样的。 一个组件里若干个区块。区块数量不定。 区块里面是一个正六边形组件，而这个用 SVG 和 canvas 都可以。我选择 canvas。 所以就变成了在 react 中使用 canvas 的问题。 canvas 和 SVG 有一个很大的不同。 SVG 是标签，所以HTML怎么整，S
阅读全文
posted @ 2019-11-26 16:35
react实战 : react 与 svg
摘要：有一个需求是这样的。 一个组件里若干个区块。区块数量不定。 区块里面是一个波浪效果组件，而这个一般用 SVG 做。 所以就变成了在 react 中使用 SVG 的问题。 首先是波浪效果需要的样式。 引入样式，以及组件文件的结构。 一个组件文件里可能有很多层组件，只需要输出最外面的一层。 SVG 组件
阅读全文
posted @ 2019-11-26 10:22
echarts 踩坑 : 为什么效果出不来？看看有没有正确引入
摘要：今天我要给 echarts 组件加个 dataZoom 功能，结果发现没有效果。 后来发现是引入 echarts 模块的问题。 如果是按需引入的话，必须引入相应的功能模块才能使用相应的功能。 举例： 我没有引入 dataZoom ，所以不能使用。 这样就可以了。
阅读全文
posted @ 2019-11-24 18:26
echarts 踩坑 : 为什么触摸柱状图的时后柱子不见了？原来是color的锅！
摘要：今天发现一个奇怪的问题。 当我的鼠标触摸柱状图的时候，柱状图就消失了。 后来发现是颜色的设置有问题。 这样写是不规范的。 rgba 应该显式声明透明度值。 然后就好了。 以上。
阅读全文
posted @ 2019-11-18 13:55
echarts 实战 : 图表竖着或横着是怎样判定的？
摘要：这个问题比较简单。 echarts 的图表默认是竖着的。 只要 xAxis 和 yAxis 互换，竖着的图就变成了横着的图了。 所以我们可以可以写一个xy轴互换的方法。 然后使用一下就 OK。 以上。
阅读全文
posted @ 2019-11-17 10:28
echarts 实战 : 怎么处理特殊的图表数字 label ？
摘要：所谓Label，就是在图表上面显示的那个数字。 但有的时候我们需要柱状图堆叠。 那如果我们需要所有数字都在外面，并且以 320/210/310/410/1320 这样的形式显示呢？ 那么 echarts 本身提供的属性就没有办法了。 我们就需要自己写方法算一下。 然后在渲染时调用这个方法。 因为这个
阅读全文
posted @ 2019-11-17 10:23
echarts 实战 : 恼人的间隔问题
摘要：使用 echarts 的时候，可能我们需要这个图表的间隔是固定的。比如 3个 4个 5个。 （注意计算间隔数量的时候是不算 x轴 本身的。） 这个问题看似简单，其实有点麻烦。 但其实这个设置可能并不管用。 因为 echarts 会根据你喂给她的数据自动判断应该有几个刻度，很多时候，你设置了3个，她却
阅读全文
posted @ 2019-11-17 09:54
echarts 实战 : 想让图例颜色和元素颜色对应，怎么办？
摘要：首先，在 series 里设置颜色。 （我是用js生成 echarts 需要的option对象，所以可能很难看懂） 标红色的就是设置颜色的方法。 最后是 legend.textStyle.color 。关键是 color 要写成函数。 蓝色的箭头函数就是设置颜色的函数。没错，这么写就够了。 以上。
阅读全文
posted @ 2019-11-17 09:12
echarts 实战 : 标题的富文本样式
摘要：官方文档在这一块交待的不是很清楚，记录一下。 另外，与HTML不同。 echarts 中，多几个空格也是有效的，不会像HTML中那样只算一个。
阅读全文
posted @ 2019-11-11 21:56
echarts爬坑 : 怎么Line折线图设置symbol:none后Label不见了？
摘要：用 echarts 时遇到了一个奇奇怪怪的问题。 这是一张折线图。 本来这个图是有数字显示的。 当我设置 symbol:'none' 之后，折线图上的数字就不见了？ 可能是一个bug。 后来用别的方法绕过了这个问题。
阅读全文
posted @ 2019-11-07 23:42
