Vue2 で Echart を使用する

Vue2 で Echart を使用する

1. デモ効果

1.2 echart をインストールする

$npm install echarts --save

1.3 Vue Echart をインストールする

vue 用に特別に作られた Echarts 公式パッケージ

$npm install vue-echarts --save

1.4 mian.jsで導入

import 'echarts'

import Echarts from 'vue-echarts'

import 'echarts/theme/shine'//引入echart 主题(多种主题可使用)

import 'echarts/theme/cool'

const app = createApp(App)

app.component('v-chart', Echarts)

app.mount('#app')

コンポーネントで使用される 1.5

demo.vue

<template>

 <v-chart autoresize theme="shine" :option="option_column" style="height: 400px;width:600px;"></v-chart>

</template>

<script>

import LineOption from './options/echart-line.ts'

export default {

 name:'EchartLine',

 data() {

  return {

   option_column: LineOption

  };

 },

};

</script>

echart-line.ts

const LineOption = {

 xAxis: {

  type: 'category',

  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

 },

 yAxis: {

  type: 'value'

 },

 series: [

  {

   data: [820, 932, 901, 934, 1290, 1330, 1320],//数据

   type: 'line',//图表类型

   smooth: false,//是否

  }

 ]

};

export default LineOption;

1.6 その他のプロパティ

オプションは、チャート データ、チャート タイプ、およびチャートのその他のプロパティを定義します。

公式 Web サイトでデモを表示する場合は、デモのオプションを直接置き換えるだけで、他の効果についてはさらに検討する必要があります。