vue ECharts を使用するための詳細な手順:
-
ECharts のインストール:
Vue プロジェクトで ECharts を使用する前に、まず ECharts ライブラリをインストールする必要があります。npm または Yarn を使用して ECharts の依存関係をインストールできます。npm install echarts --saveまたは
yarn add echarts -
ECharts ライブラリをインポートする:
Vue コンポーネントでは、ECharts ライブラリをインポートし、チャートを描画するための ECharts インスタンスを作成する必要があります。ECharts ライブラリは、ECharts を使用する必要があるコンポーネントにインポートできます。import echarts from 'echarts'; -
チャート コンテナを作成する:
Vue テンプレートでは、チャートを表示するためのコンテナ要素を作成する必要があります。一意の ID を持つ div 要素をチャートのコンテナとしてテンプレートに追加できます。<template> <div id="chartContainer"></div> </template> -
ECharts インスタンスを初期化する:
Vue コンポーネントのmountedライフサイクル フックで、ECharts インスタンスを初期化し、チャート コンテナーと構成項目を指定できます。mounted() { // 获取图表容器元素 const chartContainer = document.getElementById('chartContainer'); // 创建ECharts实例 const chart = echarts.init(chartContainer); // 设置图表配置项 const options = { // 配置项内容，例如：图表类型、数据、样式等 }; // 使用配置项绘制图表 chart.setOption(options); } -
グラフ オプションの構成:オブジェクト
で、グラフの種類、データ、スタイルなどを構成できます。部分的なオプション テーブル:以下は、一般的に使用されるチャート オプションとサンプル コードの詳細な説明です。options -
title：
title: {
text: '图表标题',
subtext: '副标题'
}
tooltip：
tooltip: {
trigger: 'axis', // 提示框触发条件，可选值：'axis'（坐标轴触发）, 'item'（数据项触发）
formatter: '{b}: {c}' // 提示框的格式化函数，{b}表示类目轴的值，{c}表示数据值
}
legend：
legend: {
data: ['系列1', '系列2'] // 图例的名称，对应series中的name属性
}
xAxisそしてyAxis：
xAxis: {
type: 'category', // 坐标轴类型，可选值：'category'（类目轴），'value'（数值轴），'time'（时间轴），'log'（对数轴）
data: ['数据1', '数据2', '数据3'] // 类目轴的数据
},
yAxis: {
type: 'value' // 数值轴
}
series：
series: [{
name: '系列1',
type: 'bar', // 柱状图
data: [100, 200, 300] // 数据值
}, {
name: '系列2',
type: 'line', // 折线图
data: [50, 150, 250]
}]
grid：
grid: {
left: '10%', // 网格左侧的距离
right: '10%', // 网格右侧的距离
top: '10%', // 网格顶部的距离
bottom: '10%' // 网格底部的距离
}
toolbox：
toolbox: {
feature: {
saveAsImage: {
}, // 保存图表为图片
dataView: {
} // 数据视图
}
}
dataZoom：
dataZoom: [{
type: 'slider', // 滑动条型数据区域缩放
start: 0, // 起始位置百分比
end: 50 // 结束位置百分比
}]
visualMap：
visualMap: {
type: 'continuous', // 连续型视觉映射
min: 0, // 最小值
max: 100, // 最大值
color: ['blue', 'red'] // 映射的颜色范围
}
- チャート データの更新:
Vue コンポーネントでチャート データを動的に更新する必要がある場合は、chart.setOption(options)メソッドを使用してチャートの構成アイテムを更新できます。
棒グラフ、折れ線グラフ、円グラフの例
以下は棒グラフ、折れ線グラフ、円グラフのサンプル コードです。必要に応じて Vue プロジェクトで使用できます。
- ヒストグラムの例:
<template>
<div id="barChart" style="width: 600px; height: 400px;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
mounted() {
const chartContainer = document.getElementById('barChart');
const chart = echarts.init(chartContainer);
const options = {
title: {
text: '柱状图示例',
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E'],
},
yAxis: {
type: 'value',
},
series: [
{
type: 'bar',
data: [10, 20, 30, 40, 50],
},
],
};
chart.setOption(options);
},
};
</script>
- 折れ線グラフの例:
<template>
<div id="lineChart" style="width: 600px; height: 400px;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
mounted() {
const chartContainer = document.getElementById('lineChart');
const chart = echarts.init(chartContainer);
const options = {
title: {
text: '折线图示例',
},
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E'],
},
yAxis: {
type: 'value',
},
series: [
{
type: 'line',
data: [10, 20, 30, 40, 50],
},
],
};
chart.setOption(options);
},
};
</script>
- 円グラフの例:
<template>
<div id="pieChart" style="width: 600px; height: 400px;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
mounted() {
const chartContainer = document.getElementById('pieChart');
const chart = echarts.init(chartContainer);
const options = {
title: {
text: '饼状图示例',
},
series: [
{
type: 'pie',
data: [
{
name: 'A', value: 10 },
{
name: 'B', value: 20 },
{
name: 'C', value: 30 },
{
name: 'D', value: 40 },
{
name: 'E', value: 50 },
],
},
],
};
chart.setOption(options);
},
};
</script>