一.柱形图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main" style="height: 400px"></div>
<script src="../libs/echarts-5.3.3.js"></script>
<script>
window.onload = function() {
let myChart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor: "rgb(40,46,72)",
grid: {
left: "5%",
right: "10%",
top: "30%",
bottom: "5%",
containLabel: true, // grid 区域是否包含坐标轴的刻度标签
},
tooltip: {},
xAxis: {
name: "月份",
axisLine: {
show: true,
lineStyle: {
color: "#42A4FF",
},
},
axisTick: {
show: false,
},
axisLabel: {
color: "white",
},
type: 'category',
data: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
},
yAxis: {
name: "个",
nameTextStyle: {
color: "white",
fontSize: 13,
},
axisLine: {
show: true,
lineStyle: {
color: "#42A4FF",
},
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: "#42A4FF",
},
},
axisLabel: {
color: "white",
},
},
series: [
{
name: "销量",
type: "bar",
barWidth: 17,
itemStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#01B1FF", // 0% 处的颜色
},
{
offset: 1,
color: "#033BFF", // 100% 处的颜色
},
]
},
},
data: [500, 2000, 3600, 1000, 1000, 2000, 4000],
},
],
};
myChart.setOption(option);
}
</script>
</body>
</html>
实际截图
image.png
二 折线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main" style="height: 400px"></div>
<script src="../libs/echarts-5.3.3.js"></script>
<script>
window.onload = function() {
let myChart = echarts.init(document.getElementById('main'), 'dark');
let option = {
grid: {
left: "5%",
right: "1%",
top: "20%",
bottom: "15%",
containLabel: true, // grid 区域是否包含坐标轴的刻度标签
},
legend: {
bottom: "5%",
itemGap: 40,
itemWidth: 30,
itemHeigth: 12,
textStyle: {
color: "#64BCFF",
},
icon: "rect",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "line",
lineStyle: {
color: "#20FF89",
},
},
},
xAxis: [
{
type: "category",
axisLine: {
show: false,
},
axisLabel: {
color: "#64BCFF",
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
data: [
"1月",
"2月",
"3月",
"4月",
"5月",
"6月",
"7月",
"8月",
"9月",
"10月",
"11月",
"12月",
],
},
],
yAxis: [
{
type: "value",
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
color: "#64BCFF",
},
},
],
series: [
// 第一条折线图
{
name: "正常",
type: "line",
smooth: true, // 是否平滑曲线显示。
symbolSize: 5, // 标记的大小
showSymbol: false,
itemStyle: {
color: "#20FF89",
},
// 区域填充样式。设置后显示成区域面积图。
areaStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#20FF89",
},
{
offset: 1,
color: "rgba(255, 255, 255, 0)",
},
],
false
),
},
data: [200, 200, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410],
},
// 第二条折线图 ( n 个系列图 )
{
name: "异常",
type: "line",
smooth: true, // 是否平滑曲线显示。
symbolSize: 5, // 标记的大小，可以设置成诸如 10 这样单一的数字
showSymbol: false, // 是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。
itemStyle: {
// 折线的颜色
color: "#EA9502",
},
// 折线区域的颜色
areaStyle: {
color: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#EA9502",
},
{
offset: 1,
color: "rgba(255, 255, 255, 0)",
},
],
},
},
data: [500, 300, 202, 258, 280, 660, 320, 202, 308, 280, 660, 420],
},
],
};
myChart.setOption(option);
}
</script>
</body>
</html>
实际截图
image.png
三 饼图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="main" style="height: 400px"></div>
<script src="../libs/echarts-5.3.3.js"></script>
<script>
window.onload = function() {
let myChart = echarts.init(document.getElementById('main'));
// =====准备数据=====
let pieDatas = [
{
value: 100,
name: "广州占比",
percentage: "5%",
color: "#34D160",
},
{
value: 200,
name: "深圳占比",
percentage: "4%",
color: "#027FF2",
},
{
value: 300,
name: "东莞占比",
percentage: "8%",
color: "#8A00E1",
},
{
value: 400,
name: "佛山占比",
percentage: "10%",
color: "#F19610",
},
{
value: 500,
name: "中山占比",
percentage: "20%",
color: "#6054FF",
},
{
value: 600,
name: "珠海占比",
percentage: "40%",
color: "#00C6FF",
},
];
// 将 pieDatas 格式的 数据映射为 系列图所需要的数据格式
let data = pieDatas.map((item) => {
return {
value: item.value,
name: item.name,
itemStyle: {
color: item.color,
},
};
});
// 求出总数
let total = pieDatas.reduce((a, b) => {
return a + b.value * 1;
}, 0);
// =====准备数据=====
// 2.指定图表的配置项和数据
var option = {
backgroundColor: "rgb(40,46,72)",
// 标题组件
title: {
text: `充电桩总数`,
top: "50%",
left: "50%",
padding: [-20, 0, 0, -45],
textStyle: {
fontSize: 19,
color: "white",
},
// subtext: `2100`,
// subtextStyle : {
// color: 'red'
// },
// 副标题使用-富文本语法：{style_name|value}， 注意不能有空格
subtext: `{totalSty|${total}}`,
subtextStyle: {
rich: {
totalSty: {
fontSize: 19,
color: "white",
width: 90,
align: "center",
},
},
},
},
legend: {
orient: "vertical",
right: "10%",
top: "18%",
itemGap: 10,
itemWidth: 16,
itemHeigth: 16,
icon: "rect",
// 自定义图例的名称
formatter: function (name) {
// 图例文本格式化 + 富文本定制样式
var currentItem = pieDatas.find((item) => item.name === name);
return (
"{nameSty|" +
currentItem.name +
"}\n" +
"{numberSty|" +
currentItem.value +
"个 }" +
"{preSty|" +
currentItem.percentage +
"}"
);
},
textStyle: {
rich: {
nameSty: {
fontSize: 12,
color: "#FFFFFF",
padding: [10, 14],
},
numberSty: {
fontSize: 12,
color: "#40E6ff",
padding: [0, 0, 0, 14],
},
preSty: {
fontSize: 12,
color: "#40E6ff",
},
},
},
},
series: [
{
type: "pie",
center: ["50%", "50%"], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
radius: ["30%", "75%"], // 饼图的半径。数组的第一项是内半径，第二项是外半径。
label: {
show: false,
},
// data: [ { name: '', value: '', itemStyle } ],
data: data,
roseType: "area", // area 玫瑰图, 圆心角一样，通过半径展现数据大小( 默认为false )
},
],
};
myChart.setOption(option);
}
</script>
</body>
</html>
实际截图
image.png
网友评论