Through the histogram example, this article will let you learn the basic use of Echarts! ! !
Look at the effect first:
Get Echarts
File Directory
Introduce Echarts
Directly import the built echarts file through tags
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script>
</head>
</html>
Draw a chart
Before drawing, we need to prepare a DOM container with height and width for ECharts.
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1710px; height: 670px"></div>
</body>
Then you can echarts.initinitialize an echarts instance through the setOptionmethod and generate a histogram through the method. The following is the code step split.
title
Title component, including main title and subtitle
title: {
text: '新增课本', // 主标题文本
show: true, // 是否显示标题组件
textStyle: {
color: '#6699ff',
fontSize: 36,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
},
top: '42',
left: '40'
}
When top/left is not added: When top/left is
added:
For details on the title attribute, please see: https://echarts.apache.org/zh/option.html#title
series
Series list. Each series through typeto determine their own chart types
series: [ // 系列列表。每个系列通过 type 决定自己的图表类型
{
name: '新增数量', // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
type: 'bar', // 柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型
data: values, // (数组) 单个数据项的数值
xAxisIndex: 0, // 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用
yAxisIndex: 0, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
barWidth: '30px', // 柱条的宽度，不设时自适应
itemStyle: {
// 自定义特殊 itemStyle，仅对该数据项有效--数据项样式
color: '#6482ff',
barBorderRadius:[10,10,0,0] // 数据项图形的边框圆角样式
},
label: {
// 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
show: false // 是否显示标签，在数据项上
}
}
]
For specific details of the series attribute, please see: https://echarts.apache.org/zh/option.html#series
legend
Legend component, the legend component shows different series of symbols, colors and names. You can control which series are not displayed by clicking the legend
Scrolling legend (vertical)
Scrolling legend (horizontal)
attributes:
legend For details on specific attributes, please see: https://echarts.apache.org/zh/option.html#legend
legend: {
// 图例组件，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
top: 150,
right: 0,
textStyle: {
fontSize: '24px',
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
color: '#c2cbf2'
}
}
grid
Drawing grid in rectangular coordinate system, a single grid can place up to two X-axes up and down, and two Y-axes left and right. You can be plotted on a grid 折线图, 柱状图, 散点图（气泡图）.
For specific details of the example
grid attributes, please see: https://echarts.apache.org/zh/option.html#grid
grid: {
left: 70, // grid 组件离容器左侧的距离
top: 200,
right: 40,
bottom: 70
}
xAxis
The x-axis in the Cartesian coordinate system grid. Generally, a single grid component can only put up and down two x-axes at most. More than two x-axes need to be configured to offsetprevent the overlap of multiple x-axes at the same position
. Please refer to the specific properties of xAxis See: https://echarts.apache.org/zh/option.html#xAxis
xAxis: [ // 直角坐标系 grid 中的 x 轴
{
type: 'category', // 类目轴
data: xKeys, // 类目数据 类目轴有效
color: '#323e52',
position: 'bottom', // x轴的位置
axisLabel: {
// 坐标轴刻度标签的相关设置
margin: 20, // 刻度标签与轴线之间的距离
interval: 'auto', // 坐标轴刻度标签的显示间隔 类目轴有效
textStyle: {
fontSize: 24,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
textAlign: 'center',
color: '#c2cbf2'
}
},
axisLine: {
// 坐标轴轴线相关设置
lineStyle: {
color: '#b7ccff',
type: 'solid'
}
},
splitLine: {
// 坐标轴在grid区域中的分隔线
show: false
}
}
]
in case
splitLine: {
// 坐标轴在grid区域中的分隔线
show: true
}
yAxis
The y-axis in the Cartesian coordinate system grid. Generally, a single grid component can only be placed on the left and right y-axes. More than two y-axes need to be configured to offsetprevent the overlap of multiple Y-axes at the same location
For specific details of yAxis properties, please see: https://echarts.apache.org/zh/option.html#yAxis
yAxis: [ // 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠
{
type: 'value', // 数值轴,适用于连续数据
silent: true, // 坐标轴是否是静态无法交互
interval: 100, // 强制设置坐标轴分割间隔
min: 0, // 坐标轴刻度最小值
max: 600, // 坐标轴刻度最大值
axisLabel: {
// 坐标轴刻度标签的相关设置
textStyle: {
fontSize: 24,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
textAlign: 'right',
color: '#c2cbf2'
}
},
axisLine: {
// 坐标轴轴线相关设置
show: false
},
axisTick: {
// 坐标轴刻度相关设置
show: false // 是否显示坐标轴刻度
},
splitLine: {
show: true,
lineStyle: {
color: '#b7ccff',
type: 'solid'
}
}
}
]
in case
axisTick: {
// 坐标轴刻度相关设置
show: false // 是否显示坐标轴刻度
}
The complete code is as follows:
Add textbook.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新增课本</title>
<script src="../incubator-echarts-5.0.0-alpha.2/dist/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1710px; height: 670px"></div>
<script type="text/javascript">
// 基于准备好的dom, 初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 数据集
const dataList = [
{
name: '语文', value: 116},
{
name: '数学', value: 256},
{
name: '英语', value: 446},
{
name: '历史', value: 111},
{
name: '政治', value: 416},
{
name: '地理', value: 446},
{
name: '生物', value: 516},
{
name: '化学', value: 236},
{
name: '物理', value: 382}
]
const xKeys = dataList.map((item) => item.name)
const values = dataList.map((item) => item.value)
// 指定图标的配置和数据
var option = {
title: {
text: '新增课本', // 主标题文本
show: true, // 是否显示标题组件
textStyle: {
color: '#6699ff',
fontSize: 36,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
},
top: '42',
left: '40'
},
series: [ // 系列列表。每个系列通过 type 决定自己的图表类型
{
name: '新增数量', // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
type: 'bar', // 柱状图（或称条形图）是一种通过柱形的高度（横向的情况下则是宽度）来表现数据大小的一种常用图表类型
data: values, // (数组) 单个数据项的数值
xAxisIndex: 0, // 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用
yAxisIndex: 0, // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
barWidth: '30px', // 柱条的宽度，不设时自适应
itemStyle: {
// 自定义特殊 itemStyle，仅对该数据项有效--数据项样式
color: '#6482ff',
barBorderRadius:[10,10,0,0] // 数据项图形的边框圆角样式
},
label: {
// 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
show: false // 是否显示标签，在数据项上
}
}
],
legend: {
// 图例组件，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
top: 150,
right: 0,
textStyle: {
fontSize: '24px',
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
color: '#c2cbf2'
}
},
grid: {
left: 70, // grid 组件离容器左侧的距离
top: 200,
right: 40,
bottom: 70
},
xAxis: [ // 直角坐标系 grid 中的 x 轴
{
type: 'category', // 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据
data: xKeys, // (数组)类目数据，在类目轴（type: 'category'）中有效
color: '#323e52',
position: 'bottom', // x轴的位置 默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧
axisLabel: {
// 坐标轴刻度标签的相关设置
margin: 20, // 刻度标签与轴线之间的距离
interval: 'auto', // 坐标轴刻度标签的显示间隔 类目轴有效
textStyle: {
fontSize: 24,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
textAlign: 'center',
color: '#c2cbf2'
}
},
axisLine: {
// 坐标轴轴线相关设置
lineStyle: {
color: '#b7ccff',
type: 'solid'
}
},
splitLine: {
// 坐标轴在grid区域中的分隔线
show: false
}
}
],
yAxis: [ // 直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠
{
type: 'value', // 数值轴,适用于连续数据
silent: true, // 坐标轴是否是静态无法交互
interval: 100, // 强制设置坐标轴分割间隔
min: 0, // 坐标轴刻度最小值
max: 600, // 坐标轴刻度最大值
axisLabel: {
// 坐标轴刻度标签的相关设置
textStyle: {
fontSize: 24,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
textAlign: 'right',
color: '#c2cbf2'
}
},
axisLine: {
// 坐标轴轴线相关设置
show: false
},
axisTick: {
// 坐标轴刻度相关设置
show: true // 是否显示坐标轴刻度
},
splitLine: {
show: true,
lineStyle: {
color: '#b7ccff',
type: 'solid'
}
}
}
]
}
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option)
</script>
</body>
</html>
Modify some issues (bug)
Example: Question One
grid: {
left: 'auto',
top: 346,
right: 'auto',
containLabel:true,
bottom: 20,
},
//grid这样写，左右都写成auto，还要加containLabel，不然就有可能挡住y轴的标签
Example: Question Two
yAxis里面的max不能写死，不然最大值永远不会变，比如max=100，实际的值超过是200，那就会挡住
