導入：
ECharts は JavaScript ベースのデータ視覚化チャート ライブラリであり、直感的、鮮明、インタラクティブでカスタマイズ可能なデータ視覚化チャートを提供します。ECharts はもともと Baidu チームによってオープンソースでしたが、2018 年初めに Apache Foundation に寄贈され、ASF インキュベーション レベルのプロジェクトになりました。
どのブログでも強調していることですが、ECharts を学ぶ最も直接的かつ効果的な方法は、必要なものがすべて揃っている公式 Web サイトにアクセスすることです。公式 Web サイトのアドレス: https://echarts.apache.org/en/index.html
もちろん、私はいくつかのつたない記事を書きました。興味があれば、見てください。役に立った場合は、高評価をしてください。クアン兄弟はまだとても幸せです
| タイトル | 住所 |
|---|---|
| ECharts の初めての体験 | ポータル |
| ECharts の一般的な構成 | ポータル |
| ヒストグラム | ポータル |
| Eチャート公式サイト | ポータル |
折れ線グラフ
データ表示に echart を使用するには、次の 5 つの手順が必要であることは誰もが知っています。
ステップ 1: echarts.js ファイルをインポートします。
ステップ 2: チャートをレンダリングするためのボックスを準備します (このボックスには幅と高さを指定する必要があります)
ステップ 3: echarts インスタンス オブジェクトを初期化します (このスクリプト タグは、チャートをレンダリングするためのボックスの後に配置する必要があります)。 chart、または window.onload )
ステップ 4: 構成項目を準備します (ECharts を使用して別のテーブルを作成します。構成項目のみが変更され、他のコードは修正されます) ステップ 5: 構成項目を
echarts インスタンス オブジェクトに構成します
———— —————————————
基本的な実装
折れ線グラフの基本構造はヒストグラムとあまり変わらないので、完全なケースコードを以下に貼り付けます。
違いは、系列のタイプが type、ヒストグラムが bar、折れ線グラフが line であることです。
<!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="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var oDiv = document.querySelector('div');
var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
yDataArr = [2000,1000,2500,1550,1800,1300,1400,2800,1200,950,1100,2000];
var mCharts = echarts.init(oDiv);
var option = {
type: 'line',
name: '销量',
xAxis:{
type: 'category',
data: xDataArr
},
yAxis:{
type: 'value'
},
series: {
name: '白象方便面销量',
type: 'line',
data: yDataArr
}
}
mCharts.setOption(option)
</script>
</body>
</html>
上記のコードに疑問がある場合は、ポータルの記事の冒頭にある以前の記事を読むことができます。
上記のコードをブラウザ上で実行すると、効果は次のようになります
スタイル スタイル
同様に、折れ線グラフにも対応する最大値、最小値、平均値などのスタイルがあり、方法もヒストグラムと一致しているため、ここではあまり説明しません。ヒストグラムは、データ視覚化 - ECharts - ヒストグラム
で表示できます。
ここではヒストグラムとは異なる折れ線グラフについて主に説明します。
マークエリア (markArea)
このコードをシリーズで記述します。次の点に注意してください。
- markArea の値はオブジェクトである必要があります
- markAreaに属性データがあり、その値が配列である
- 配列内の 2 つの配列は実際にはマークされた間隔です
- 2 つのオブジェクトは X 軸座標に相当します
markArea: {
data: [
[
{
xAxis:'1月'},
{
xAxis:'2月'}
],
[
{
xAxis:'7月'},
{
xAxis:'10月'}
]
]
}
滑らかな曲線（滑らか）
このコードを連続して記述します。このコード行は、markArea、markPoint などに相当します。
// 是否为平滑的曲线，默认为false
smooth: true,
線のスタイル (lineStyle)
ここでは、破線と実線、色、太さなどを含むポリラインのスタイルを設定できます。
lineStyle: {
color: 'green',
// dashed 虚线 dotted 点线 solid 实线
type: 'solid'
}
塗りつぶしスタイル (areaStyle)
このコード行をシリーズで書いてください
areaStyle: {
color: 'yellow'
}
この時のブラウザではこんな感じ
こいつらのことは忘れてください。
スケール、0 値から離れたスケール スケール: true--------これは値軸の構成に書き込む必要があります、座標軸の両側に空白の戦略、false 空白の境界はありません
ギャップ: false--- ------これはカテゴリ軸に書く必要があります
コードは以下のように表示されます:
<!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="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var oDiv = document.querySelector('div');
var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
// yDataArr = [2000,1000,2500,1550,1800,1300,1400,2800,1200,950,1100,2000];
yDataArr = [2480,2496,2500,2488,2487,2480,2490,2486,2485,2482,2490,2481];
var mCharts = echarts.init(oDiv);
var option = {
xAxis:{
type: 'category',
data: xDataArr,
//坐标轴两边留白策略,false 不留白
boundaryGap: false
},
yAxis:{
type: 'value',
// boundaryGap: true
// 缩放，脱离0值比例
scale: true
},
series: {
name: '白象方便面销量',
type: 'line',
data: yDataArr,
// 最大值，最小值
markPoint: {
data: [
{
type: 'max',name: '最大值'
},
{
type: 'min',name: '最小值'
}
]
},
// 平均值
markLine: {
data: [
{
type: 'average',name: '平均值'}
]
},
// 标记区域
markArea: {
data: [
[
{
xAxis:'1月'},
{
xAxis:'2月'}
],
[
{
xAxis:'7月'},
{
xAxis:'10月'}
]
]
},
// 是否为平滑的曲线
smooth: true,
// 线的样式
lineStyle: {
color: 'green',
// dashed 虚线 dotted 点线 solid 实线
type: 'solid'
},
// 填充风格
areaStyle: {
color: 'yellow'
}
}
}
mCharts.setOption(option)
</script>
</body>
</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="./lib/echarts.min.js"></script>
</head>
<body>
<!--
数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
-->
<div style="width: 600px;height: 400px;"></div>
<script>
var oDiv = document.querySelector('div');
var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
yDataArr = [2000,1000,2500,1550,1800,1300,1400,2800,1200,950,1800,2000],
yDataArr2 = [2480,1496,1500,2400,2480,2680,2490,2000,1500,1600,2000,1200];
var mCharts = echarts.init(oDiv);
var option = {
xAxis:{
type: 'category',
data: xDataArr
},
yAxis:{
type: 'value'
},
series: [
{
name: '白象方便面销量',
type: 'line',
data: yDataArr,
// 堆叠图主要是靠stack属性，series中每个对象的stack值要保持一直
stack: 'all',
areaStyle: {
}
},
{
name: '统一方便面销量',
type: 'line',
data: yDataArr2,
stack: 'all',
areaStyle: {
}
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
効果は以下の通りです
