1、代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background-color: #132658;
}
.fl {
float: left;
}
.bar {
width: 450px;
height: 280px;
margin-top: 20px;
}
</style>
</head>
<body>
<!-- -->
<div class="bar fl" id="bar1"></div>
<div class="bar fl" id="bar2"></div>
<div class="bar fl" id="pie1"></div>
<div class="bar fl" id="pie2"></div>
</body>
<script src="https://cdn.bootcss.com/echarts/2.2.7/echarts-all.js"></script>
<script>
//垂直柱狀圖
var chartBar1 = echarts.init(document.getElementById('bar1'));
var optionBar1 = {
title: { //標題
text: '',
subtext: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
x: '10%', //柱狀圖距離左邊和頂部的距離
y: '10%',
borderWidth:'0', //隱藏外部邊框
},
yAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
textStyle: {
color: '#fff'
}
},
axisLine:{ //軸
show: true
},
axisTick:{ //軸刻度線
show: false
},
splitLine: { //網格線
show: false
},
},
xAxis: {
type: 'category',
axisLabel : {
textStyle: {
color: '#2b75dd'
}
},
axisLine:{ //軸
show: true
},
axisTick:{ //軸刻度線
show:false
},
splitLine: { //網格線
show: false
},
data: ['有效會話總數', '已評價總數', '已解決數', '未解決數']
},
series: [
{
name: '',
type: 'bar',
barWidth: 40, //每個柱子的寬度
data: [241, 131, 45, 21],
itemStyle: {
normal: {
label: {
show: true, //開啟顯示每個柱子的值
position: 'top', //顯示值的位置
textStyle: { //數值樣式
color: '#fff',
fontSize: 16
}
},
borderRadius: 100,
color: (function (){ // 添加漸變顏色
var zrColor = zrender.tool.color;
return zrColor.getLinearGradient(
0, 50,100, 500,
[[0, '#fff'],[1, '#135adc']]
)
})(),
areaStyle: {type: 'default'}
}
},
}
]
};
chartBar1.setOption(optionBar1);
//水平柱狀圖
var chartBar2 = echarts.init(document.getElementById('bar2'));
var optionBar2 = {
title: { //標題樣式
text: '工單數（本月）',
subtext: '',
x:'center', //標題距離水平位置
y:5, //標題垂直距離頂部位置
textStyle: {
color: '#fff',
fontSize: 14,
fontWeight: 'normal',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
x: '20%', //柱狀圖距離左邊和頂部的距離
y: '10%',
borderWidth:'0', //隱藏外部邊框
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
textStyle: {
color: '#fff'
}
},
axisLine:{ //軸
show: true
},
axisTick:{ //軸刻度線
show: false
},
splitLine: { //網格線
show: false
},
},
yAxis: {
type: 'category',
axisLabel : {
textStyle: {
color: '#2b75dd'
}
},
axisLine:{ //軸
show: true
},
axisTick:{ //軸刻度線
show:false
},
splitLine: { //網格線
show: false
},
data: ['工單總數', '留言數', '意見反饋數', '新增工單數', '已解決工單數', '未解決工單數']
},
series: [
{
name: '',
type: 'bar',
barWidth: 20, //每個柱子的寬度
data: [233, 167, 32, 64, 78, 190],
itemStyle: {
normal: {
label: {
show: true, //開啟顯示每個柱子的值
position: 'right', //顯示值的位置
textStyle: { //數值樣式
color: '#fff',
fontSize: 16
}
},
borderRadius: 100,
color: (function (){ // 添加漸變顏色
var zrColor = zrender.tool.color;
return zrColor.getLinearGradient(
0, 50,500, 100,
[[0, '#135adc'],[1, '#fff']]
)
})(),
areaStyle: {type: 'default'}
}
},
}
]
};
chartBar2.setOption(optionBar2);
//餅狀圖1
var chartPie1 = echarts.init(document.getElementById('pie1'));
var optionPie1 = {
color:['#397cbf','#71c7fe','#1c3dae','#3efe95','#f7ff4e','#ffffff'],
title: { //標題樣式
text: '各渠道占比',
x:'center', //標題距離水平位置
y: 10, //標題垂直距離頂部位置
textStyle: { //標題樣式
color: '#fff',
fontSize: 14,
fontWeight: 'normal',
}
},
legend: { //標示文字的設置
x: '30', //標示文字距離左側的距離
y: 'center', //標示文字距離頂部的距離
left:100,
orient : 'vertical',
itemWidth: 30,
itemHeight: 20,
itemGap:14,
textStyle: { //標示文字的樣式
color: '#fff',
fontSize: 14
},
data:[
{value:40, name:'桌面網站'},
{value:20, name:'微信公眾號'},
{value:15, name:'移動網站'},
{value:10, name:'微博'},
{value:10, name:'APP'},
{value:5, name:'微信小程序'},
],
formatter: function(name) {
var index = 0;
var clientlabels = ['桌面網站','微信公眾號','移動網站','微博','APP','微信小程序'];
var clientcounts = [40,20,15,10,10,5];
clientlabels.forEach(function(value,i){
if(value == name){
index = i;
}
});
return " " + name + " " + clientcounts[index]+'%';
}
},
tooltip : { //hover提示
trigger: 'item',
formatter:'{b}:{c}%'
// formatter:function(params){
// return params.name+'<br/>總條數 : '+params.data.totalNumber+'條 <br/>占比：'+ (params.percent - 0).toFixed(2)+'%';
// }
},
series:[
{
name:'訪問來源',
type:'pie',
radius : ['35%', '80%'], //餅狀內環直徑百分比 和 整體餅狀尺寸百分比
center : ['70%', '55%'], //餅狀距離左側 和 頂部的距離百分比
roseType : 'radius',
itemStyle : {
normal : {
label : {
show : false //隱藏標示文字
},
labelLine : {
show : false //隱藏標示線
}
}
},
data:[
{value:40, name:'桌面網站'},
{value:20, name:'微信公眾號'},
{value:15, name:'移動網站'},
{value:10, name:'微博'},
{value:10, name:'APP'},
{value:5, name:'微信小程序'},
],
}
]
};
chartPie1.setOption(optionPie1);
//餅狀圖2
var chartPie2 = echarts.init(document.getElementById('pie2'));
var optionPie2 = {
color:['#3a84c2','#71cbfd'],
title: {
text: '',
top:0,
left:0,
textStyle: { //標題樣式
color: '#fff',
fontSize: 16,
fontWeight: 'normal',
}
},
legend: { //標示文字的設置
x: 'center', //標示文字距離左側的距離
y: '10', //標示文字距離頂部的距離
orient : 'horizontal',
itemWidth: 30,
itemHeight: 20,
itemGap:14,
textStyle: { //標示文字的樣式
color: '#fff',
fontSize: 14
},
data:[
{value:70, name:'已解決'},
{value:30, name:'未解決'}
],
formatter: function(name) {
var index = 0;
var clientlabels = ['已解決','未解決'];
var clientcounts = [70, 30];
clientlabels.forEach(function(value,i){
if(value == name){
index = i;
}
});
return " " + name + " " + clientcounts[index]+'%';
}
},
tooltip : { //hover提示
trigger: 'item',
formatter:'{b}:{c}%'
},
series:[
{
name:'訪問來源',
type:'pie',
radius : ['30%', '70%'], //餅狀內環直徑百分比 和 整體餅狀尺寸百分比
center : ['50%', '60%'], //餅狀距離左側 和 頂部的距離百分比
roseType : 'radius',
itemStyle : {
normal : {
label : {
show : false //隱藏標示文字
},
labelLine : {
show : false //隱藏標示線
}
}
},
data:[
{value:70, name:'已解決'},
{value:30, name:'未解決'}
],
}
]
};
chartPie2.setOption(optionPie2);
</script>
</html>
2、效果圖
需要購買阿里雲產品的，可以點擊此鏈接領取紅包，優惠購買哦： https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=fp9ccf07