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].........完整代码请登录后点击上方下载按钮下载查看

网友评论0