蚂蚁图表 f2 手机端走势图

远程文件引用

 <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.5/vue.global.js"></script>
  <script src="https://gw.alipayobjects.com/os/lib/antv/f2/3.7.0/dist/f2-all.min.js"></script>

html

<!-- 信息传播走势 -->
        <div class="content">
            <div class="content-title">信息传播走势</div>
            <canvas id="spreadChart" style="width:95vw;height:30vh"></canvas>
        </div>

js

spreadEharts() {
                // 信息传播走势
                var name_list = [];
                const data = [{
                        name: "2021-11-01",
                        sales: "45",
                        sort: 0
                    },
                    {
                        name: "2021-11-02",
                        sales: "55",
                        sort: 1
                    },
                    {
                        name: "2021-11-03",
                        sales: "65",
                        sort: 2
                    },
                    {
                        name: "2021-11-04",
                        sales: "55",
                        sort: 3
                    },
                    {
                        name: "2021-11-05",
                        sales: "50",
                        sort: 4
                    },
                    {
                        name: "2021-11-06",
                        sales: "70",
                        sort: 5
                    },
                    {
                        name: "2021-11-07",
                        sales: "70",
                        sort: 6
                    },
                    {
                        name: "2021-11-08",
                        sales: "70",
                        sort: 7
                    }
                ]
                data.map(function (item) {
                    name_list.push(item.name)
                })
                var chart = new F2.Chart({
                    el: 'spreadChart',
                    animate: true
                })
                chart.source(data, {
                    sort: {
                        type: "linear",
                        // 滚动条包含几个
                        min: 0,
                        max: 5,
                        // 传入不同的sort转换对应的名字
                        formatter: function (val) {
                            return name_list[val]
                        }
                    }

                });

                // chart.legend(true);

                chart.tooltip({
                    showCrosshairs: true,
                    showItemMarker: false,
                });

                chart.point().position("sort*sales")
                chart.line().position("sort*sales").shape('smooth').color("#5B8FF9");
                // 按照x轴滑动
                chart.interaction('pan');
                // 定义进度条
                chart.scrollBar({
                    mode: 'x',
                    xStyle: {
                        offsetY: -5
                    }
                });
                chart.render()
            }