DEVHIDE
Login Or Sign up

ECharts 5 Radar Chart as Configurable Function

1k Views Asked by At

I'm trying to get an example of an eCharts 5 chart as a configurable function

I want to be able to pass in data + Id's to plot in multiple containers without repeating code

(Currently transitioning from d3.js to eCharts and not the best at JS in general so apologies for my stupidity)

The example seems below seems to fail because of a 'Uncaught TypeError: Cannot read property 'getAttribute' of null'

I interpreted that as the chart attempting to be drawn before the DOM is loaded, so I added the window.onload as a shot in the dark "fix"

Currently no errors, but no plots, so my "fix" is probably way off

Thanks for your time + suggestions

https://codepen.io/kml-projects/pen/abwRwEb

UPDATE: This is a working bar chart example -- will be tinkering with this and post a solution if I find one

https://codepen.io/kml-projects/pen/OJgBaQx

function createChart(divId,data) {


var myChart = echarts.init(document.getElementById(divId));

var app = {};

var option;

option = {
  title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      data: [
        {
          value: data,
        },
      ]
    }
  ]
};

    myChart.setOption(option);
};

var data1 = [4200, 3000, 20000, 35000, 50000, 18000];

var data2 = [5000, 14000, 28000, 26000, 42000, 21000];


window.onload = function () { 

createChart('main', data1 );
createChart('main-2', data2 );
};
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%"></div>


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
       
 

<div id="main" style="width: 600px;height:400px;"></div>

<div id="main-2" style="width: 600px;height:400px;"></div>
    </body>
</html>

javascript html echarts configurable
Original Q&A
1

There are 1 best solutions below

0
datavizard On BEST ANSWER

Figured it out

var app = {};


dataI = [62, 86, 70, 62, 40, 82, 95, 72, 60, 78];


function createRadarChart(divId,dataI) {

var myChart = echarts.init(document.getElementById("container"));

MPVI = {
    // title: {
    //     text: 'title',
    //     left: 'center'
    // },
    // legend: {
    //     data: ['item1', 'item2','item3']
    // },
    // tooltip: {

    //     // enterable: true,
    //     trigger: 'item',
    //     triggerOn: 'mousemove',
    //     formatter: function (params) {
        
    //     return `${params.name}`;}},


    radar: {
        indicator: [
        { name: 'Aesthetics', max: 100}, // 62
        { name: 'Affiliation', max: 100}, // 86 
        { name: 'Altruistic', max: 100}, // 70
        { name: 'Commerce', max: 100}, // 62 
        { name: 'Hedonism', max: 100}, // 40
        { name: 'Power', max: 100}, // 82
        { name: 'Recognition', max: 100}, // 95
        { name: 'Science', max: 100}, // 72
        { name: 'Security', max: 100}, // 60
        { name: 'Tradition', max: 100}, // 78
        ],
        name: {
            textStyle: {
                color: 'black',
                fontSize: 13,
                fontFamily:'sans-serif',
            }
        },
    },

    series: [{
        name: '(MPVI)',
        type: 'radar',
        center: ['25%', '100%'],
        data: [
            {
                value: dataI,
                name: '(MPVI)',
                symbol: 'diamond',
                symbolSize: 25,
                itemStyle: { normal: { color: '#ffffff' }, }, },
        ],
        emphasis: {
                    areaStyle: {
                        color: 'rgba(255,255,255,0.5)'
                    }},

        label: {
                        show: true,
                        formatter: function (params) {
                            return params.value;
                        }
                    },
        itemStyle: {
            borderWidth: 10 },
        lineStyle: {
                width: 4,
                shadowColor: 'rgba(0,0,0,0.5)',
                shadowBlur: 10,
                shadowOffsetY: 8
            },

    },{
        name: 'LOW',
        type: 'radar',
        center: ['25%', '100%'],
        data: [
            {
                value: [35,35,35,35,35,35,35,35,35,35,35,35,35,35],
                name: 'LOW',
                symbol: 'none',
                symbolSize: 10,
                itemStyle: { normal: { color: ' rgb(220,20,60,0.2)' }, }, },
            
        ],
        emphasis: {
                    areaStyle: {
                        color: 'rgb(220,20,60,0.2)'
                    }},
        areaStyle: {
                        color: 'rgb(220,20,60,0.2)'
                    },
        itemStyle: {
            borderWidth: 10 },
        lineStyle: {
                width: 4,

            }

    },{
        name: 'AVERAGE',
        type: 'radar',
        center: ['25%', '100%'],
        data: [
            {
                value: [75,75,75,75,75,75,75,75,75,75,75,75],
                name: 'AVERAGE',
                symbol: 'none',
                symbolSize: 10,
                itemStyle: { normal: { color: ' rgb(240,190,84,0.2)' }, }, },
            
        ],
        emphasis: {
                    areaStyle: {
                        color: 'rgb(240,190,84,0.2)'
                    }},
        areaStyle: {
                        color: 'rgb(240,190,84,0.2)'
                    },
        itemStyle: {
            borderWidth: 10 },
        lineStyle: {
                width: 4,
            }

    },{
        name: 'HIGH',
        type: 'radar',
        center: ['25%', '100%'],
        data: [
            {
                value: [100,100,100,100,100,100,100,100,100,100,100,100,],
                name: 'HIGH',
                symbol: 'none',
                symbolSize: 10,
                itemStyle: { normal: { color: ' rgb(60,179,113,0.1)' }, }, 
            },
            
        ],
        emphasis: {
                    areaStyle: {
                        color: 'rgb(60,179,113,0.1)'
                    }},

        itemStyle: {
            borderWidth: 10 },
        areaStyle: {
                        color: 'rgb(60,179,113,0.1)'
                    },
        lineStyle: {
                width: 4,
            }

    },
],
    
};

myChart.setOption(MPVI);

}

createRadarChart("container",dataI);
<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/en/editor.html?c=radar
-->
<!DOCTYPE html>

<style>

.button {
  border: none;
  color: white;
  padding: 3px 66px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 0px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white; 
  color: #16AEBB; 
  border: 2px solid #16AEBB;
}

.button1:hover {
  background-color: #16AEBB;
  color: white;
}

span {
    font-family: 'Open Sans', sans-serif;
}

h2 {
    font-variant: small-caps;
    color:#ffffff;
    height: 40px;
    background-color: #bae2e6;
}




</style>
<html style="height: 100%">

    <body style="height: 100%; margin: 0" id="eChartOne">
        
        <div id="container" style="height: 80%; width:80%; align:center;"></div>


      
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
        <!-- Uncomment this line if you want to dataTool extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use gl extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
        -->
        <!-- Uncomment this line if you want to echarts-stat extension
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
        -->
        <!-- Uncomment this line if you want to use map
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
        -->
        <!-- Uncomment these two lines if you want to use bmap extension
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
        -->


    </body>
</html>

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in ECHARTS

Related Questions in CONFIGURABLE

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.