antv/f2中组合折线图的使用

最新推荐文章于 2024-05-29 11:09:09 发布

Kratial

最新推荐文章于 2024-05-29 11:09:09 发布

阅读量434

点赞数

分类专栏： antv/f2的使用记录文章标签：前端

本文链接：https://blog.csdn.net/Kratial/article/details/127787906

版权

antv/f2的使用记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

案例代码：（本实例使用的是3.8.8的版本）

window.onload = function () {
    let page = {
        mockData: [
            {id: 1, type: '音乐', value1: 20,value2: 10 },
            {id: 2, type: '视频', value1: -20,value2: 30 },
            {id: 3, type: '杂志', value1: 10,value2: 80 },
            {id: 4, type: '音频', value1: 80,value2: 100 },
            {id: 5, type: '网络', value1: -10,value2: -30 },
        ],
        color: [
            'green',
            'purple'
        ],
        legendItems: [
            {name: '期望传播量',marker: 'circle', fill: 'green'},
            {name: '实际传播量',marker: 'circle', fill: 'purple'}
        ],
        initCharts () {
            // 实例化chart
            let chart = new F2.Chart({
                id: 'box',
                pixelRatio: window.devicePixelRatio // 指定分辨率
            })
            // 载入数据
            chart.source(this.mockData)
            /*
            关于图表的一些配置
            */
           //给字段设置别名(alias)
            chart.scale('value1', {
              alias: '期望传播量'// 字段别名
            });
            chart.scale('value2', {
               alias: '实际传播量' // 字段别名
            });
            // 展示图例（legend）
            chart.legend({
                position: 'left', // 设置图例的显示位置，可设置的值为：'top'、'right'、'bottom'、'left'，分别表示上、右、下、左。默认为 top。
                custom: true, // 当 custom 为 true，表示不使用默认生成的图例，允许用户自定义图例
                items: this.legendItems, // 自定义图例时需要用户自己声明具体的图例项 items
            })
            // 展示提示信息
            chart.tooltip({
                showTitle: true, // 是否展示标题，默认不展示
                triggerOn: [ 'touchstart', 'touchmove' ], // tooltip 出现的触发行为
                triggerOff: 'touchend', // 消失的触发行为，可自定义
                showCrosshairs: true, // 展示辅助线
                crosshairsStyle: {
                    stroke: 'rgba(0, 0, 0, 0.25)',
                    lineWidth: 2
                }, // 配置辅助线的样式
                crosshairsType: 'y',// 辅助线的种类
                layout: 'vertical',
                onShow(obj) {
                }, // tooltip 显示时的回调函数
            })
            // 创建图形语法(第一个面积折线图)
            chart.area().position('type*value1').color(this.color[0])
            chart.line().position('type*value1').color(this.color[0])
            // 创建图形语法（第二个面积折线图)
            chart.area().position('type*value2').color(this.color[1])
            chart.line().position('type*value2').color(this.color[1])
            // 渲染图表
            chart.render()
        }
    }
    page.initCharts()
}