源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>大屏展示</title>
<!-- 引入echarts库文件 在线引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
min-height: 100vh;
background: url("img/bg.png") no-repeat;
background-size: cover;
}
.title {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
font-size: 20px;
color: #fff;
letter-spacing: 6px;
}
.bodyBox {
height: calc(100vh - 60px);
/* background: aliceblue; */
position: absolute;
width: 100%;
top: 55px;
left: 0;
padding: 20px;
}
.topBox {
position: relative;
height: 250px;
margin-top: 5px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.middleBox {
height: 220px;
margin-top: 15px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.bottomBox {
height: 230px;
margin-top: 15px;
display: flex;
justify-content: flex-start;
align-items: center;
}
.e1 {
width: 430px;
height: 100%;
background-color: aqua;
margin-right: 10px;
background: url("img/echartsImg/border.png") no-repeat;
background-size: 100% 100%;
padding: 10px;
}
.e2 {
width: 620px;
height: 100%;
background-color: aqua;
margin-right: 10px;
background: url("img/echartsImg/border.png") no-repeat;
background-size: 100% 100%;
padding: 10px;
}
.e3 {
width: 430px;
height: 100%;
background-color: aqua;
background: url("img/echartsImg/border.png") no-repeat;
background-size: 100% 100%;
padding: 10px;
}
.e4 {
width: 1090px;
height: 100%;
background-color: aqua;
background: url("img/echartsImg/border.png") no-repeat;
background-size: 100% 100%;
margin-right: 10px;
padding: 10px 13px;
}
.e5 {
width: 520px;
height: 100%;
background-color: aqua;
background: url("img/echartsImg/border.png") no-repeat;
background-size: 100% 100%;
padding: 10px;
}
.e6 {
width: 490px;
height: 100%;
background-color: aqua;
margin-right: 10px;
background: url("img/echartsImg/border.png") no-repeat;
background-size: 100% 100%;
padding: 10px;
}
.e7 {
width: 420px;
height: 100%;
background-color: aqua;
margin-right: 10px;
background: url("img/echartsImg/border.png") no-repeat;
background-size: 100% 100%;
padding: 10px;
}
.e8 {
width: 580px;
height: 100%;
background-color: aqua;
background: url("img/echartsImg/border.png") no-repeat;
background-size: 100% 100%;
padding: 10px;
}
.tit {
height: 24px;
line-height: 24px;
background-color: rgb(40, 72, 153);
width: 100%;
padding: 0 10px;
font-size: 14px;
color: #fff;
}
.ebox {
width: 100%;
height: calc(100% - 30px);
margin-top: 7px;
}
</style>
</head>
<body>
<h3 class="title">雪天前端大数据看板</h3>
<div class="bodyBox">
<div class="topBox">
<div class="e1">
<div class="tit">这是一个标题</div>
<div class="ebox" id="e1"></div>
</div>
<div class="e2">
<div class="tit">这是一个标题</div>
<div class="ebox" id="e2"></div>
</div>
<div class="e3">
<div class="tit">这是一个标题</div>
<div class="ebox" id="e3"></div>
</div>
</div>
<div class="middleBox">
<div class="e4">
<div class="tit">这是一个标题</div>
<div class="ebox" id="e4"></div>
</div>
<div class="e5">
<div class="tit">这是一个标题</div>
<div class="ebox" id="e5"></div>
</div>
</div>
<div class="bottomBox">
<div class="e6">
<div class="tit">这是一个标题</div>
<div class="ebox" id="e6"></div>
</div>
<div class="e7">
<div class="tit">这是一个标题</div>
<div class="ebox" id="e7"></div>
</div>
<div class="e8">
<div class="tit">这是一个标题</div>
<div class="ebox" id="e8"></div>
</div>
</div>
</div>
</body>
</html>
<!-- 图表配置 -->
<script type="text/javascript">
function e1() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('e1'));
// 指定图表的配置项和数据
var option = {
backgroundColor: '#080b3000',
title: {
text: '',
textStyle: {
align: 'center',
color: '#fff',
fontSize: 20,
},
top: '5%',
left: 'center',
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '2%',
right: '4%',
bottom: '14%',
top: '16%',
containLabel: true
},
legend: {
data: ['1', '2', '3'],
right: 10,
top: 12,
textStyle: {
color: "#fff"
},
itemWidth: 12,
itemHeight: 10,
// itemGap: 35
},
xAxis: {
type: 'category',
data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018', '2019'],
axisLine: {
lineStyle: {
color: 'white'
}
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei'
}
},
},
yAxis: {
type: 'value',
max: '1200',
axisLine: {
show: false,
lineStyle: {
color: 'white'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.3)'
}
},
axisLabel: {}
},
"dataZoom": [{
"show": true,
"height": 12,
"xAxisIndex": [
0
],
bottom: '8%',
"start": 10,
"end": 90,
handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
handleSize: '110%',
handleStyle: {
color: "#d3dee5",
},
textStyle: {
color: "#fff"
},
borderColor: "#90979c"
}, {
"type": "inside",
"show": true,
"height": 15,
"start": 1,
"end": 35
}],
series: [{
name: '1',
type: 'bar',
barWidth: '15%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#fccb05'
}, {
offset: 1,
color: '#f5804d'
}]),
barBorderRadius: 12,
},
},
data: [400, 400, 300, 300, 300, 400, 400, 400, 300]
},
{
name: '2',
type: 'bar',
barWidth: '15%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#8bd46e'
}, {
offset: 1,
color: '#09bcb7'
}]),
barBorderRadius: 11,
}
},
data: [400, 500, 500, 500, 500, 400, 400, 500, 500]
},
{
name: '3',
type: 'bar',
barWidth: '15%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#248ff7'
}, {
offset: 1,
color: '#6851f1'
}]),
barBorderRadius: 11,
}
},
data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
}
e1();
function e2() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('e2'));
// 指定图表的配置项和数据
var dataStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
shadowBlur: 0,
shadowColor: '#203665'
}
};
var option = {
backgroundColor: "",
series: [{
name: '第一个圆环',
type: 'pie',
clockWise: false,
radius: [50, 80],
itemStyle: dataStyle,
hoverAnimation: false,
center: ['15%', '50%'],
data: [{
value: 40,
label: {
normal: {
rich: {
a: {
color: '#5FB878',
align: 'center',
fontSize: 18,
fontWeight: "bold"
},
b: {
color: '#fff',
align: 'center',
fontSize: 13
}
},
formatter: function(params) {
return "{b|运行}\n\n" + "{a|" + params.value + "台}" + "\n\n{b|2%}";
},
position: 'center',
show: true,
textStyle: {
fontSize: '18',
fontWeight: 'normal',
color: '#fff'
}
}
},
itemStyle: {
normal: {
color: '#5FB878',
shadowColor: '#5FB878',
shadowBlur: 0
}
}
}, {
value: 75,
name: 'invisible',
itemStyle: {
normal: {
color: '#E1E8EE'
},
emphasis: {
color: '#E1E8EE'
}
}
}]
}, {
name: '第二个圆环',
type: 'pie',
clockWise: false,
radius: [50, 80],
itemStyle: dataStyle,
hoverAnimation: false,
center: ['50%', '50%'],
data: [{
value: 34,
label: {
normal: {
rich: {
a: {
color: '#01AAED',
align: 'center',
fontSize: 18,
fontWeight: "bold"
},
b: {
color: '#fff',
align: 'center',
fontSize: 13
}
},
formatter: function(params) {
return "{b|计划}\n\n" + "{a|" + params.value + "台}" + "\n\n{b|4%}";
},
position: 'center',
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'normal',
color: '#fff'
}
}
},
itemStyle: {
normal: {
color: '#01AAED',
shadowColor: '#01AAED',
shadowBlur: 0
}
}
}, {
value: 50,
name: 'invisible',
itemStyle: {
normal: {
color: '#E1E8EE'
},
emphasis: {
color: '#E1E8EE'
}
}
}]
}, {
name: '第三个圆环',
type: 'pie',
clockWise: false,
radius: [50, 80],
itemStyle: dataStyle,
hoverAnimation: false,
center: ['85%', '50%'],
data: [{
value: 21,
label: {
normal: {
rich: {
a: {
color: '#FF5722',
align: 'center',
fontSize: 18,
fontWeight: "bold"
},
b: {
color: '#fff',
align: 'center',
fontSize: 13
}
},
formatter: function(params) {
return "{b|停机}\n\n" + "{a|" + params.value + "台}" + "\n\n{b|6%}";
},
position: 'center',
show: true,
textStyle: {
fontSize: '14',
fontWeight: 'normal',
color: '#fff'
}
}
},
itemStyle: {
normal: {
color: '#FF5722',
shadowColor: '#FF5722',
shadowBlur: 0
}
}
}, {
value: 25,
name: 'invisible',
itemStyle: {
normal: {
color: '#E1E8EE'
},
emphasis: {
color: '#E1E8EE'
}
}
}]
}]
}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
}
e2();
function e3() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('e3'));
// 指定图表的配置项和数据
var option = {
backgroundColor: "#00211f00",
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '2%',
right: '4%',
bottom: '10%',
top: '20%',
containLabel: true
},
legend: {
data: ['未发布', '已发布'],
top: "8%",
textStyle: {
color: "#fff",
fontSize: 16
},
itemWidth: 12,
itemHeight: 10,
// itemGap: 35
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: {
lineStyle: {
color: '#8c9493'
}
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: 'Microsoft YaHei',
fontWeight: 600,
fontSize: 16
}
},
},
yAxis: {
name: '单位：元',
nameTextStyle: {
color: "#fff"
},
type: 'value',
max: '150',
axisLine: {
show: false,
lineStyle: {
color: '#8c9493'
}
},
splitLine: {
show: true,
lineStyle: {
color: '#8c9493'
}
},
axisLabel: {
textStyle: {
fontWeight: 600
}
}
},
series: [{
name: '未发布',
type: 'bar',
barWidth: '25%',
itemStyle: {
normal: {
color: '#00bff2'
},
},
data: [10, 30, 40, 120, 50, 90, 60, 40, 15, 60, 30, 15]
},
{
name: '已发布',
type: 'bar',
barWidth: '25%',
itemStyle: {
normal: {
color: '#fecb12'
}
},
data: [5, 40, 60, 110, 40, 100, 70, 50, 20, 110, 40, 10]
}
]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
}
e3();
function e4() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('e4'));
// 指定图表的配置项和数
// 统计百分比
var option = {
backgroundColor: '#03060F00',
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: '#15ecf4',
},
},
formatter: function(params) {
var result = params[0].name + '<br>';
params.forEach(function(item) {
result +=
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
item.color +
'"></span>';
// 判断设置增长还是降低
if (parseFloat(item.data) >= 50) {
result += item.seriesName + ': ' + item.data + '%<br>';
} else if (parseFloat(item.data) < 50) {
result += item.seriesName + ': ' + item.data + '%<br>';
}
});
return result;
},
},
legend: {
data: ['今年', '去年', '前年'],
textStyle: {
fontSize: 12,
color: '#858ba1',
},
top: '2%',
left: '5%',
},
grid: {
bottom: 50,
left: 70,
right: 50,
},
dataZoom: [{
type: 'slider',
show: true,
xAxisIndex: [0],
left: '10%',
bottom: 0,
height: 8,
borderColor: '#37558a',
start: 1,
end: 45, //初始化滚动条
textStyle: {
color: '#fff',
},
}, ],
xAxis: {
axisLine: {
show: false,
lineStyle: {
color: '#15faff',
},
},
axisTick: {
show: false,
},
axisLabel: {
show: true,
textStyle: {
//改变刻度字体样式
color: '#fff',
},
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
},
yAxis: {
max: 100,
splitNumber: 4,
interval: 25,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
type: 'dashed',
color: '#4b4d64',
},
},
axisLabel: {
formatter: '{value} %',
textStyle: {
//改变刻度字体样式
color: '#fff',
},
},
},
series: [{
name: '今年',
type: 'line',
// smooth: true, // 设置拆线平滑
symbol: 'circle',
symbolSize: 10,
itemStyle: {
normal: {
color: '#ffcb00',
},
},
data: [14, 75, 85, 24, 75, 23, 24, 43, 87, 72, 12, 53],
},
{
name: '去年',
type: 'line',
// smooth: true,
symbol: 'circle',
symbolSize: 10,
itemStyle: {
normal: {
color: '#15faff',
},
},
data: [85, 15, 24, 74, 75, 43, 42, 54, 43, 32, 52, 13],
},
{
name: '前年',
type: 'line',
// smooth: true,
symbol: 'circle',
symbolSize: 10,
itemStyle: {
normal: {
color: '#00aa7f',
},
},
data: [25, 65, 24, 4, 15, 73, 42, 54, 63, 42, 22, 93],
},
],
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
}
e4();
function e5() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('e5'));
// 指定图表的配置项和数据
let dataX = ['娱乐', '科技', '学习', '文学', '体育', '美妆', '游戏']
let dataY = [31, 50, 20, 10, 24, 19.6, 12]
let dataY1 = [63, 85, 57, 32.8, 43, 31.2, 26.9]
var option = {
backgroundColor: '#0D275300',
tooltip: {
trigger: 'axis',
backgroundColor: 'rgba(1, 13, 19, 0.5)',
borderWidth: 0,
padding: 2,
textStyle: {
color: '#fff',
fontSize: 15,
},
axisPointer: {
type: 'shadow'
},
},
grid: {
top: '10%',
bottom: '10%',
left: '5%',
right: '5%',
containLabel: true,
},
legend: {
data: ['浏览', '用户'],
left: '280',
top: '10',
textStyle: {
padding: [4, 0, 0, 0],
color: '33FFFF',
},
itemWidth: 15,
itemHeight: 10,
itemGap: 10,
},
xAxis: {
type: 'category',
data: dataX,
axisLine: {
lineStyle: {
color: 'rgba(66, 192, 255, .3)',
},
},
axisLabel: {
//x轴文字倾斜设置
rotate: 0,
textStyle: {
color: '#FFFF',
},
},
},
yAxis: [{
type: 'value',
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
},
},
},
{
type: 'value',
max: '50',
min: '0',
scale: true,
position: 'right',
splitLine: {
show: false,
},
axisLabel: {
show: true,
formatter: '{value} 次', //右侧Y轴文字显示
textStyle: {
fontSize: 12,
color: '#FFF',
},
},
},
],
series: [{
name: '浏览',
type: 'bar',
barWidth: '13px',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#29acff',
},
{
offset: 1,
color: '#4bdfff',
},
]),
barBorderRadius: 8,
},
},
data: dataY1,
},
{
name: '用户',
type: 'line',
markPoint: {
label: {
show: true,
position: "top",
distance: 15,
offset: [1, 1],
lineHeight: 20,
backgroundColor: '#00aaff',
borderRadius: 6,
borderColor: '#00aaff',
borderWidth: '3',
padding: [4, 3, 4],
color: '#fff',
fontSize: 12,
fontWeight: 'normal',
},
symbol: "arrow",
symbolSize: 10.5,
symbolOffset: [0, -2],
data: [{
// type: 'average',
name: '平均值',
value: '平均浏览x次',
xAxis: 3,
yAxis: 23
}],
},
markLine: {
symbol: 'none',
data: [{
type: 'average',
name: '平均值'
}],
label: {
show: false
}
},
yAxisIndex: 1,
smooth: false,
symbol: 'circle',
symbolSize: 9,
itemStyle: {
normal: {
color: '#00aaff',
borderColor: '#fff', //圆点透明 边框
borderWidth: 2,
},
},
lineStyle: {
color: '#ffa43a',
},
data: dataY,
},
],
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
}
e5();
function e6() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('e6'));
// 指定图表的配置项和数据
var colorList = ["#f36c6c", "#e6cf4e", "#20d180", "#0093ff"];
var datas = [{
value: 36,
name: "系列一",
},
{
value: 54,
name: "系列二",
},
{
value: 29,
name: "系列三",
},
{
value: 25,
name: "系列四",
},
{
value: 55,
name: "系列五",
},
{
value: 69,
name: "系列6",
},
{
value: 75,
name: "系列7",
},
{
value: 85,
name: "系列8",
},
];
let maxArr = new Array(datas.length).fill(100);
var data = [50, 60, 70, 20, 30, 10];
var className = ["1月", "2月", "3月", "4月", "5月", "6月"];
var colorList = [
"#39B3FF",
"#47E0E0",
"#7891D9",
"#83D978",
"#C7A530",
"#FF8439",
];
var defaultData = [100, 100, 100, 100, 100, 100];
var option = {
grid: {
left: "5%",
right: "5%",
bottom: "5%",
top: "10%",
containLabel: true,
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: function(params) {
return (
params[0].name +
"<br/>" +
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
params[0].seriesName +
" : " +
params[0].value
);
},
},
backgroundColor: "rgba(20,28,52,0)",
xAxis: {
show: false,
type: "value",
},
yAxis: [{
type: "category",
inverse: true,
axisLabel: {
show: true,
textStyle: {
color: "#fff",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: className,
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true,
axisLabel: {
textStyle: {
color: "#ffffff",
fontSize: "12",
},
formatter: function(value) {
return value + " %";
},
},
data: data,
},
],
series: [{
name: "完成率",
type: "bar",
zlevel: 1,
itemStyle: {
normal: {
barBorderRadius: 0,
color: (params) => {
return colorList[params.dataIndex];
},
},
},
barWidth: 20,
data: data,
},
{
name: "背景",
type: "bar",
barWidth: 20,
barGap: "-100%",
data: defaultData,
itemStyle: {
normal: {
color: "#1B375E",
barBorderRadius: 0,
},
},
},
],
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
}
e6();
function e7() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('e7'));
// 指定图表的配置项和数据
var option = {
backgroundColor: "#0E204A00",
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: "rgba(255,255,255,0)", // 0% 处的颜色
},
{
offset: 0.5,
color: "rgba(255,255,255,1)", // 100% 处的颜色
},
{
offset: 1,
color: "rgba(255,255,255,0)", // 100% 处的颜色
},
],
global: false, // 缺省为 false
},
},
},
},
grid: {
top: "18%",
left: "1%",
right: "1%",
bottom: "25%",
// containLabel: true
},
xAxis: [{
type: "category",
boundaryGap: true,
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: "rgba(255,255,255,0.4)",
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#d1e6eb",
margin: 15,
},
},
axisTick: {
show: false,
},
data: ["2014", "2015", "2016", "2017", "2018", "2019"],
}, ],
yAxis: [{
type: "value",
min: 0,
// max: 140,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: "rgba(255,255,255,0.1)",
},
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
margin: 20,
textStyle: {
color: "#d1e6eb",
},
},
axisTick: {
show: false,
},
}, ],
series: [{
name: "注册总量",
type: "line",
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
// symbol: 'image://./static/images/guang-circle.png',
symbolSize: 8,
lineStyle: {
normal: {
color: "#53fdfe", // 线条颜色
},
borderColor: "#f0f",
},
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
},
},
itemStyle: {
normal: {
color: "rgba(255,255,255,1)",
},
},
tooltip: {
show: false,
},
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[{
offset: 0,
color: "rgba(0,150,239,0.3)",
},
{
offset: 1,
color: "rgba(0,253,252,0)",
},
],
false
),
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
},
data: [150, 200, 259, 360, 378, 450, 450],
}, ],
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
}
e7();
function e8() {
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('e8'));
// 指定图表的配置项和数据
//做南丁格尔图的本质是roseType= area|radius 而 radius: ['0%', '70%']内半径可给可不给
const backgroundColor = '#10173600';
const title = {
text: '前端开发',
textStyle: {
color: '#fff',
fontSize: 12,
},
padding: 0,
top: 35,
left: 'center',
};
const legend = {
//data，就是取得每个series里面的name属性。
orient: 'vertical',
icon: 'circle', //图例形状
padding: 0,
bottom: 'center',
right: 40,
itemWidth: 14, //小圆点宽度
itemHeight: 14, // 小圆点高度
itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
textStyle: {
fontSize: 14,
color: '#ffffff',
},
};
const tooltip = {
show: true,
formatter: '{b}:{d}%',
};
const color = ['#03acd1', '#04cab7', '#03c781', '#fce348', '#fc2d8a', '#0292fe'];
var option = {
backgroundColor,
color,
title,
tooltip,
legend,
series: [{
name: '前端开发',
type: 'pie',
center: ['50%', '50%'], //圆心的位置
top: '2%', //单单指的饼图距离上面的距离，top越大饼图越小
left: '-30%', //单单指的饼图距离左面的距离，会改变饼图的大小
radius: ['0%', '70%'], //环形图的本质就在这里 [内半径!=0，外半径] 外半径越大，圆越大
avoidLabelOverlap: false, //做同心圆用到
clockwise: false, //顺时针排列
startAngle: 160, //起始角度 影响不大
roseType: "area", //area|radius
label: {
show: true, //false不显示饼图上的标签
position: 'outside', //inside（在饼图上显示）,outside(默认就会出现引导线) center
formatter: '{b}:{c}',
},
//只有设置了label:show=ture;position=outside 设置labelLine才会有效
labelLine: {
show: true, //显示引导线
length: 30, //连接饼图第1段线条的长度 length length2 不写自适应
length2: 10, //链接饼图第2段线条长度
smooth: true, //是否光滑连接线
},
itemStyle: {
//每个扇形的设置
borderColor: 'rgba(0,0,0,.1)', //扇形边框颜色
borderWidth: 0, //扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果
},
data: [{
value: 1048,
name: 'HTML'
},
{
value: 735,
name: 'CSS'
},
{
value: 380,
name: 'Javscript'
},
{
value: 484,
name: 'Vue'
},
{
value: 300,
name: ' React'
},
{
value: 600,
name: ' uniapp'
},
].sort((a, b) => b.value - a.value), //数组从大到小排序
emphasis: {
scale: true,
scaleSize: 10,
//启用鼠标放上去放大效果，这个挺好的
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
}, ],
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
}
e8();
</script>其中的图片资源
bg.png
border.png
效果展示
函数分析
e1函数
定义了一个名为 e1 的函数，用于渲染一个柱状图的 Echarts 图表。函数内部首先通过 echarts.init() 初始化了一个 Echarts 实例，然后定义了图表的配置项和数据。
配置项包括了背景颜色、标题、提示框、图例、X 轴、Y 轴、数据缩放等。其中，数据缩放配置了两个区域，一个在底部，一个在内部，可以通过鼠标或手指进行缩放操作。
图表的系列数据包括了三个柱状图，分别命名为 ‘1’、‘2’、‘3’，每个柱状图都设置了不同的渐变颜色和圆角样式，并且提供了相应的数据。
最后，使用 myChart.setOption(option) 将配置应用到图表实例上，从而呈现出柱状图的效果。
最后一行代码调用了 e1() 函数，以便在页面加载时自动渲染图表。
如果您有任何问题或需要进一步的解释，请随时告诉我。
y轴设置值
y轴的设置在 option 对象中的 yAxis 键下。具体来说，y轴的数字设置在 axisLabel 属性中。但是在提供的代码中，axisLabel 属性没有被指定，因此会使用默认设置。默认情况下，ECharts 会自动计算 y 轴的刻度值，以适应数据的范围。
在这个例子中，y轴的最大值被设置为1200（通过 max: '1200'），但是没有显式地指定刻度值。因此，ECharts 会自动计算 y 轴的刻度值，以确保能够完整显示数据范围。
e2函数
每个圆环的值都被设置为 value 属性中的数字。具体来说，第一个圆环的值是40，第二个圆环的值是34，第三个圆环的值是21。这些值确定了每个圆环的大小，因为这些值决定了圆环的占比。
每个圆环的占比是通过 series 数组中的每个数据项的 value 属性来确定的。具体步骤如下：
- 首先，定义了三个圆环，每个圆环由一个
pie类型的系列表示，其中的data数组包含两个数据项，一个用于显示数据，另一个用于设置不可见区域。 - 在每个数据项中，
value属性表示圆环所占比例。例如，第一个圆环的第一个数据项的value是40，第二个数据项的value是75。 - 然后，为了确保圆环显示时大小的准确性，ECharts 会根据每个数据项的
value与所有数据项的value总和之比来确定每个圆环的占比。 - 通过计算每个圆环的
value与所有圆环value总和之比，就可以得到每个圆环的占比。例如，第一个圆环的占比为40 / (40 + 75)，第二个圆环的占比为34 / (34 + 50)，第三个圆环的占比为21 / (21 + 25)。
e3函数
定义了一个名为 e3 的函数，该函数使用 ECharts 库创建并初始化了一个柱状图，并设置了图表的样式、布局和数据。图表包含了两个系列，分别代表了“未发布”和“已发布”数据，在横轴上显示了月份，在纵轴上显示了数据量。整体而言，这段代码通过 ECharts 在网页上绘制了一个柱状图，用于展示不同月份的发布情况。
