課程
/前端開發(fā)
/JavaScript
/Echarts3.0入門基礎(chǔ)與實(shí)戰(zhàn)
地圖上怎樣畫出柱狀圖
2018-06-26
源自：Echarts3.0入門基礎(chǔ)與實(shí)戰(zhàn)
正在回答
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="utf-8">
? ?<title>ECharts</title>
? ?<!-- 引入 echarts.js -->
? ?<script src="echarts.min.js"></script>
</head>
<body>
? ?
? ?<div id="main" style="width:900px;height: 600px;"></div>
? ? ? ?
? ? ? ?<script>
var myChart = echarts.init(document.getElementById('main'));
var ? option = {
backgroundColor:'#2a3958',
title: {
textColor:'#fff',
text:'今天',
x:'center',
y:'3%',
// textAlign:'left'
textStyle:{//標(biāo)題內(nèi)容的樣式
color:'#fff',//京東紅
fontStyle:'normal',//主標(biāo)題文字字體風(fēng)格，默認(rèn)normal，有italic(斜體),oblique(斜體)
fontWeight:"lighter",//可選normal(正常)，bold(加粗)，bolder(加粗)，lighter(變細(xì))，100|200|300|400|500...
fontFamily:"san-serif",//主題文字字體，默認(rèn)微軟雅黑
fontSize:18//主題文字字體大小，默認(rèn)為18px
},
// 工具箱
toolbox: {
// show: true,
feature:{
saveAsImage:{
show:true,
x:'center'
}
// 圖例
// legend: {
// ? ? data:['今天']
// },
// x軸
xAxis:{
data:['襯衫','羊毛衫','襯衫','羊毛衫','襯衫','羊毛衫']
yAxis:{},
// 數(shù)據(jù)
series:[{
name:'銷量',
type:'bar',
data:[5,20,36,10,20,36]
}]
};
myChart.setOption(option);
</script>
</body>
</html>
這份代碼拿去用
舉報(bào)
Echarts3.0入門視頻教程，帶你領(lǐng)略高逼格數(shù)據(jù)可視化的魅力
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購(gòu)課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2018-08-06
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="utf-8">
? ?<title>ECharts</title>
? ?<!-- 引入 echarts.js -->
? ?<script src="echarts.min.js"></script>
</head>
<body>
? ?
? ?<div id="main" style="width:900px;height: 600px;"></div>
? ?
? ? ? ?
? ? ? ?<script>
var myChart = echarts.init(document.getElementById('main'));
var ? option = {
backgroundColor:'#2a3958',
title: {
textColor:'#fff',
text:'今天',
x:'center',
y:'3%',
// textAlign:'left'
textStyle:{//標(biāo)題內(nèi)容的樣式
color:'#fff',//京東紅
fontStyle:'normal',//主標(biāo)題文字字體風(fēng)格，默認(rèn)normal，有italic(斜體),oblique(斜體)
fontWeight:"lighter",//可選normal(正常)，bold(加粗)，bolder(加粗)，lighter(變細(xì))，100|200|300|400|500...
fontFamily:"san-serif",//主題文字字體，默認(rèn)微軟雅黑
fontSize:18//主題文字字體大小，默認(rèn)為18px
},
},
// 工具箱
toolbox: {
// show: true,
feature:{
saveAsImage:{
show:true,
x:'center'
}
}
},
// 圖例
// legend: {
// ? ? data:['今天']
// },
// x軸
xAxis:{
data:['襯衫','羊毛衫','襯衫','羊毛衫','襯衫','羊毛衫']
},
yAxis:{},
// 數(shù)據(jù)
series:[{
name:'銷量',
type:'bar',
data:[5,20,36,10,20,36]
}]
};
myChart.setOption(option);
</script>
? ? ? ?
</body>
</html>
這份代碼拿去用