zoukankan      html  css  js  c++  java
  • 关于echars中雷达图的一些配置

    近来在写的项目中多次用到了echars,所以总结一下我使用到的echars雷达图的一些基本配置,便于下一次使用。

    使用前研究一下文档就能知道大致的引入用法:

    在页面中先引入echars,这里可以根据需求选择引入文档的类型,

    页面中写入<div id="main" style=" 600px;height:400px; "></div>作为盒子

    js中写入以下代码

    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
    tooltip: {},//提示框组件配置
    radar: {
    shape: 'circle',//是否圆形显示
    splitNumber:3,//分隔段数
    splitArea: {//这是分隔区域的配置
    areaStyle: {
    color: ['rgba(0,0,0,0)']//分隔区域的颜色
    }
    },
    splitLine: {//这是分割线的配置
    lineStyle: {
    color: 'rgba(107,177,243,0.2)'//分割线的颜色
    }
    },
    axisLine:{//坐标轴轴线的配置
    lineStyle:{
    color:'rgba(107,177,243,0.2)'//坐标轴的颜色
    }
    },
    name: {//指示器
    textStyle: {//指示器的样式
    color: '#fff',
    padding: [5, 7]//文字块的内边距
    }
    },
    indicator: [ /雷达图的指示器,用来指定雷达图中的多个变量和最大值
      { name: '销售(sales)', max: 6500},
               { name: '管理(Administration)', max: 16000},
               { name: '信息技术(Information Techology)', max: 30000},
               { name: '客服(Customer Support)', max: 38000},
               { name: '研发(Development)', max: 52000},
               { name: '市场(Marketing)', max: 25000}
    ]
    },
    series: [{//图形属性
    type: 'radar',
    symbol:'circle',
    areaStyle: {normal: { //区域填充样式
    color:'#1890FF',
    opacity:'0.6'
    }},
    itemStyle:{ //折线拐点标志的样式
    color:'#1890FF',
    },
    lineStyle:{//线条样式
    },
    data : [ //实际的数据
    {
    value : [4300, 10000, 28000, 35000, 50000, 19000],
    },
    ]
    }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  • 相关阅读:
    Datazen地图Chart自定义数据
    Datazen地图Chart介绍
    TFS Express backup and restore
    [BI项目记]-TFS Express备份和恢复
    [BI项目记]-新任务处理
    [BI项目记]-新任务创建
    Datazen图表创建和发布
    开闭原则(OCP)
    Fragment XXX not attached to Activity
    问题解决:Fragment not attached to Activity
  • 原文地址:https://www.cnblogs.com/gfrs/p/9585474.html
Copyright © 2011-2022 走看看