效果图如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Echarts作业</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h2 {
width: 90vw;
font-size: 22px;
color: #315C9E;
text-align: center;
}
.main {
width: 98vw;
height: 90vh;
display: flex;
justify-content: space-between;
align-items: center;
}
.main .left {
width: 420px;
height: 90vh;
/* border: 1px solid red; */
padding-left: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.main .right {
width: 420px;
height: 90vh;
/* border: 1px solid red; */
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.main .center {
width: calc(100vw - 840px);
height: 90vh;
/* border: 1px solid #000; */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}
</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
<script src="./echarts.js"></script>
<script src="./convert.js"></script>
<script src="./map/js/china.js"></script>
<h2>数据驾驶舱</h2>
<div class="main">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div class="left">
<div id="main" style="width:420px;height:250px;"></div>
<div id="main3" style="width:420px;height:250px;"></div>
</div>
<div class="center">
<div id="main5" style=" width:650px;height:650px;"></div>
</div>
<div class="right">
<div id="main2" style="width:420px;height:250px;"></div>
<div id="main4" style="width:420px;height:270px;"></div>
</div>
</div>
<script type="text/javascript">
let {
citydata
} = Mock.mock({
'citydata|5': [{
city: "@city",
"val": "@integer(0,100)"
}]
});
// console.log({
// citydata
// })
// console.log(JSON.stringify({
// citydata
// }));
let {
citydata1
} = Mock.mock({
'citydata1|5': [{
city: "@city",
"val": "-@integer(0,100)"
}]
});
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('main'));
let myChart2 = echarts.init(document.getElementById('main2'));
// var myChart3 = echarts.init(document.getElementById('main3'));
// 指定图表的配置项和数据
let option = {
title: {
text: '各区域担保金额',
left: "left",
textStyle: {
color: "blue",
}
},
tooltip: {},
legend: {
data: ['销量'],
left: "center",
},
xAxis: {
// data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
show: false,
},
yAxis: {
data: citydata.map(r => r.city),
axisLine: { //清除y轴线
show: false,
},
axisTick: { //清除刻度
show: false,
},
axisLabel: { //坐标轴刻度的文字标题
color: "blue",
fontWeight: "bold",
align: "right",
// rotate: 30,
}
},
series: [{
name: '销量',
type: 'bar',
barWidth: 20,
// data: [5, 20, 36, 10, 10, 20],
data: citydata.map(r => r.val),
color: new echarts.graphic.LinearGradient(
0, 1, 1, 1,
[{
offset: 0,
color: 'blue',
},
{
offset: 1,
color: 'skyblue',
},
]
)
}],
label: { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
show: true,
position: "right",
fontSize: "16",
color: "blue",
fontWeight: "bold"
},
grid: { //柱状图的高度
height: 160,
width: 300
},
};
let option2 = {
title: {
text: '各区域逾期情况',
left: "right",
textStyle: {
color: "blue",
}
},
tooltip: {
// formatter(val) {
// return Math.abs(val.value)
// }
},
legend: {
data: ['销量'],
left: "center",
},
xAxis: {
// data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
show: false,
},
yAxis: {
position: "right",
data: citydata1.map(r => r.city),
axisLine: { //清除坐标轴线
show: false,
},
axisTick: { //清除坐标刻度
show: false,
},
axisLabel: { //坐标轴刻度的文字标题
color: "blue",
fontWeight: "bold",
align: "left",
// rotate: 30,
}
},
series: [{
name: '销量',
type: 'bar',
barWidth: 20,
// data: [5, 20, 36, 10, 10, 20],
data: citydata1.map(r => r.val),
color: new echarts.graphic.LinearGradient(
0, 1, 1, 1,
[{
offset: 0,
color: '#FEC768',
},
{
offset: 1,
color: '#FE8011',
},
]
)
}],
label: { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
show: true,
position: "left",
fontSize: "16",
color: "blue",
fontWeight: "bold",
formatter(val) {
return Math.abs(val.value)
}
},
grid: { //柱状图的高度
height: 160,
width: 300
},
};
let year = Mock.mock({
"year|5": ["@date('yyyy')"]
}).year
let data1 = [];
let data2 = [];
let bank = Mock.mock({
"bank|8": ["@integer(1,100)"]
}).bank
let bank1 = ["招商银行", "建设银行", "华夏银行", "温州银行", "中国银行", "宁波银行", "农商银行"];
// console.log({
// citydata
// })
// console.log(JSON.stringify({
// citydata
// }));
// 基于准备好的dom，初始化echarts实例
var myChart3 = echarts.init(document.getElementById('main3'));
var myChart4 = echarts.init(document.getElementById('main4'));
// 指定图表的配置项和数据
var option3 = {
title: {
text: '各年度平均利率/费率对比',
left: "0",
textStyle: {
color: "blue",
}
},
tooltip: {
trigger: 'axis',
axisPointer: {}
},
legend: {
data: ['销量'],
right: "0",
},
xAxis: {
axisLine: false,
axisTick: false,
splitLine: false,
axisLabel: {
rotate: 30,
color: "darkblue",
fontWeight: 'bold'
},
data: year
},
yAxis: {
axisLine: { //清除y轴线
show: false,
},
axisTick: { //清除刻度
show: false,
},
axisLabel: {
color: "darkblue",
fontWeight: "bold",
formatter(val) {
return val + "%"
}
},
splitLine: false,
},
series: [{
name: '平均利率',
type: 'line',
smooth: true,
// data: [5, 20, 36, 10, 10, 20],
data: data2,
color: new echarts.graphic.LinearGradient(
0, 1, 1, 1,
[{
offset: 0,
color: 'lightblue',
smooth: true,
},
{
offset: 1,
color: 'skyblue',
},
]
),
date: data1
}, {
name: '平均费率',
type: 'line',
smooth: true,
// data: [5, 20, 36, 10, 10, 20],
data: data2,
color: new echarts.graphic.LinearGradient(
0, 1, 1, 1,
[{
offset: 0,
color: 'orange',
smooth: true,
},
{
offset: 1,
color: 'orangered',
},
]
),
data: data2,
}],
label: { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
show: true,
position: "right",
fontSize: "16",
color: "skyblue",
fontWeight: "bold"
},
// grid: { //柱状图的高度
// height: 200,
// },
};
setInterval(() => {
data1 = Mock.mock({
"data1|5": ["@integer(1,100)"]
}).data1;
data2 = Mock.mock({
"data2|5": ["@integer(1,100)"]
}).data2;
option3.series[0].data = data1;
option3.series[1].data = data2;
// 使用刚指定的配置项和数据显示图表。
myChart3.setOption(option3);
}, 1500);
var option4 = {
title: {
text: '各区银行担保情况',
right: "0",
textStyle: {
color: "blue",
}
},
tooltip: {},
legend: {
data: ['销量'],
left: "center",
},
xAxis: {
// data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
// show: false,
data: bank1.map(item => {
return item
}),
axisLabel: { //坐标轴刻度的文字标题
color: "blue",
// align: "center",
rotate: 30,
},
},
yAxis: {
show: false,
// axisLine: { //清除y轴线
// },
axisTick: { //清除刻度
show: false,
},
axisLabel: { //坐标轴刻度的文字标题
color: "darkgreen",
align: "center",
rotate: 30,
},
},
series: [{
name: '销量',
type: 'bar',
barWidth: 20,
// data: [5, 20, 36, 10, 10, 20],
data: bank,
color: new echarts.graphic.LinearGradient(
0, 1, 1, 0,
[{
offset: 0,
color: '#8FCEBE',
},
{
offset: 1,
color: '#5AB993',
},
]
)
}],
label: { //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，
show: true,
position: "top",
fontSize: "16",
color: "darkgreen",
fontWeight: "nomal"
},
grid: { //柱状图的高度
height: 160,
width: 300
},
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart2.setOption(option2);
myChart4.setOption(option4);
let data = provinceList.map(r => ({
name: r,
value: Mock.Random.integer(100, 10000)
}))
var myChart5 = echarts.init(document.getElementById('main5'));
var option5 = {
tooltip: {},
visualMap: {
type: "piecewise",
pieces: [{
gte: 2000
},
{
gte: 500,
lt: 2000
},
{
gte: 10,
lt: 500
},
{
lt: 10
}
]
},
series: [{
name: "用户数",
type: "map",
map: 'china',
label: {
show: true
},
data
}]
};
myChart5.setOption(option5);
myChart5.on('click', function (params) {
// 控制台打印数据的名称
$.get('./map/json/province/' + getCityENCode(params.name) + '.json', data => {
echarts.registerMap(params.name, data);
var option5 = {
tooltip: {},
visualMap: {
type: "piecewise",
pieces: [{
gte: 2000
},
{
gte: 500,
lt: 2000
},
{
gte: 10,
lt: 500
},
{
lt: 10
}
]
},
series: [{
name: "用户数",
type: "map",
map: params.name,
label: {
show: true
},
}]
};
myChart5.setOption(option5);
})
});
</script>
</body>
</html>
<script>
</script>
</body>
</html>
