目次
折れ線グラフを知る
折れ線グラフは一般的に使用されるデータ視覚化グラフであり、通常、時間の経過とともに変化するデータの傾向やその他の連続変数を示すために使用されます。折れ線グラフはデータ ポイントを接続する複数の線で構成され、各線はデータ系列を表します。折れ線グラフの横軸は通常、時間またはその他の連続変数を表し、縦軸はデータの値を表し、折れ線の変化を通じてデータの傾向と変化を示します。
折れ線グラフを使用すると、株価、気温の変化、売上の変化など、さまざまな種類のデータを表示できます。折れ線グラフはシンプルかつ直観的で理解しやすく、データの傾向を効果的に表示できるため、データ分析、ビジネス上の意思決定、科学研究などの分野で広く使用されています。
折れ線グラフの作成
古いルールでは、折れ線グラフを使用するには、まず Echarts を導入する必要があります
<template>
<div ref="chart" style="width: 50%;height: 400px;"></div>
</template>
<script setup>
import * as echarts from 'echarts'
import {
ref, onMounted } from 'vue'
const chart = ref(null)
onMounted(() => {
const myChart = echarts.init(chart.value)
const option = {
//配置项
}
myChart.setOption(option)
})
上記のコードでは、最初にimportステートメント、次にmountedフック関数で Echarts インスタンスを作成し、指定された DOM 要素にマウントしました。同時に、Echarts 関連の構成項目を保存するオプション オブジェクトが定義されます。後で、そのsetOptionメソッド
最も単純な折れ線グラフを構成します。上で作成したオプション オブジェクトに次のコードを構成します。
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}]
}
上記のコードでは、7 つのデータ ポイントを含む折れ線グラフを作成しました。X 軸は曜日を表し、Y 軸はデータの値を表します。オプション オブジェクトの概要では、x 軸の型をcategoryカテゴリ型に設定し、データは曜日のテキスト配列、y 軸の型を 、つまりvalue数値型に設定します。折れ線グラフのデータはseries属性。
次に、メソッドを介してオプション オブジェクトをパラメータとして myChartsetOptionインスタンス。これにより、単純な折れ線グラフが完成します。ブラウザを更新して効果を確認します。
折れ線グラフの美化
ポリラインのスタイルを変更する
色、幅、スタイルなどのシリーズのlineStyleプロパティ コードは以下のように表示されます:
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
}
}]
変更が完了したら、ブラウザを更新して効果を確認してください
軸のスタイルを変更する
axisLabelおよびaxisLine属性を使用して、軸のラベルと線のスタイルを設定します。
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
color: '#080b30', // 坐标轴标签颜色
fontSize: 12, // 坐标轴标签字号
},
axisLine: {
lineStyle: {
color: '#333' // 坐标轴线颜色
}
}
},
yAxis: {
type: 'value',
axisLabel: {
color: '#080b30',
fontSize: 12
},
axisLine: {
lineStyle: {
color: '#333'
}
}
},
変更された効果
折れ線グラフの点のスタイルを変更する
symbol属性と系列内の属性の値を変更することでsymbolSize、点の形状やサイズを変更できます。itemStyle属性を通じてポイントの色と境界線のスタイルを変更します。
symbol属性は、円、正方形、三角形などのポイントのグラフィック タイプを指定するために使用され、symbolSize属性はポイントのサイズを指定するために使用されます。
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
},
symbol: 'circle', // 指定点的图形类型为圆形
symbolSize: 10, // 指定点的大小为10
itemStyle: {
color: 'red', // 指定点的颜色为红色
}
}]
ポリラインを滑らかな曲線に設定する
シリーズ内のsmooth属性曲線の滑らかさを制御します。
グラデーションカラー領域を設定する
areaStyle を構成して、折れ線グラフの下の領域を設定します。areaStyle を連続して設定し、その不透明度、色、shadowBlur などの属性を指定して、エリアの表示効果を制御します。
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
},
symbol: 'circle', // 指定点的图形类型为圆形
symbolSize: 10, // 指定点的大小为10
itemStyle: {
color: 'red', // 指定点的颜色为红色
},
smooth: true, // 将折线改为平滑曲线
areaStyle: {
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 158, 68, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 70, 131, 0.8)'
}]),
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
}
}]
折れ線グラフにマーカー線を追加する
seriesで設定しmarkLine、data、symbol、symbolSize、labelおよびその他の属性を指定して、マーカー ラインの表示効果を制御します。
symbol提供されるタグのタイプは次のとおりです: circle、rect、roundRect、triangle、diamond、pin、arrow、none
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
},
symbol: 'circle', // 指定点的图形类型为圆形
symbolSize: 10, // 指定点的大小为10
itemStyle: {
color: 'red', // 指定点的颜色为红色
},
smooth: true, // 将折线改为平滑曲线
areaStyle: {
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 158, 68, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 70, 131, 0.8)'
}]),
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
},
markLine: {
data: [
{
type: 'average',
name: '平均值',
label:{
show: true,
position: 'middle',
formatter: '{b}: {c}'
}
}
],
symbol:'pin',
symbolSize: 10,
},
}]
}
折れ線グラフにマーカー ポイントを追加する
seriesに設定しmarkPoint、data、symbol、symbolSize、labelおよびその他の属性を指定して、マーカー ポイントの表示効果を制御します。
series: [{
type: 'line',
data: [820, 932, 901, 934, 1290, 1330, 1320],
lineStyle: {
color: '#ff7f50', // 折线颜色
width: 2, // 折线宽度
type: 'dashed' // 折线样式
},
symbol: 'circle', // 指定点的图形类型为圆形
symbolSize: 10, // 指定点的大小为10
itemStyle: {
color: 'red', // 指定点的颜色为红色
},
smooth: true, // 将折线改为平滑曲线
areaStyle: {
opacity: 0.5,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 158, 68, 0.8)'
}, {
offset: 1,
color: 'rgba(255, 70, 131, 0.8)'
}]),
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.3)'
},
markLine: {
data: [
{
type: 'average',
name: '平均值',
label:{
show: true,
position: 'middle',
formatter: '{b}: {c}'
}
}
],
symbol:'pin',
symbolSize: 10,
},
markPoint: {
data: [{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}],
symbol: 'circle',
symbolSize: 20,
label: {
show: true,
position: 'top',
formatter: '{b}: {c}'
}
}
}]
}
上記のコードでは、属性はmarkPointマーカーのデータを設定し、属性はマーカーの形状を設定し、属性はマーカーのサイズを設定し、属性はマーカーのテキスト ラベルを設定します。マーカー テキストの表示内容は、属性を使用してカスタマイズできます。 はデータ項目の名前を表し、 はデータ項目の値を表します。datasymbolsymbolSizelabelformatter{b}{c}
折れ線グラフの相互作用
マウスオーバーツールチップを追加
tooltipユーザーがデータをより便利に表示できるように、プロパティを通じて折れ線グラフにマウス ホバー ヒントを追加します。
tooltip: {
trigger: 'axis' // 触发方式为鼠标悬停
}
ツールチップ構成項目の下にある axisPointer オブジェクトの lineStyle を変更して、プロンプト ラインのスタイルを設定することもできます。
tooltip: {
trigger: 'axis',
axisPointer: {
lineStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: 'rgba(0, 255, 233,0)'
}, {
offset: 0.5,
color: 'rgba(255, 0, 255,1)',
}, {
offset: 1,
color: 'rgba(0, 255, 233,0)'
}],
global: false
}
},
},
},
データ範囲の選択とズームを追加しました
データ領域の選択:構成項目を追加し、タイプを に設定することで、折れ線グラフにスクロール バーを
追加します。dataZoomslider
dataZoom: {
type: 'slider', // 选择器类型为滑动条
start: 0, // 默认选择范围的起始位置
end: 100 // 默认选择范围的结束位置
}
上記のコードは、dataZoom属性、データ領域選択のタイプをスライダーとして設定し、デフォルトの選択範囲の開始位置と終了位置を設定します。
データ スケーリング:
データ スケーリングとデータ領域の選択は両方とも追加されたdataZoom設定項目ですが、内部のタイプが異なります。データ スケーリングに設定されている場合は、タイプの内容を に設定します。これにより、チャートの下にinsideスクロール バーが表示されなくなります。マウスをチャート上に移動します。オンの場合、スクロール ホイールをスクロールしてチャートを拡大または縮小します。
dataZoom: {
type: 'inside', // 缩放类型为内置
start: 0, // 默认选择范围的起始位置
end: 100 // 默认选择范围的结束位置
}
まず、折れ線グラフに関する関連する概要をここに示します。興味のあるパートナーは、折れ線グラフをさらに深く学習できます。開発を待っている興味深い機能がまだたくさんあります。