这几天我发现有很多小伙伴都在使用平滑折线图,比如这个
我心想活字格里的折线图目前暂时只有这几种呀~
平滑的折线图,大家是怎么做的?
后来我发现,大家都太机智了!
大家选择的图表类型不是折线图,而是“带平滑线和数据标记的散点图”
比如说帖子一开始放的那张图就是用这种方法做的~
但是嘞~我们知道散点图一般是做一些数据分析,看一组数据分散度使用的。
而图中,横坐标是年份,纵坐标是每年的总金额,这里是为了展示趋势,应该选择折线图比较妥当~毕竟什么类型的图表就应该做什么事儿嘛~
那么,有些小伙伴就说了,那种直愣愣的折线图实在是太丑了,我想让它显示平滑一些怎么办呀?
别急,简简单单一段js就搞定~
下面开始来跟着我一起操作吧~
1.在页面加载时命令中,添加这样一段js
- var page = Forguncy.Page;
- page.bind("PageDefaultDataLoaded", function () {
- var chartID = $("div[chartname='Chart1']").attr("_echarts_instance_");
- var chart = echarts.getInstanceById(chartID);
- var option = chart.getOption();
- option.series[0].smooth = true;
- chart.setOption(option);
- });
复制代码
2.如果你这个页面中有多个图表,那么你需要将图中红框处的chartname找到,然后替换上。
怎么找呢?
运行页面,在浏览器中按下F12,然后按照图中标识操作即可。
加完js后的页面,你运行起来就可以看到平滑的折线图啦~
简单吧~
有需要的小伙伴可以下载附件试一试呦~
折线图.fgcc
(57.92 KB, 下载次数: 343)
|