1、基本柱狀圖
// 指定圖表的配置項和數據
var option = {
// ---- 標題 -----
title: {
text: '主標題',
textStyle: {
color: 'red'
},
subtext: '副標題',
subtextStyle: {
color: 'blue'
},
padding: [0, 0, 10, 100] // 位置
},
// ---- legend ----
legend: {
type: 'plain', // 圖列類型，默認為 'plain'
top: '1%', // 圖列相對容器的位置 top\bottom\left\right
selected: {
// '銷量': true // 圖列選擇，圖形加載出來會顯示選擇的圖列，默認為true
},
textStyle: { // 圖列內容樣式
color: '#fff', // 字體顏色
backgroundColor: 'black' // 字體背景色
},
tooltip: { // 圖列提示框，默認不顯示
show: true,
color: 'red'
},
data: [ // 圖列內容
{
name: '銷量',
icon: 'circle',
textStyle: {
color: 'red', // 單獨設置某一個圖列的顏色
backgroundColor: '#fff' // 單獨設置某一個圖列的字體背景色
}
}
]
},
// --- 提示框 ----
tooltip: {
show: true, // 是否顯示提示框，默認為true
trigger: 'item', // 數據項圖形觸發
axisPointer: { // 指示樣式
type: 'shadow',
axis: 'auto'
},
padding: 5,
textStyle: { // 提示框內容的樣式
color: '#fff'
}
},
// ---- gird區域 ---
gird: {
show: false, // 是否顯示直角坐標系網格
top: 80, // 相對位置 top\bottom\left\right
containLabel: false, // gird 區域是否包含坐標軸的刻度標簽
tooltip: {
show: true,
trigger: 'item', // 觸發類型
textStyle: {
color: '#666'
}
}
},
// ------ X軸 ------
xAxis: {
show: true, // 是否顯示
position: 'bottom', // x軸的位置
offset: 0, // x軸相對於默認位置的偏移
type: 'category', // 軸類型， 默認為 'category'
name: '月份', // 軸名稱
nameLocation: 'end', // 軸名稱相對位置
nameTextStyle: { // 坐標軸名稱樣式
color: 'red',
padding: [5, 0, 0, -5]
},
nameGap: 15, // 坐標軸名稱與軸線之間的距離
nameRotate: 0, // 坐標軸名字旋轉
axisLine: { // 坐標軸 軸線
show: true, // 是否顯示
symbol: ['none', 'arrow'], // 是否顯示軸線箭頭
symbolSize: [8, 8], // 箭頭大小
symbolOffset: [0, 7], // 箭頭位置
// ------ 線 ---------
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
axisTick: { // 坐標軸 刻度
show: true, // 是否顯示
inside: true, // 是否朝內
length: 3, // 長度
lineStyle: { // 默認取軸線的樣式
color: 'red',
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐標軸標簽
show: true, // 是否顯示
inside: false, // 是否朝內
rotate: 0, // 旋轉角度
margin: 5, // 刻度標簽與軸線之間的距離
color: 'red' // 默認取軸線的顏色
},
splitLine: { // gird區域中的分割線
show: false, // 是否顯示
lineStyle: {
// color: 'red',
// width: 1,
// type: 'solid'
}
},
splitArea: { // 網格區域
show: false // 是否顯示，默認為false
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
},
// ------ y軸 ----------
yAxis: {
show: true, // 是否顯示
position: 'left', // y軸位置
offset: 0, // y軸相對於默認位置的偏移
type: 'value', // 軸類型，默認為 ‘category’
name: '銷量', // 軸名稱
nameLocation: 'end', // 軸名稱相對位置value
nameTextStyle: { // 坐標軸名稱樣式
color: '#fff',
padding: [5, 0, 0, 5] // 坐標軸名稱相對位置
},
nameGap: 15, // 坐標軸名稱與軸線之間的距離
nameRotate: 270, // 坐標軸名字旋轉
axisLine: { // 坐標軸 軸線
show: true, // 是否顯示
// ----- 箭頭 -----
symbol: ['none', 'arrow'], // 是否顯示軸線箭頭
symbolSize: [8, 8], // 箭頭大小
symbolOffset: [0, 7], // 箭頭位置
// ----- 線 -------
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
axisTick: { // 坐標軸的刻度
show: true, // 是否顯示
inside: true, // 是否朝內
length: 3, // 長度
lineStyle: {
color: 'red', // 默認取軸線的顏色
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐標軸的標簽
show: true, // 是否顯示
inside: false, // 是否朝內
rotate: 0, // 旋轉角度
margin: 8, // 刻度標簽與軸線之間的距離
color: 'red', // 默認軸線的顏色
},
splitLine: { // gird 區域中的分割線
show: true, // 是否顯示
lineStyle: {
color: '#666',
width: 1,
type: 'dashed'
}
},
splitArea: { // 網格區域
show: false // 是否顯示，默認為false
}
},
// ------- 內容數據 -------
series: [
{
name: '銷量', // 序列名稱
type: 'bar', // 類型
legendHoverLink: true, // 是否啟用圖列 hover 時的聯動高亮
label: { // 圖形上的文本標簽
show: false,
position: 'insideTop', // 相對位置
rotate: 0, // 旋轉角度
color: '#eee'
},
itemStyle: { // 圖形的形狀
color: 'blue',
barBorderRadius: [18, 18, 0 ,0]
},
barWidth: 20, // 柱形的寬度
barCategoryGap: '20%', // 柱形的間距
data: [3000, 4000, 4200, 4500, 6000, 5600, 4500, 5020, 4500, 5400, 4300, 1200]
}
]
};
html代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="./echarts4.x.js"></script>
<script type="text/javascript" src="./zhuzhangtu.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;margin: 0 auto"></div>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
2、折疊柱狀圖
// 指定圖表的配置項和數據
option = {
title: {
text: "",
textStyle: {
color: "#436EEE",
fontSize: 17
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data:[
{
name: '政策法規',
icon: 'circle',
textStyle: {
color: 'red', // 單獨設置某一個圖列的顏色
backgroundColor: '#fff' // 單獨設置某一個圖列的字體背景色
}
},
{
name: '經辦規程',
icon: 'circle',
textStyle: {
color: 'red', // 單獨設置某一個圖列的顏色
backgroundColor: '#fff' // 單獨設置某一個圖列的字體背景色
}
},
{
name: '業務場景模擬',
icon: 'circle',
textStyle: {
color: 'red', // 單獨設置某一個圖列的顏色
backgroundColor: '#fff' // 單獨設置某一個圖列的字體背景色
}
},
{
name: '常見問題',
icon: 'circle',
textStyle: {
color: 'red', // 單獨設置某一個圖列的顏色
backgroundColor: '#fff' // 單獨設置某一個圖列的字體背景色
}
}
]
},
//x軸顯示
xAxis: {
data: [20180611, 20180612, 20180613, 20180614, 20180615, 20180616, 20180617],
show: true, // 是否顯示
position: 'bottom', // x軸的位置
offset: 0, // x軸相對於默認位置的偏移
type: 'category', // 軸類型， 默認為 'category'
name: '月份', // 軸名稱
nameLocation: 'end', // 軸名稱相對位置
nameTextStyle: { // 坐標軸名稱樣式
color: 'red',
padding: [5, 0, 0, -5]
},
nameGap: 15, // 坐標軸名稱與軸線之間的距離
nameRotate: 0, // 坐標軸名字旋轉
axisLine: { // 坐標軸 軸線
show: true, // 是否顯示
symbol: ['none', 'arrow'], // 是否顯示軸線箭頭
symbolSize: [8, 8], // 箭頭大小
symbolOffset: [0, 7], // 箭頭位置
// ------ 線 ---------
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
axisTick: { // 坐標軸 刻度
show: true, // 是否顯示
inside: true, // 是否朝內
length: 3, // 長度
lineStyle: { // 默認取軸線的樣式
color: 'red',
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐標軸標簽
show: true, // 是否顯示
inside: false, // 是否朝內
rotate: 0, // 旋轉角度
margin: 5, // 刻度標簽與軸線之間的距離
color: 'red' // 默認取軸線的顏色
},
splitLine: { // gird區域中的分割線
show: false, // 是否顯示
lineStyle: {
// color: 'red',
// width: 1,
// type: 'solid'
}
},
splitArea: { // 網格區域
show: false // 是否顯示，默認為false
},
// show: false
},
// ------ y軸 ----------
yAxis: {
show: true, // 是否顯示
position: 'left', // y軸位置
offset: 0, // y軸相對於默認位置的偏移
type: 'value', // 軸類型，默認為 ‘category’
name: '銷量', // 軸名稱
nameLocation: 'end', // 軸名稱相對位置value
nameTextStyle: { // 坐標軸名稱樣式
color: '#fff',
padding: [5, 0, 0, 5] // 坐標軸名稱相對位置
},
nameGap: 15, // 坐標軸名稱與軸線之間的距離
nameRotate: 270, // 坐標軸名字旋轉
axisLine: { // 坐標軸 軸線
show: true, // 是否顯示
// ----- 箭頭 -----
symbol: ['none', 'arrow'], // 是否顯示軸線箭頭
symbolSize: [8, 8], // 箭頭大小
symbolOffset: [0, 7], // 箭頭位置
// ----- 線 -------
lineStyle: {
color: 'blue',
width: 1,
type: 'solid'
}
},
axisTick: { // 坐標軸的刻度
show: true, // 是否顯示
inside: true, // 是否朝內
length: 3, // 長度
lineStyle: {
color: 'red', // 默認取軸線的顏色
width: 1,
type: 'solid'
}
},
axisLabel: { // 坐標軸的標簽
show: true, // 是否顯示
inside: false, // 是否朝內
rotate: 0, // 旋轉角度
margin: 8, // 刻度標簽與軸線之間的距離
color: 'red', // 默認軸線的顏色
},
splitLine: { // gird 區域中的分割線
show: true, // 是否顯示
lineStyle: {
color: '#666',
width: 1,
type: 'dashed'
}
},
splitArea: { // 網格區域
show: false // 是否顯示，默認為false
}
},
tooltip: {
position: ['50%', '50%'],
padding: [5, 10]
},
grid: {
left: '0%'
},
series: [
{
name: "政策法規",
type: "bar",
stack: "業務",//折疊顯示
data: ["87.54", "88.54", "90", "91", "92", '95', '100'],
barWidth : 25,
//顯示顏色
itemStyle:{
normal:{color:"blue"}
},
label: { // 圖形上的文本標簽
show: false,
position: 'insideTop', // 相對位置
rotate: 0, // 旋轉角度
color: '#eee'
}
},
{
name: "經辦規程",
type: "bar",
stack: "業務",
data: ["87.54", "88.54", "90", "91", "92", '95', '100'],
barWidth : 25,
label: { // 圖形上的文本標簽
show: false,
position: 'insideTop', // 相對位置
rotate: 0, // 旋轉角度
color: '#eee'
},
itemStyle:{
normal:{color:"#FF8849"}
}
},
{
name: "業務場景模擬",
type: "bar",
stack: "業務",
data: ["87.54", "88.54", "90", "91", "92", '95', '100'],
barWidth : 25,
label: { // 圖形上的文本標簽
show: false,
position: 'insideTop', // 相對位置
rotate: 0, // 旋轉角度
color: '#eee'
},
itemStyle:{
normal:{color:"#3FBB49"}
}
},
{
name: "常見問題",
type: "bar",
stack: "業務",
data: ["87.54", "88.54", "90", "91", "92", '95', '100'],
barWidth : 25,
label: { // 圖形上的文本標簽
show: false,
position: 'insideTop', // 相對位置
rotate: 0, // 旋轉角度
color: '#eee'
},
itemStyle:{
normal:{color:"#56C4A5"}
},
barCateGoryGap: 15
}
]
};
html調用代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="./echarts4.x.js"></script>
<script type="text/javascript" src="./histogram.js"></script>
</head>
<body>
<!-- 為ECharts准備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;margin: 0 auto"></div>
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
myChart.on('click', function (params) {
// 控制台打印數據的名稱
console.log(params);
});
</script>
</body>
</html>