一 认识option配置项
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 () {
// 切换为svg的渲染器( 默认是canvas )
let myChart = echarts.init(document.getElementById("main"), "dark", {
renderer: "svg",
});
let option = {
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
myChart.setOption(option);
};
</script>
</body>
</html>
image.png
实际截图
image.png
三.Grid网格配置(组件)
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 option = {
// ECharts的背景
backgroundColor: "rgba(255, 0, 0, 0.1)",
// grid 网格组件( 绘图区域 )
grid: {
show: true,
backgroundColor: "rgba(0, 255, 0, 1)",
// top: 0,
// bottom: 0,
left: 0,
// right: 0,
containLabel: false,
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
};
myChart.setOption(option);
};
</script>
</body>
</html>
实际截图
image.png
三.一 grid网格 containLabel属性 如何为false(当为false的时候柱状图的 Y 轴的数据是不会显示出来的,此时你需要去手动的调整,top left right bottom的值了)
image.png
当为false的时候柱状图的 Y 轴的数据是不会显示出来的,此时你需要去手动的调整,top left right bottom的值了
grid: {
show: true,
backgroundColor: "rgba(0, 255, 0, 1)",
// top: 0,
// bottom: 0,
left: 300,
// right: 0,
containLabel: false,
},
实际截图
image.png
三.一 grid网格 containLabel属性 如何为true(当为true的时候 可以不设置left right top bottom的值,他会自动调整)
grid: {
show: true,
backgroundColor: "rgba(0, 255, 0, 1)",
// top: 0,
// bottom: 0,
// left: 0,
// right: 0,
containLabel: true,
},
image.png
四.坐标系配置(组件)
image.png
源码配置代码:
四.一 xAxis 中的show: true 配置的意义:
image.png
四.二 xAxis 中的 name:'类目坐标' 配置的意义:
image.png
四.三 xAxis中的 axisLine对象的配置
image.png
四.四 xAxis中的 axisLabel对象的配置
image.png
四.五 xAxis中的 axisTick对象的配置
image.png
四.五 xAxis中的 splitLine 对象的配置
image.png
四.五 yAxis中的name属性:
image.png
五.ECharts-series-系列图
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 option = {
backgroundColor: 'rgba(255, 0, 0, 0.1)',
grid: {
show: true,
backgroundColor: 'rgba(0, 255, 0, 0.1)',
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
type: 'bar',
label: {
show: true
},
// 方式一
// data: [5, 20, 36, 10, 10, 20],
// 方式二
// data: [
// // x index , y value
// [2, 36],
// [3, 10],
// [4, 10],
// [5, 20],
// [0, 5],
// [1, 20],
// ],
// 方式三(推荐)
// data: [
// {
// value: 5,
// name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
// // ....
// // ....
// },
// {
// value: 20,
// name: "羊毛衫",
// },
// {
// value: 36,
// name: "雪纺衫",
// },
// {
// value: 10,
// name: "裤子",
// },
// {
// value: 10,
// name: "高跟鞋",
// },
// {
// value: 20,
// name: "袜子",
// },
// ],
// 方式四
// data: [
// {
// value: [0, 5], // 数组第一项为x轴值，第二项为y轴值
// name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
// },
// {
// value: [1, 20],
// name: "羊毛衫",
// },
// {
// value: [2, 36],
// name: "雪纺衫",
// },
// {
// value: [3, 10],
// name: "裤子",
// },
// {
// value: [4, 10],
// name: "高跟鞋",
// },
// {
// value: [5, 20],
// name: "袜子",
// },
// ],
// 方式五(地理坐标系推荐)
data: [
{
value: [0, 5, 500], // 第一项为x轴或纬度值，第二项为y或维度轴值，第三项以后为扩展值
name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
},
{
value: [1, 20, 400],
name: "羊毛衫",
},
{
value: [2, 36, 200],
name: "雪纺衫",
},
{
value: [3, 10, 100],
name: "裤子",
},
{
value: [4, 10, 600],
name: "高跟鞋",
},
{
value: [5, 20, 300],
name: "袜子",
},
],
}
]
};
myChart.setOption(option);
}
</script>
</body>
</html>
五.一 ECharts-series-系列图label的柱子内部的显示 data展示的方式一:
image.png
五.二 ECharts-series-系列图-data展示的方式二 (此时是二维数组,展示的方式和上面的就完全不一样了)
此时展示的方式就是: 当二维数组中的第一项 代表的是 索引值, 第二项代表的是 数据
image.png
五.三 ECharts-series-系列图-data展示的方式三:
image.png
五.四 ECharts-series-系列图-data展示的方式四:
image.png
五.四 ECharts-series-系列图-data展示的方式五:
image.png
五.五 ECharts-series-系列图-type 属性的使用-- 柱状图(只需要配置type: 'bar')
image.png
五.六 ECharts-series-系列图-type 属性的使用-- 直线图(只需要配置type: 'line')
image.png
五.七 ECharts-series-系列图-type 属性的使用-- 散点图(只需要配置type: 'scatter')
image.png
五.七 ECharts-series-系列图-type 属性的使用-- 饼图(只需要配置type: 'pic')
image.png
此时的饼图的数据要改为这种结构的才会把疏导线展示出来:[ { value: 5,name: '衬衫' } ]
image.png
五.八 ECharts-series-系列图-label 属性的使用
image.png
五.九 ECharts-series-系列图-itemStyle属性的使用(指定每一项的颜色设置)
image.png
PS: 注意:
image.png
五.九 ECharts-series-系列图-emphasis 属性的使用(鼠标悬浮到图形元素上时,高亮的样式)
image.png
ps:
image.png
五. 十 ECharts-title-标题组件
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 option = {
backgroundColor: 'rgba(255, 0, 0, 0.1)',
grid: {
show: true,
backgroundColor: 'rgba(0, 255, 0, 0.1)',
},
title: {
show: true,
text: "Echart 5 条形图",
left: 20,
top: 10,
// subtext: '第二个标题'
// ....
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: "产品销量柱形图",
type: "bar",
data: [5, 20, 36, 10, 10, 20]
}
]
};
myChart.setOption(option);
}
</script>
</body>
</html>
五.十一 ECharts-legend-图例组件
<!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 option = {
backgroundColor: 'rgba(255, 0, 0, 0.1)',
grid: {
show: true,
backgroundColor: 'rgba(0, 255, 0, 0.1)',
},
legend: {
show: true,
// width: 100,
// itemWidth: 20
icon: 'circle', // round circle ...
// formatter: 'liu-{name}'
formatter: function(name) {
console.log(name)
// 富文本的语法: {style_name|content}
return name + '{percentageStyle| 40%}'
},
textStyle: {
rich: { // 给富文本添加样式
percentageStyle: {
color: 'red',
fontSize: 12
// css 样式
}
}
}
},
xAxis: {
show: false,
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
type: 'pie', // line bar scatter pie
label: {
show: true
},
// 方式三(推荐)
data: [
{
value: 5,
name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
},
{
value: 20,
name: "羊毛衫",
},
{
value: 36,
name: "雪纺衫",
},
{
value: 10,
name: "裤子",
},
{
value: 10,
name: "高跟鞋",
},
{
value: 20,
name: "袜子",
},
],
}
]
};
myChart.setOption(option);
}
</script>
</body>
</html>
实际截图
image.png
五.十二 ECharts-legend-修改legend的样式
image.png
五.十二 ECharts-legend-修改legend的中的文字 -- 字符串的写法:
image.png
五.十二 ECharts-legend-修改legend的中的文字 -- 函数的写法 的写法:
image.png
五.十三 ECharts-legend-修改legend的中的文字 -- 函数的写法 的写法 + 换行:
image.png
五.十四 ECharts-legend-修改legend的中的自定义的数据样式
image.png
五.十五 ECharts-tooltip-提示框组件 tootip默认是不显示的,所以要设置tootip中的show属性为true
image.png
五.十六 ECharts-tooltip-提示框组件 tootip的相关配置
image.png
五.十七 ECharts-图形-渐变色
<!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; height: 400px"></div>
<script src="../libs/echarts-5.3.3.js"></script>
<script>
window.onload = function () {
let myChart = echarts.init(document.getElementById("main"));
let option = {
backgroundColor: "rgba(255, 0, 0, 0.1)",
grid: {
show: true,
backgroundColor: "rgba(0, 255, 0, 0.1)",
},
tooltip: {
show: true,
// 使用了 trigger ，一般也结合 axisPointer
trigger: "axis", // 默认是 item
axisPointer: {
type: "shadow", // (默认是竖线 line) (横线 + 竖线 cross) (横线 + 竖线 shadow)
},
// formatter: '<div style="color:red">haha</div>'
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
# 这个是全局的壮图的配置
{
type: "bar",
// 图形的颜色
itemStyle: {
color: {
// 渐变
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "red",
},
{
offset: 1,
color: "blue",
},
],
},
},
data: [
# 这个是单个的item配置颜色
{
value: 5,
name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
// 图形的颜色
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#20FF89",
},
{
offset: 1,
color: "rgba(255, 255, 255, 0)",
},
],
false
),
},
},
{
value: 20,
name: "羊毛衫",
},
{
value: 36,
name: "雪纺衫",
},
{
value: 10,
name: "裤子",
},
{
value: 10,
name: "高跟鞋",
},
{
value: 20,
name: "袜子",
},
],
},
],
};
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 option = {
backgroundColor: 'rgba(255, 0, 0, 0.1)',
grid: {
show: true,
backgroundColor: 'rgba(0, 255, 0, 0.1)',
},
xAxis: {
show: false,
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
type: 'pie', // line bar scatter pie
label: {
show: true
},
// 设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度。
// center: ["50%", "50%"], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
// 百分比是参照容器高宽中较小一项( 感觉是直径 )
radius: ["0%", "80%"], // 饼图的半径。数组的第一项是内半径，第二项是外半径。
roseType: "area", //area玫瑰图(南丁格尔图)。 圆心角一样，通过半径展现数据大小(默认false)
// 方式三(推荐)
data: [
{
value: 5,
name: "衬衫", // 数据项名称, 比如pie系列 tooltip 需要用到
},
{
value: 20,
name: "羊毛衫",
},
{
value: 36,
name: "雪纺衫",
},
{
value: 10,
name: "裤子",
},
{
value: 10,
name: "高跟鞋",
},
{
value: 20,
name: "袜子",
},
],
}
]
};
myChart.setOption(option);
}
</script>
</body>
</html>
六.一 ECharts-series-系列图-center 属性的使用--饼图
image.png
六.二 ECharts-series-系列图-radius 属性的使用--饼图
image.png
六.三 ECharts-series-系列图-roseType属性的使用--饼图
image.png
网友评论