echarts
sulingliang
我们曾如此渴望命运的波澜,到最后才发现,世间最曼妙的风景竟是内心的淡定与从容!
我们曾如此期盼他人的肯定,到最后才知道,世界是自己的,与他人毫无关系。
展开
-
Echarts highlight line & tooltip
如果折线图数据量过多时,会出现看不清楚的情况,所以希望能高亮当前点击的线,并在tooltip高亮当前点。原创 2023-03-21 16:41:37 · 345 阅读 · 0 评论 -
echarts axisLabel tooltip
项目需求:给xAxisLabel增加icon,并展示tooltip需求难点:xAxisLabel的formatter方法不支持写html,并且原有的chart的是有tooltip内容展示所以参照了他人写的,进行了更改展示效果图:myChart.on('mouseover', function(params){ // 鼠标事件需用mouseover,而不是mousemove,要不鼠标移动时会有卡顿的效果 if (params.componentType === 'xAxis') { l原创 2021-12-16 18:20:56 · 909 阅读 · 0 评论 -
echarts 值为0时 柱状图不显示bar
项目需求:如果最大最小值差别很大的话,若值很小,也需进行占位,所以加了barMinHeight,这样又导致了另一个问题,值为0时,不需要绘制,因此,提出了下面两种解决方案第一种方法:将值为0的透明度设置为0(推荐)series: [ { barMinHeight: 5, data: [111111120, 200, 150, 80, 70, 110, {value:0, itemStyle: {opacity: 0}}], type: 'bar' }]第二种方法:原创 2021-09-23 17:47:56 · 4976 阅读 · 2 评论 -
echarts 负值到正值的瀑布图
echarts官网给的瀑布图是正值的,然而在实际开发中,会存在负值开始的瀑布图,所以这边动了点小心思,先把最小值给算出来,然后再在y轴显示刻度的时候减去这个最小值,相当于先信用卡给提现了,不管后面是支出还是收入,都不可能出现负值的情况了计算出y轴的最小值yAxisMinyAxis: { type: 'value', axisLabel: { formatter: value => value - yAxisMin }}设置两条x轴,第二条x轴是防止当chart的开始值是负原创 2021-09-18 16:13:34 · 1521 阅读 · 0 评论 -
echarts bar markArea
第一种:无虚拟头结点const reverseList = function(head) { if(!head || !head.next) { return head; } let cur = head; let next = cur.next; cur.next = null; while(next) { const tmp = next.next; next.next = cur; cur原创 2021-08-12 17:30:25 · 1856 阅读 · 1 评论 -
Echarts热力图 值为空时,获取当前鼠标所在的x、y轴位置
当值为空时,tooltip展示的效果图x轴、y轴变量定义let yAxisVal = ''; // 定义y轴变量let xAxisVal = ''; // 定义x轴变量xAxis设置:xAxis: { ... axisPointer: { show: true, type: 'none', trigger: 'item', label: { formatter(e){ xAxisVal = e.value; // 重点:获取x原创 2021-06-23 18:53:43 · 1041 阅读 · 6 评论 -
echarts 实现双y轴0刻度对齐
一开始是参照了这个链接实现echarts双y轴0刻度对齐进行的改造,但是发现放到项目里,会出现其中一个y轴刻度不显示的情况。效果图:y轴没有展示然后又参照了这个链接Echarts的双y轴0刻度对齐问题,这个方法也有个问题,是以0为分界线,实现0上和0下等分的情况,若值都是大于0的话,是无需0下部分的。效果图:无需0下部分上面两种都不能有效解决问题,所以只能自己写了第一步:分别找出双y轴的最大最小值const max1 = Math.max(1, ...data1) || 1;const m原创 2021-01-21 18:40:03 · 3791 阅读 · 2 评论 -
echarts 折线图的点始终位于柱状图的中心
一开始是参照了这个链接进行的改动,其是通过计算进行的偏移,这个要考虑到屏幕的宽度,及柱状图的宽度,无法做到自适应,并且当点击图例的时候,也会有偏差,最后放弃了这种方法,下面的方法更加适用。核心:设置两个一模一样的x轴,一个柱状图位于xAxis[0],另一个位于xAxis[1]option = { xAxis: [ { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'原创 2020-09-09 20:05:10 · 3314 阅读 · 0 评论