zoukankan      html  css  js  c++  java
  • H5--图表操作--雷达图

    html:======

     <div id="container2" style=" 100%;height: 300px;margin-bottom: 10px"></div>

    js:=============================== start   ===================

    function allradar(data,array){
    var dom = document.getElementById("container2");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
    color: ['#ED7374', '#45B459', '#3585BA'],
    // ED73374 45B459 3585BA
    tooltip: {},
    legend: {
    show:false,
    width :255,
    height:430,
    data: ['',' ',' ',' ']
    },
    radar: {
    splitNumber: 5,
    splitArea: {
    areaStyle: {
    color: ['#ccc','#fff', '#ccc', '#fff', '#ccc']
    }
    },
    name: {
    formatter: function (value, indicator) {
    return value.substr(0,2) +' ' + value.substr(2,4);
    },
    textStyle: {
    color: '#000',
    fontSize: 12,
    borderRadius: 3,
    padding: [3, 5]
    }
    },
    radius :'50%',
    indicator: [
    { name: '金融'},
    { name: '资产'},
    { name: '消费'},
    { name: '行为'},
    { name: '生活'}
    ]
    },
    series: [{
    name: '预算 vs 开销(Budget vs spending)',
    type: 'radar',
    // areaStyle: {normal: {}},
    // itemStyle: {normal: {areaStyle: {type: 'default'}}},
    data : [

    {
    value :data7,
    color:'#fff',
    name : '7天'
    },
    {
    value : data90,
    color:'#fff',
    name : '90天'
    },
    {
    value : data180,
    color:'#fff',
    name : '180天'
    }
    ]
    }]
    };
    if (option && typeof option === "object") {
    myChart.setOption(option, true);
    }
    }

    js:=============================== END  ===================

  • 相关阅读:
    arduino编程基础之--程序 元素
    arduino编程基础之--环境搭建
    C语言高手之路--目录
    生活中的数据结构
    Manjaro-KDE配置全攻略转
    多线程程序的奇怪问题记录
    manjaro安装openmv ide
    Linux进程数据结构详解
    Linux ps aux指令詳解--转
    记一次粗心大意的代码错误
  • 原文地址:https://www.cnblogs.com/lipuqing180906/p/10313529.html
Copyright © 2011-2022 走看看