vueでのEChartの使用、柱状図の例
35445 ワード
vueでのEChartの使用、簡単な例
1、npmインストールECharts
コマンド:npm install echarts--save
2、ECharts導入
メールでjsで通過
3、箱の保存図を定義する
4、EChartチャートの初期化
5、グラフの構成項目とデータを指定する
6、インスタンス化されたEChartsグラフにアイコン設定項目を設定し、domでグラフ表示をレンダリングする
7、総コード
1、npmインストールECharts
コマンド:npm install echarts--save
2、ECharts導入
メールでjsで通過
import echarts from "echarts";
Vue.prototype.$echarts = echarts;
3、箱の保存図を定義する
<template>
<div class="home">
<!-- -->
<div id="myChart" style="width: 600px;height:400px;"></div>
</div>
</template>
4、EChartチャートの初期化
let myChart = this.$echarts.init(document.getElementById("myChart"));
5、グラフの構成項目とデータを指定する
var option = {
//
title: {
//
text: " ",
//
subtext: " "
},
//
tooltip: {
// axis item （ ）
trigger: "axis"
},
//
legend: {
data: [" ", " "]
},
//
toolbox: {
// true false
show: true,
//
feature: {
//
dataView: {
//
show: true,
// false true
readOnly: false
},
//
magicType: {
//
show: true,
// line bar
type: ["line", "bar"]
},
//
restore: {
show: true },
//
saveAsImage: {
show: true }
}
},
//
calculable: true,
// X
xAxis: [
{
//
type: "category",
//
data: ["1 ","2 ","3 ","4 ","5 ","6 ","7 ","8 ","9 ", "10 ","11 ","12 "]
}
],
// Y
yAxis: [
{
type: "value"
// data ，
}
],
//
series: [
{
//
name: " ",
//
type: "bar",
data: [2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3],
// 。
markPoint: {
data: [
{
type: "max", name: " " },
{
type: "min", name: " " }
]
},
//
markLine: {
data: [
// 'average', 'min', 'max'
{
type: "average", name: " " }
]
}
},
{
//
name: " ",
//
type: "bar",
data: [2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3],
//
markPoint: {
data: [
// xAxis yAxis
{
name: " ", value: 182.2, xAxis: 7, yAxis: 183 },
{
name: " ", value: 2.3, xAxis: 11, yAxis: 3 }
]
},
//
markLine: {
// type 'average', 'min', 'max'
data: [{
type: "average", name: " " }]
}
}
]
};
6、インスタンス化されたEChartsグラフにアイコン設定項目を設定し、domでグラフ表示をレンダリングする
myChart.setOption(option);
7、総コード
<template>
<div class="home">
<!-- -->
<div id="myChart" style="width: 600px;height:400px;"></div>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: "Home",
mounted() {
this.SetEchart();
},
methods: {
SetEchart() {
// dom， echarts
let myChart = this.$echarts.init(document.getElementById("myChart"));
//
var option = {
//
title: {
//
text: " ",
//
subtext: " "
},
//
tooltip: {
// axis item （ ）
trigger: "axis"
},
//
legend: {
data: [" ", " "]
},
//
toolbox: {
// true false
show: true,
//
feature: {
//
dataView: {
//
show: true,
// false true
readOnly: false
},
//
magicType: {
//
show: true,
// line bar
type: ["line", "bar"]
},
//
restore: {
show: true },
//
saveAsImage: {
show: true }
}
},
//
calculable: true,
// X
xAxis: [
{
//
type: "category",
//
data: ["1 ","2 ","3 ","4 ","5 ","6 ","7 ","8 ","9 ", "10 ","11 ","12 "]
}
],
// Y
yAxis: [
{
type: "value"
// data ，
}
],
//
series: [
{
//
name: " ",
//
type: "bar",
data: [2.0,4.9,7.0,23.2,25.6,76.7,135.6,162.2,32.6,20.0,6.4,3.3],
// 。
markPoint: {
data: [
{
type: "max", name: " " },
{
type: "min", name: " " }
]
},
//
markLine: {
data: [
// 'average', 'min', 'max'
{
type: "average", name: " " }
]
}
},
{
name: " ",
type: "bar",
data: [2.6,5.9,9.0,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6.0,2.3],
markPoint: {
data: [
{
name: " ", value: 182.2, xAxis: 7, yAxis: 183 },
{
name: " ", value: 2.3, xAxis: 11, yAxis: 3 }
]
},
markLine: {
data: [{
type: "average", name: " " }]
}
}
]
};
myChart.setOption(option);
}
}
};
</script>