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: '雷达图', // 子标题
                .........完整代码请登录后点击上方下载按钮下载查看