vue调用echart实现雷达图效果代码-html代码-BFW代码库

vue调用echart实现雷达图效果代码

代码语言：html

所属分类：图表

代码描述：vue调用echart实现雷达图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
</head>

<body>
    <div id=app>
        <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data() {
                return {
                    id: '',
                    myChart: null,
                    fenSize: [],
                    themeColor: [],
                    maxNumber: 100, // 标尺最大值
                    tooltipFormat: '{a} <br/>{b} : {c} ({d}%)', // 悬停显示内容格式
                    // 虚构数据
                    chartData: [{
                        value: [89, 98, 79, 85, 86],
                        name: '小爱同学'
                    },
                        {
                            value: [95, 84, 81, 67, 99],
                            name: '李阳同学'
                        },
                        {
                            value: [73, 66, 95, 82, 66],
                            name: '老王同学'
                        },
                        {
                            value: [65, 84, 67, 81, 80],
                            name: '张亮同学'
                        }]
                }
            },
            computed: {},
            methods: {
                // 动态计算标尺数值
                getFenSize (maxValue) {
                    let a = Math.ceil(maxValue/5);
                    for (let i = 1; i < 6; i++) {
                        this.fenSize[i-1] = a*i;
                    }
                },
                drawLine() {
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init(document.getElementById('myChart'))
                    // 绘制图表
                    myChart.setOption({
                        // 工具箱
                        toolbox: {
                            show: false, // 是否显示
                            feature: {
                                dataView: {
                                    readOnly: true
                                }, // 数据视图
                                saveAsImage: {} // 保存图片
                            }
                        },
                        title: {
                            text: '',
                            // subtext: '雷达图', // 子标题
                            x: 'center'
                        },
                        tooltip: {
                            // 鼠标经过时，提示信息
                            trigger: 'item',
                            // formatter: this.tooltipFormat
                        },
                        // 图例
                        legend: {
                            orient: 'vertical',
                            right: 'right', // 位置，默认右边
                        },
                        // 雷达图
                        radar: {
                            // 中心位置
                            center: ['49%', '55%'],
                            startAngle: 90,
                            radius: '90%', // 半径大小
                            splitNumber: 5,
                            // shape: 'circle',
                            // 边角内容展示样式
                            name: {
                                textStyle: {
                                    color: '#000000',
                                    backgroundColor: '#fff',
                                    borderRadius: 3,
                                    padding: [3, 5]
                                }
                            },
                            axisLabel: {
                                show: false,
 .........完整代码请登录后点击上方下载按钮下载查看