The effect chart is as follows
Instance Code
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title>ECharts</title>
<script src= "Http://libs.baidu.com/jquery/2.0.0/jquery.min.js "><style type= "Text/css" >
Html
Body {
width:100%;
height:100%;
}
</style>
<body>
<!--prepare a DOM--> with size (width and height) for echarts
<div id= "main" style= "WIDTH:495PX; height:250px;margin:100px auto; " ></div>
<!--introduction of--> echarts Single file
<script src= "Echarts-all.js" type= "Text/javascript" charset= "Utf-8" ></script>
<script type= "Text/javascript" >
var option = {//You can go to the official website according to each case different option to write a variety of graphics
Title: {//Header
Text: ' Op system clicks '
},
ToolTip: {//Prompt box, mouse hover interactive information tips
Show:true,
Trigger: ' axis '
},
Legend: {//Legend, with a maximum of one legend per chart
X: ' Center ',
Data: [' ESOP system ', ' VGOP system ']
},
Polar: [{//Polar coordinates
Indicator: [{text: ' Planning department ', max:100},
{text: ' marketing department ', max:100},
{text: ' client department ', max:100},
{text: ' Customer service department ', max:100},
{text: ' Tietong company ', max:100},
{text: ' Other ', max:100}
],
RADIUS:100,
STARTANGLE:120//Change the degree of rotation of the radar chart
}],
Series: [{///driver chart generated data content array, each item in the array is a series of options and data
Name: ' Total clicks ',
Type: ' Radar ',
ItemStyle: {//graphic style, to set the default and accent style (suspended style) of graphics within a chart:
Normal: {
Areastyle: {
Type: ' Default '
}
}
},
Data: [{
Value: [],//externally loaded, and can also be used to load external data via AJAX.
Name: '
}, {
Value: [78,98,90,94,98,37],
Name: ' Vgop system '
}]
}]
};
$ (function () {
OPTION.SERIES[0].DATA[0].VALUE=[12,32,34,53,53,65]; Loading data into
Option.series[0].data[0].name = ' ESOP system ';
var MyChart = echarts.init (document.getElementById (' main '));
Mychart.setoption (option, true); Loading data for a Echarts object
});
</script>
</body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
