Gitlab centos 跨域 java反射机制 linux创建文件 algorithm uitableview testing vue响应式 vue双向绑定 angularjs教程 swift视频教程 matlab停止运行命令 ceb转换成pdf在线转换 quartz配置 mysql新增用户和权限 python数据 python程序 java的数据结构 linux文档 信息系统项目管理师教程 asp建站系统 苹果滚动截屏 通讯录管理系统 dnf男柔道加点 html5下载 狮子狗皮肤 上单塞拉斯 airdrop是什么 剑灵龙骨卷轴 免费ftp空间 计划任务软件 ps字体描边 抽出滤镜下载 华为杂志锁屏怎么设置 c语言小游戏代码 机箱最佳风道图 cad特性不显示 尾行3存档 在线调色板
当前位置: 首页 > 学习教程  > 编程语言

Antv 雷达图 单层 双层效果图

2020/7/24 11:18:26 文章标签: 测试文章如有侵权请发送至邮箱809451989@qq.com投诉后文章立即删除

雷达图

在这里插入图片描述

import React, { useEffect, useState, useRef } from "react"
import "./chart.less"
import { Chart } from "@antv/g2";
import DataSet from '@antv/data-set';

const Charts = () => {
    const fields = new Map()
    fields.set(1, "产品功能")
    fields.set(2, "服务质量")
    fields.set(3, "项目管理")
    fields.set(4, "实施过程")
    fields.set(5, "整体效果")
    fields.set(6, "专业技能")
    const data = [
        { item: fields.get(1), a: 2 },
        { item: fields.get(2), a: 4 },
        { item: fields.get(3), a: 6 },
        { item: fields.get(4), a: 8 },
        { item: fields.get(5), a: 7 },
        { item: fields.get(6), a: 5 },
    ]
    const [chart, setChart] = useState(null)
    const chartRef = useRef()
    const { DataView } = DataSet;
    const dv = new DataView().source(data);
    // 转化数据  数据格式正好的情况 可以不用 
    dv.transform({
        type: 'fold',
        fields: ['a'], // 展开字段集
        key: 'user', // key字段
        value: 'score', // value字段
    });

    useEffect(() => {
    	// 初始化设置chart
        const chart = new Chart({
            container: 'c8',
            autoFit: true,
            height: 300,
        });
        setChart(() => chart)
    }, [])

    useEffect(() => {
   		// 监听chart  有了之后再渲染  加个监听数据的 可以更新视图
        chart && renderChart()
    }, [chart])

    const renderChart = () => {
        chart.clear()
        chart.data(dv.rows);

        chart.scale('score', {
            min: 0, // 坐标轴的最小值
            max: 10, // 坐标轴的最大值
            tickCount: 6, // 控制坐标轴刻度数量 0-10 不使用这个的话 会变成 0 0.25 0.5 0.75 1
            nice: true // 一般用nice: true 就不用调样式了
        });
        // 控制图形状 大小
        chart.coordinate('polar', {
            radius: 0.8, // 缩放图的比例
        });

        chart.axis('item', {
            line: null,
            tickLine: null,
            grid: {
                line: {
                    style: {
                        lineDash: null,
                    },
                },
            },
            label: {
                style: {
                    fontSize: 14,
                    fill: '#333', // 文本的颜色
                },
                offset: 15 // label文本的偏移量
            }
        });

        chart.axis('score', {
            line: null,
            tickLine: null,
            grid: {
                line: {
                    type: 'line',
                    style: {
                        lineDash: null,
                    },
                },
            },
            label: {
                formatter: () => "" // 隐藏坐标轴的刻度文本 0 2 4 6 8 10 产品需要
            }
        });
		// 设置连线
        chart
            .line()
            .position('item*score')
            .size(2)
		// 设置点
        chart
            .point()
            .position('item*score')
            .shape('circle')
            .size(4)
            .label("score", (score) => {
            	// 点的关联文本 显示分数 并且不旋转
                return {
                    textStyle: {
                        rotate: 0
                    },
                    autoRotate: false,
                    content: score, // 一个坑 上面axis的label用formatter 这里是content
                }
            })
            .style({
                stroke: '#fff',
                lineWidth: 1,
                fillOpacity: 1,
            })
		// 下面设置showTitle: false无效 就用了这种 关闭所有的title
        chart.tooltip({
            showTitle: false,
        })

        chart
            .area()
            .position('item*score')
            .tooltip("score*item", (score, item) => {
                // 不用自定义模板的时候  字段name  value
                return {
                    showTitle: false,
                    // name: `用户${user}`,
                    name: item, // 将title的位置改变
                    value: `${score}分`,
                }
            })
        chart.render();
    }

    return (
        <div className={"chart8"}>
            <div id="c8" ref={chartRef} />
        </div>
    )
}

export default Charts

在这里插入图片描述

 const data = [
        { item: fields.get(1), a: 2, b: 5 },
        { item: fields.get(2), a: 4, b: 7 },
        { item: fields.get(3), a: 6, b: 3 },
        { item: fields.get(4), a: 8, b: 8 },
        { item: fields.get(5), a: 7, b: 2 },
        { item: fields.get(6), a: 5, b: 9 },
    ]
// 修改data数据 增加b
// line point area 增加  .color('user')

        chart
            .line()
            .position('item*score')
            .size(2)
            .color('user')

        chart
            .point()
            .position('item*score')
            .shape('circle')
            .size(4)
            .label("score", (score) => {
                return {
                    textStyle: {
                        rotate: 0
                    },
                    autoRotate: false,
                    content: score,
                }
            })
            .style({
                stroke: '#fff',
                lineWidth: 1,
                fillOpacity: 1,
            })
            .color('user')

        chart.tooltip({
            showTitle: false,
        })

        chart
            .area()
            .position('item*score')
            .tooltip("score*item", (score, item) => {
                // 不用自定义模板的时候  字段name  value
                return {
                    showTitle: false,
                    // name: `用户${user}`,
                    name: item,
                    value: `${score}分`,
                }
            })
            .color('user')

本文链接: http://www.dtmao.cc/news_show_50387.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?