プロジェクトのシナリオ:
Echartsを使ってvueでチャートを可視化、公式サイトは以下の通り
インストールして使用します。
①npmから取得
npm install echarts --save② vue プロジェクトに ECharts を導入する
main.js のグローバル インポート メソッド
//全局引入echarts(最新版5.0)，在main.js里
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
③シングルページファイルにコンテナを作成する
//在页面文件里创建一个div，一定要设置高！不然图表出不来！
<div id="chart" style="height: 600px" ref="chart"></div>コンテナの高さを必ず設定してください。そうしないとチャートが出てきません！
④vueのデータにechartsのインスタンスを定義する
//在data里定义一个实例，名字跟容器里的ref一致
export default {
data () {
return {
chart: null // echarts图表实例
}
},注: ref によって定義されたプロパティ名の一貫性を保つことが重要です。
⑤メソッドレイヤーで使用
// methods层负责定义方法
methods: {
initChart () {
// 初始化echarts
this.chart = this.$echarts.init(this.$refs.chart)
// 设置图表option(配置项)绘制图表
// 绘制图表
this.chart.setOption({
title: {
text: '商品销售数据'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
type: 'value'
},
backgroundColor: '#dddddd',
color: ['#72ccff', '#d4a4eb'],
series: [
{
name: '销量',
type: 'bar', // 柱状图
data: [5, 20, 36, 10, 10, 20]
},
{
name: '利润',
smooth: true,
type: 'line', // 折线图
data: [2, 23, 5, 54, 9, 33]
}
]
})
},
},⑥マウントされたページを初期化する
//mounted和methods同层级，不要嵌套到methods里，逗号隔开
mounted () {
// 在这里初始化 echarts 因为初始化要传实例
this.initChart()
},マウントされ、メソッドは同じレベルにあります。ネストは避けてください
わからない場合は、vue のライフサイクルを見てください。
簡単な科学、
mounted：domレンダリング完了、コンポーネント実装完了、ページ効果実現methods: イベントメソッドの実行、Vueのビヘイビアレイヤー
レンダリング効果:
完全なコード:
<template>
<div id="chart" style="height: 400px" ref="chart"></div>
</template>
<script>
export default {
data() {
chart: null // echarts图表实例
},
methods: {
initChart () {
this.chart = this.$echarts.init(this.$refs.chart)
this.chart.setOption({
title: {
text: '商品销售数据'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {
type: 'value'
},
backgroundColor: '#dddddd',
color: ['#72ccff', '#d4a4eb'],
series: [
{
name: '销量',
type: 'bar', // 柱状图
data: [5, 20, 36, 10, 10, 20]
},
{
name: '利润',
smooth: true,
type: 'line', // 折线图
data: [2, 23, 5, 54, 9, 33]
}
]
})
},
},
mounted () {
this.initChart()
},
</script>