<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>各專業報名情況</title>
<script src="https://bbs.csdn.net/topics/Content/echarts.common.min.js"></script>
</head>
<body>
<div id="divEcharts" style="width:800px;height:500px;"></div>
<script type="text/javascript">
option = {
backgroundColor: '#2c343c',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item'
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '各專業報名情況',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: 80, name: 'WEB 開發工程師'},
{value: 20, name: 'UI 設計師'},
{value: 25, name: '大資料軟體工程師'},
{value: 32, name: '新媒體運營'},
{value: 18, name: '移動軟體工程師'},
{value: 26, name: '系統運維工程師'},
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
</script>
</body>
</html>
uj5u.com熱心網友回復：
html沒用過完全不知道格式我就知道內容要放在兩個body之間但是運行到網頁里面除了網頁有個名字剩下一片空白，代碼就是在Echarts的官網上復制下來的然后放進去就是什么都沒有我看同學們也是同樣的操作他們都做出來了
uj5u.com熱心網友回復：
首先<script src="https://bbs.csdn.net/topics/Content/echarts.common.min.js"></script>這個目錄下得有這個js檔案。其次，有問題，按f12查看報錯
uj5u.com熱心網友回復：
其次呢，你這代碼缺內容：在保證echarts.common.min.js 存在的前提下：應該這么寫
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>各專業報名情況</title>
<script src="https://bbs.csdn.net/topics/Content/echarts.common.min.js"></script>
</head>
<body>
<div id="divEcharts" style="width:800px;height:500px;"></div>
<script type="text/javascript">
var option = {
backgroundColor: '#2c343c',
title: {
text: 'Customized Pie',
left: 'center',
top: 20,
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item'
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series: [
{
name: '各專業報名情況',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: 80, name: 'WEB 開發工程師'},
{value: 20, name: 'UI 設計師'},
{value: 25, name: '大資料軟體工程師'},
{value: 32, name: '新媒體運營'},
{value: 18, name: '移動軟體工程師'},
{value: 26, name: '系統運維工程師'},
].sort(function (a, b) { return a.value - b.value; }),
roseType: 'radius',
label: {
color: 'rgba(255, 255, 255, 0.3)'
},
labelLine: {
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
},
smooth: 0.2,
length: 10,
length2: 20
},
itemStyle: {
color: '#c23531',
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};
var ec = echarts.init(document.getElementById('divEcharts'));
ec.setOption(option);
</script>
</body>
只能幫你到這里了！
uj5u.com熱心網友回復：
這黑漆麻烏的
uj5u.com熱心網友回復：
你這個是怎么出來的uj5u.com熱心網友回復：
我應該是目錄那有問題吧轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/254627.html
標籤：HTML(CSS)
上一篇：討論討論，js架構問題
下一篇：請問一下網頁擴展名為VUE，網頁內容中寫<template>里， 這是什么框架，怎么這么奇怪，連日個<HTML>也沒有