<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0;background: #2d4877">
<div id="container" style="width:800px;height: 600px;margin: 100px auto;"></div>
<script type="text/javascript" src="../echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = null;
option = {
title: { //圖表標題
text: '世界人口總量',
textStyle:{
color:'#ddd', //顏色
fontSize:16, //大小
fontWeight:'normal', //粗細
// fontFamily:'Microsoft yahei', //字體
},
},
tooltip: { //懸浮框 show 的默認值是true
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['2011年', '2012年']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine:{ //圖表中背景網格線
show:false
},
axisLabel: { //X軸文字樣式 詳情：https://echarts.baidu.com/option.html#xAxis.axisLabel
show: true,
textStyle: {
color: '#faf',
fontSize:'16'
}
},
axisLine:{ //X軸座標軸的樣式 詳情：https://echarts.baidu.com/option.html#xAxis.axisLine
lineStyle:{
color:'#1283C4',
width:2,
}
},
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
axisLabel: { //Y軸文字樣式
show: true,
textStyle: {
color: '#aff'
}
},
axisLine:{ //Y軸座標軸的樣式
lineStyle:{
color:'#fff',
width:2,
}
},
axisTick:{ //刻度尺是否朝內， 默認值false 是朝外的
inside:true
},
data: ['巴西','印尼','美國','印度','中國','世界人口(萬)']
},
series: [
{
name: '2019年',
type: 'bar', //跟柱形圖有關的大部分都在這裏查： https://echarts.baidu.com/option.html#series-bar.type
barWidth : 30, //柱行的寬度!!!
itemStyle:{ //只列舉幾個常用的，詳細的參考https://echarts.baidu.com/option.html#series-bar.itemStyle
normal:{
color:"#12C48B", //柱行顏色
borderColor:"#F5460F", //柱行邊框顏色，
borderWidth:2,
label:{ //數值是否直接顯示在表格中， 這個要注意版本問題，老一點的版本寫在這裏，
show:true,
}
}
},
data: [18203, 23489, 29034, 104970, 131744, 630230],
// label:{ //數值是否直接顯示在表格中， 這個要注意版本問題，新的版本寫在這裏，
// show:true,
// position:"right",
// fontWeight:"bold",
// fontSize:25,
// color:"#fff"
// }
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
echarts 柱行圖 詳細設置
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
【echarts折線圖】詳解 一、 折線效果 && 折線點效果
備忘： 關於折線圖的 數據折線顯示更多配置： https://echarts.baidu.com/option.html#series-line <script> option = { visualM
EChart 設置折線圖圓角
EChart 設置折線圖圓角: 只需要在series中設置"barBorderRadius": 0 即可. "series": [ { "name": "seriesName", "item
EChart 3.0 設置Y軸反轉
注意: 這是3.0以後新加的屬性! EChart 設置Y軸反轉,只需要將 yAxis 的 inverse 設爲 true 即可: yAxis : [ { inverse:true, type
ECHART思維導圖插入圖片
默認是思維導圖的都是文字 myChart.showLoading(); var data = { "name": "flare", "children": [ { "name":