一看就会，超有用活字格技能：一百一十三，平滑折线图

这几天我发现有很多小伙伴都在使用平滑折线图，比如这个

我心想活字格里的折线图目前暂时只有这几种呀~


平滑的折线图，大家是怎么做的？
后来我发现，大家都太机智了！

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




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

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

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

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

1.在页面加载时命令中，添加这样一段js

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找到，然后替换上。


怎么找呢？
运行页面，在浏览器中按下F12，然后按照图中标识操作即可。


加完js后的页面，你运行起来就可以看到平滑的折线图啦~

• 未加JS的效果
  

• 添加JS的效果
  

简单吧~


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

2021-3-2 11:12 上传

点击文件名下载附件