<!DOCTYPE html>
<html lang="zh-cn">
<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>Demo</title>
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/echarts/4.0.4/echarts-en.common.js"></script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
color: #333;
min-width: 1200px;
overflow: auto;
font-family: "Microsoft Yahei";
}
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.lineChartContainer {
width: 100%;
padding: 10px 15px;
box-sizing: border-box;
}
#echart_line {
width: 100%;
height: 500px;
}
.headerData {
margin: 35px 0 0 120px;
}
.pieContainer {
padding: 30px 0 0 100px;
}
.echart_pie {
width: 150px;
height: 150px;
}
.explainText {
position: absolute;
right: 25px;
bottom: 42px;
}
.explainText>i {
color: orangered;
cursor: pointer;
}
.explainText:hover .textTip {
display: block !important;
}
.headerData>li,
.pieContainer>li {
display: inline-block;
margin: 0 30px;
text-align: center;
position: relative;
}
.lineValue {
font-size: 24px;
font-weight: 700;
}
.lineValue>span {
font-size: 14px;
}
.lineText {
font-size: 14px;
color: #999;
position: relative;
}
.lineText>i {
color: orangered;
padding-left: 5px;
cursor: pointer;
}
.textTip {
display: none !important;
min-width: 100px;
line-height: 20px;
font-size: 12px;
background: #00aaff;
color: #fff !important;
border-radius: 3px;
padding: 5px;
display: block;
position: absolute;
z-index: 999;
}
.lineText:hover .textTip {
display: block !important;
}
.lineChartContainer .textTip {
left: 60px;
}
.textTip::after {
content: "";
display: block;
width: 0;
height: 0;
border: 5px solid;
border-color: transparent transparent #00aaff transparent;
position: absolute;
left: 10px;
top: -9px;
}
</style>
</head>
<body>
<ul class="pieContainer">
<li>
<div class="echart_pie" id="echart_pie1"></div>
</li>
<li>
<div class="echart_pie" id="echart_pie2"></div>
<div class="explainText">
<i class="fa fa-question-circle-o" aria-hidden="true"></i>
<div class="textTip">说明文字。。。</div>
</div>
</li>
<li>
<div class="echart_pie" id="echart_pie3"></div>
<div class="explainText">
<i class="fa fa-question-circle-o" aria-hidden="true"></i>
<div class="textTip">说明文字。。。</div>
</div>
</li>
<li>
<div class="echart_pie" id="echart_pie4"></div>
<div class="explainText">
<i class="fa fa-question-circle-o" aria-hidden="true"></i>
<div class="textTip">潜在客户数/总注册数</div>
</div>
</li>
</ul>
<div class="lineChartContainer">
<ul class="headerData">
<li>
<div class="lineValue">285005</div>
<div class="lineText">新访客数</div>
</li>
<li>
<div class="lineValue">853</div>
<div class="lineText">注册用户</div>
</li>
<li>
<div class="lineValue">153</div>
<div class="lineText">预约人数</div>
</li>
<li>
<div class="lineValue">153</div>
<div class="lineText">潜在用户
<i class="fa fa-question-circle-o" aria-hidden="true"></i>
<div class="textTip">说明文字。。。</div>
</div>
</li>
<li>
<div class="lineValue">153</div>
<div class="lineText">成交客户</div>
</li>
</ul>
<div id="echart_line"></div>
</div>
<script type="text/javascript">
var echart_pie = {
datas: [{
el: "echart_pie1",
name: "累计访客数",
val: "1353780"
}, {
el: "echart_pie2",
name: "累计注册数",
val: "253780"
}, {
el: "echart_pie3",
name: "注册转化率",
val: "13.50%"
}, {
el: "echart_pie4",
name: "潜客转化率",
val: "3.72%"
}],
isIE8: function () {
var browser = navigator.appName
var b_version = navigator.appVersion
var version = b_version.split(";");
var trim_Version = version[1].replace(/[ ]/g, "");
return browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0";
},
copy: function (obj) {
var str, newobj = obj.constructor === Array ? [] : {};
if (typeof obj !== "object") {
return;
} else if (window.JSON) {
str = JSON.stringify(obj),
newobj = JSON.parse(str);
} else {
for (var i in obj) {
newobj[i] = typeof obj[i] === "object" ?
cloneObj(obj[i]) : obj[i];
}
}
return newobj;
},
init: function () {
for (var i = 0; i < this.datas.length; i++) {
var item = this.datas[i];
var echart = echarts.init(document.getElementById(item.el));
var option = this.copy(this.option);
option.title.text = this.datas[i].val;
option.title.subtext = this.datas[i].name;
if(this.isIE8()){
option.series[0].data[0].itemStyle.normal.color = "#00a2ff";
}
echart.setOption(option);
}
},
option: {
title: {
text: "",
subtext: "",
x: "center",
y: "36%",
textStyle: {
color: "#333",
fontSize: 24,
}
},
series: [{
type: "pie",
radius: ["95%", "100%"],
hoverAnimation: false,
label: {
normal: {
show: false,
}
},
data: [{
value: 100,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "#00a2ff"
}, {
offset: 1,
color: "#70ffac"
}])
}
}
}]
}]
}
};
var echart_line = {
el: echarts.init(document.getElementById("echart_line")),
init: function () {
var lineColors = ["#2d55bb", "#f24065", "#ee9b3a", "#27e4ba", "#5dc5eb"],
lineName = ["新增用户", "注册用户", "预约用户", "潜在用户", "成交用户"]
this.option.legend.data = lineName;
for (var i = 0; i < this.option.series.length; i++) {
var item = this.option.series[i];
item.name = lineName[i];
item.type = "line";
item.areaStyle = {
normal: {
color: "#DCF2F5"
}
};
item.itemStyle = {
normal: {
color: lineColors[i]
}
};
}
this.el.setOption(this.option);
},
option: {
title: {
text: ""
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
lineStyle: {
color: "#ddd"
}
},
backgroundColor: "rgba(255,255,255,1)",
padding: [5, 10],
textStyle: {
color: "#666",
},
extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)"
},
legend: {
left: "10%",
bottom: 0,
itemGap: 20
},
xAxis: {
type: "category",
boundaryGap: false,
data: ["08-01", "08-02", "08-03", "08-04", "08-05", "08-06", "08-07"],
},
yAxis: {
type: "value"
},
series: [{
data: [5, 100, 1600, 1900, 1850, 1800, 2100]
},
{
data: [10, 100, 1200, 1400, 1732, 1600, 1500]
},
{
data: [8, 120, 1000, 1400, 1368, 330, 1200]
},
{
data: [3, 300, 400, 2000, 2128, 1300, 1700]
},
{
data: [0, 350, 700, 900, 1036, 800, 600]
}
]
}
};
echart_pie.init();
echart_line.init();
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
