You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
|
<!--
|
|
|
|
|
|
1.ECharts最基本的代码结构
|
|
|
|
|
|
2.x轴数据：['张三'，‘李四’，‘王五’，‘闰土’，‘小明’，‘茅台’，‘二妞’，‘大强’]
|
|
|
|
|
|
3.y轴数据：[88,92,63,77,94,80,72,86]
|
|
|
|
|
|
4.将type的值设置为bar
|
|
|
|
|
|
-->
|
|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<title>Document</title>
|
|
|
|
|
|
<script src="../static/assets/js/echarts.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div style="width: 600px;height: 400px;"></div>
|
|
|
|
|
|
<script>/*var dom = document.getElementById("chart1");
|
|
|
|
|
|
var myChart = echarts.init(dom,'radar');
|
|
|
|
|
|
var app = {};
|
|
|
|
|
|
option = null;
|
|
|
|
|
|
option = {*/
|
|
|
|
|
|
var dom = document.getElementById("chart1");
|
|
|
|
|
|
var myChart = echarts.init(dom,'radar');
|
|
|
|
|
|
var app = {};
|
|
|
|
|
|
option = null;
|
|
|
|
|
|
option = {
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
trigger: 'item'
|
|
|
|
|
|
},
|
|
|
|
|
|
legend: {
|
|
|
|
|
|
top: '5%',
|
|
|
|
|
|
left: 'center'
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
name: 'Access From',
|
|
|
|
|
|
type: 'pie',
|
|
|
|
|
|
radius: ['40%', '70%'],
|
|
|
|
|
|
avoidLabelOverlap: false,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
borderRadius: 10,
|
|
|
|
|
|
borderColor: '#fff',
|
|
|
|
|
|
borderWidth: 2
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
position: 'center'
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
fontSize: '40',
|
|
|
|
|
|
fontWeight: 'bold'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
labelLine: {
|
|
|
|
|
|
show: false
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [
|
|
|
|
|
|
{ value: 1048, name: 'Search Engine' },
|
|
|
|
|
|
{ value: 735, name: 'Direct' },
|
|
|
|
|
|
{ value: 580, name: 'Email' },
|
|
|
|
|
|
{ value: 484, name: 'Union Ads' },
|
|
|
|
|
|
{ value: 300, name: 'Video Ads' }
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
//步骤5：将配置项设置给echarts实例对象
|
|
|
|
|
|
mCharts.setOption(option)
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
|
|
</html>
|
