用echarts展现雷达图的定制

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>echarts雷达图</title>

     <link rel="shortcut icon" href="favicon.png">

     <style>

         .main {

             height: 330px;

             overflow: hidden;

             padding : 10px;

             margin-bottom: 10px;

         }

     </style>

 </head>

 <body>

     <div id="main" class="main"></div>

     <script src="echarts.source.js"></script>

     <script>

         var myChart;

         var domMain = document.getElementById('main');

         var option = {

             title : {

                 text: '评估得分',

                 subtext: '评估得分mini',

                 show: false

             },

             tooltip : {

                 trigger: 'axis'

             },

             legend: {

                 x : 'center',

                 data:['评估得分'],

                 show: false

             },

             toolbox: {

                 show : false,

                 feature : {

                     mark : {show: false},

                     dataView : {show: false, readOnly: false},

                     restore : {show: false},

                     saveAsImage : {show: false}

                 }

             },

             calculable : false,

             polar : [

                 {

                     indicator : [

                         {text : '个人情况\n满分15', max  : 15},

                         {text : '信用记录\n满分35', max  : 35},

                         {text : '经济实力\n满分30', max  : 30},

                         {text : '稳定情况\n满分15', max  : 15},

                         {text : '贷款情况\n满分25', max  : 25},

                         {text : '工作情况\n满分30', max  : 30},

                         {text : '家庭情况\n满分15', max  : 15},

                         {text : '保障情况\n满分15', max  : 15},

                         {text : '其他\n满分20', max  : 20}

                     ],

                     radius : 130

                 }

             ],

             series : [

                 {

                     name: '评估得分',

                     type: 'radar',

                     itemStyle: {

                         normal: {

                             areaStyle: {

                                 type: 'default'

                             }

                         }

                     },

                     data : [

                         {

                             value : [10,22,20,10,16,15,6,8,15],

                             name : '评估得分',

                             itemStyle: {

                                 normal: {

                                     color: '#2c87e5',

                                     label: {

                                         show: true,

                                         formatter:function(params) {

                                             return params.value;

                                         }

                                     },

                                     areaStyle: {

                                         color: 'rgba(44,135,229,0.3)'

                                     }

                                 }

                             }

                         }

                     ]

                 }

             ]

         };

         myChart = echarts.init(domMain);

         myChart.setOption(option, true)

     </script>

 </body>

 </html>

echarts雷达图的更多相关文章

  1. echarts 雷达图的个性化设置

    echarts 雷达图的个性化设置 function test() { let myChart = echarts.init(document.getElementById('levelImage') ...

  2. echarts雷达图点击事件

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts配置问题:https://www.douban.com/note/509404582/ <!doctype ...

  3. echarts雷达图点击事件 包含（2.x，3.85，4.02）测试

    最近看见别人问的问题,点击雷达图的拐点,获取点击数据的问题,直接上代码. echarts 2x 的点击事件 echarts配置问题:https://www.douban.com/note/509404 ...

  4. ECharts 雷达图怎么在类目值下面显示数值

    需要实现的效果: 官网里面的demo显示数值,都是在拐点处: [解决] 1.只显示类目 <div id="mychart" style="width:300px;h ...

  5. ECharts雷达图详细配置说明

    雷达图表配置说明: // 指定图表的配置项和数据 var option = { backgroundColor: 'rgba(204,204,204,0.7 )', // 背景色,默认无背景 rgba ...

  6. Echarts数据可视化series-radar雷达图，开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  7. echarts细节的修改（2）：矩形数图，柱状图，折线图，雷达图等

    1.矩形数图的配置,是直接拿饼图的配置 然后将type换成treemap. 修改类型 option.series.type = 'treemap'; 关闭面包屑导航 option.series.bre ...

  8. 关于echarts生成雷达图的一些参数介绍

    export const industryFactorOption = { title: { text: '雷达图', textStyle: { color: 'rgba(221,221,221,1) ...

  9. 【带着canvas去流浪（6）】绘制雷达图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文 ...

随机推荐

  1. C#-datagridview隐藏行头

    在进行datagridview的设置的过程中,常常会遇到需要设定datagridview1的行头显示,这就需要用到datagridview的属性: RowHeadersVisible属性设置为fals ...

  2. go strings 常用的几个函数

    fmt.Println(strings.ToUpper("hello world")) //转换为大写    fmt.Println(strings.ToLower("H ...

  3. 在饼图上显示百分比值(报表生成器和 SSRS)

    在饼图上显示百分比值(报表生成器和 SSRS) 默认情况下,图例中显示了类别来标识每个值. 如果使用了类别标签标记饼图,则可能希望在图例中显示百分比. 注意 在 SQL Server Data Too ...

  4. 转--23种设计模式的搞笑解释(后续放逐一C++解释版本)

    创建型模式 1.FACTORY —追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了.麦当劳和肯德 ...

  5. VMware：虚拟机磁盘空间不足怎么办

    前言: 虚拟机里一般我们用的虚拟磁盘,在电脑上是一个或多个文件,随着软件和数据的增多,有时也会提示磁盘空间不足. 那么,虚拟机磁盘空间不足如何处理呢?   一:调整磁盘分区大小; 若只是提示相应磁盘分 ...

  6. 正则表达式 之 C#后台应用

    正则表达式在.Net就是用字符串表示,这个字符串格式比较特殊,无论多么特殊,在C#语言看来都是普通的字符串,具体什么含义由Regex类内部进行语法分析. Regex 类 存在于 System.Text ...

  7. Tomcat启动报错org.apache.coyote.AbstractProtocol.init Failed to initialize end point associated with ProtocolHandler ["http-apr-8080"]”

    1.使用netstat查看端口8080的使用情况: netstat -ano | findstr 8080 结果为: 最后一列表示使用8080端口的进程PID,如果返回结果为空则说明没有被使用. 2. ...

  8. c++下new与delete基础用法

    delete 释放new分配的单个对象指针指向的内存 delete[] 释放new分配的对象数组指针指向的内存那么,按照教科书的理解,我们看下下面的代码: ]; delete a; //方式1 del ...

  9. 转:解决OM的Price List输入找不到对应库存的ITEMS的问题

    一,保证Item Validation Organization参数的值一致 Item Validation Organization参数的值是填库存组织,通过这个值,可以分隔OM所能使用的库存Ite ...

  10. js解析XML

    //在当前页面内追加换行标签和指定的HTML内容function w( html ){    $(document.body).append("<br/>" + htm ...