[echarts官网]echarts实现雷达图简单示例

更新时间:2019-12-02    来源:php常用代码    手机版     字体:

【www.bbyears.com--php常用代码】

效果图如下

实例代码



   
    ECharts
   <script src="</script">http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   


   
   
   
    <script src="echarts-all.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        var option = { //可以去官网上根据每个案例不同的option去写各种图形
            title: {   //标题
                text: "OP系统点击量"
            },
            tooltip: {   //提示框,鼠标悬浮交互时的信息提示
                show:true,
                trigger: "axis"
            },
            legend: {    //图例,每个图表最多仅有一个图例
                x: "center",
                data: ["ESOP系统", "VGOP系统"]
            },
            polar: [{    //极坐标
                indicator: [{text: "计划部",max: 100},
                            {text: "市场部",max: 100},
                            {text: "政企客户部",max: 100},
                            {text: "客户服务部",max: 100},
                            {text: "铁通公司",max: 100},
                            {text: "其他",max: 100}
                           ],
                radius: 100,     
                startAngle: 120   // 改变雷达图的旋转度数
            }],
            
            series: [{         // 驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据
                name: "总点击量",
                type: "radar",
                itemStyle: {//图形样式,可设置图表内图形的默认样式和强调样式(悬浮时样式):
                    normal: {
                        areaStyle: {
                            type: "default"
                        }
                    }
                },
                data: [{
                    value: [],      //外部加载,也可以通过ajax去加载外部数据。
                    name: ""      
                }, {
                    value: [78,98,90,94,98,37],
                    name: "VGOP系统"
                }]
            }]
        };
        $(function() {
            option.series[0].data[0].value=[12,32,34,53,53,65];  // 加载数据到data中
            option.series[0].data[0].name ="ESOP系统";
            var myChart = echarts.init(document.getElementById("main")); 
            myChart.setOption(option, true);   //为echarts对象加载数据
        });
    </script>

本文来源:http://www.bbyears.com/jiaocheng/81830.html