找回密码
 立即注册

QQ登录

只需一步,快速开始

Tracy.Liu 讲师达人认证 悬赏达人认证 活字格认证
论坛元老   /  发表于:2021-3-2 11:14  /   查看:3524  /  回复:0
这几天我发现有很多小伙伴都在使用平滑折线图,比如这个
image.png384603576.png
我心想活字格里的折线图目前暂时只有这几种呀~
image.png518656005.png

平滑的折线图,大家是怎么做的?
后来我发现,大家都太机智了!

大家选择的图表类型不是折线图,而是“带平滑线和数据标记的散点图”
image.png935889282.png

腻害了.gif

比如说帖子一开始放的那张图就是用这种方法做的~

但是嘞~我们知道散点图一般是做一些数据分析,看一组数据分散度使用的。
而图中,横坐标是年份,纵坐标是每年的总金额,这里是为了展示趋势,应该选择折线图比较妥当~毕竟什么类型的图表就应该做什么事儿嘛~

那么,有些小伙伴就说了,那种直愣愣的折线图实在是太丑了,我想让它显示平滑一些怎么办呀?
别急,简简单单一段js就搞定~

下面开始来跟着我一起操作吧~

1.在页面加载时命令中,添加这样一段js
image.png702709960.png
  1. var page = Forguncy.Page;
  2. page.bind("PageDefaultDataLoaded", function () {
  3. var chartID = $("div[chartname='Chart1']").attr("_echarts_instance_");
  4. var chart = echarts.getInstanceById(chartID);
  5. var option = chart.getOption();
  6. option.series[0].smooth = true;
  7. chart.setOption(option);
  8. });
复制代码


2.如果你这个页面中有多个图表,那么你需要将图中红框处的chartname找到,然后替换上。
image.png806066589.png

怎么找呢?
运行页面,在浏览器中按下F12,然后按照图中标识操作即可。
image.png307652587.png

加完js后的页面,你运行起来就可以看到平滑的折线图啦~
  • 未加JS的效果

image.png464364318.png
  • 添加JS的效果

image.png614399108.png
简单吧~
20210302110250.gif

有需要的小伙伴可以下载附件试一试呦~
折线图.fgcc (57.92 KB, 下载次数: 138)

评分

参与人数 3满意度 +15 收起 理由
孤狼 + 5
huozige666 + 5
月半子亥丿乚 + 5 赞一个!

查看全部评分

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部