この記事では、ヒストグラムの例を使用して、Echartsの基本的な使用法を学びます。！！
最初に効果を見てください：
Echartsを入手する
ファイルディレクトリ
Echartsを紹介する
ビルドされたechartsファイルをタグを介して直接インポートします
<!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>
グラフを描く
描画する前に、EChartsの高さと幅のDOMコンテナーを準備する必要があります。
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1710px; height: 670px"></div>
</body>
次にecharts.init、setOptionメソッドを使用してechartsインスタンスを初期化し、メソッドを使用してヒストグラムを生成できます。以下は、コードステップの分割です。
題名
メインタイトルとサブタイトルを含むタイトルコンポーネント
title: {
text: '新增课本', // 主标题文本
show: true, // 是否显示标题组件
textStyle: {
color: '#6699ff',
fontSize: 36,
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
},
top: '42',
left: '40'
}
上/左を追加しない場合：上/左を
追加する場合：
title属性の詳細については、https：//echarts.apache.org/zh/option.html#titleを参照してください。
シリーズ
シリーズ一覧。type独自のチャートタイプを決定するための各シリーズ
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 // 是否显示标签，在数据项上
}
}
]
series属性の具体的な詳細については、https：//echarts.apache.org/zh/option.html#seriesを参照してください。
伝説
凡例コンポーネント。凡例コンポーネントは、さまざまな一連のシンボル、色、および名前を示します。凡例をクリックして、表示しないシリーズを制御できます
スクロール凡例（垂直）
スクロール凡例（水平）
属性：
凡例特定の属性の詳細については、https：//echarts.apache.org/zh/option.html#legendを参照してください。
legend: {
// 图例组件，图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示
top: 150,
right: 0,
textStyle: {
fontSize: '24px',
fontFamily: 'Microsoft YaHei',
fontWeight: 400,
color: '#c2cbf2'
}
}
グリッド
グリッドを直交座標系で描画すると、1つのグリッドで最大2つのX軸を上下に、2つのY軸を左右に配置できます。あなたはグリッド上にプロットすることができ折线图、柱状图、散点图（气泡图）。
サンプルの
グリッド属性の具体的な詳細については、https：//echarts.apache.org/zh/option.html#gridを参照してください。
grid: {
left: 70, // grid 组件离容器左侧的距离
top: 200,
right: 40,
bottom: 70
}
xAxis
デカルト座標系グリッドのx軸。通常、1つのグリッドコンポーネントは、最大で2つのx軸のみを上下に配置できます。offset同じ位置で複数のx軸が重複しないようにするには、3 つ以上のx軸を構成する必要があります
。xAxisの特定のプロパティを参照してください参照：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
}
}
]
万一に備えて
splitLine: {
// 坐标轴在grid区域中的分隔线
show: true
}
yAxis
デカルト座標系グリッドのy軸。通常、1つのグリッドコンポーネントは左右のy軸にのみ配置できます。offset同じ場所で複数のY軸が重複しないようにするには、3 つ以上のy軸を構成する必要があります
yAxisプロパティの具体的な詳細については、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'
}
}
}
]
万一に備えて
axisTick: {
// 坐标轴刻度相关设置
show: false // 是否显示坐标轴刻度
}
完全なコードは次のとおりです。
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>
いくつかの問題を修正（バグ）
例：質問1
grid: {
left: 'auto',
top: 346,
right: 'auto',
containLabel:true,
bottom: 20,
},
//grid这样写，左右都写成auto，还要加containLabel，不然就有可能挡住y轴的标签
例：質問2
yAxis里面的max不能写死，不然最大值永远不会变，比如max=100，实际的值超过是200，那就会挡住
