vue-echarts
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* 安装 [#t9e21c35]
#codeprettify{{
npm install echarts --save
}}
* 简单的例程 [#bd35c4e0]
#codeprettify{{
<template>
<div style="width: 100%; height: 100%" ref="chart"></d...
</template>
<script>
let Echarts = require('echarts/lib/echarts'); //基础实例 ...
require('echarts/lib/chart/bar'); //按需引入 bar = 柱状图
export default {
data() { return { chart: null } }, //图表实例
mounted() { this.init() },
methods: {
init() {
//2.初始化
this.chart = Echarts.init(this.$refs.chart);
//3.配置数据
let option = {
xAxis: { type: 'category', data: ['Mon', 'Tue', '...
yAxis: { type: 'value' }, //Y轴
series: [{ data: [120, 200, 150, 80, 70, 110, 130...
};
// 4.传入数据
this.chart.setOption(option);
}
}
};
</script>
}}
* Tips [#rd6e743f]
** 实例的销毁 [#n55dcfb6]
dispose 函数
#codeprettify{{
if (this.chart != null) this.chart.dispose();
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* 安装 [#t9e21c35]
#codeprettify{{
npm install echarts --save
}}
* 简单的例程 [#bd35c4e0]
#codeprettify{{
<template>
<div style="width: 100%; height: 100%" ref="chart"></d...
</template>
<script>
let Echarts = require('echarts/lib/echarts'); //基础实例 ...
require('echarts/lib/chart/bar'); //按需引入 bar = 柱状图
export default {
data() { return { chart: null } }, //图表实例
mounted() { this.init() },
methods: {
init() {
//2.初始化
this.chart = Echarts.init(this.$refs.chart);
//3.配置数据
let option = {
xAxis: { type: 'category', data: ['Mon', 'Tue', '...
yAxis: { type: 'value' }, //Y轴
series: [{ data: [120, 200, 150, 80, 70, 110, 130...
};
// 4.传入数据
this.chart.setOption(option);
}
}
};
</script>
}}
* Tips [#rd6e743f]
** 实例的销毁 [#n55dcfb6]
dispose 函数
#codeprettify{{
if (this.chart != null) this.chart.dispose();
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
