+Vue+vue-echarts のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+Vue+vue-echarts へ行く。
- 1 (2022-06-15 (水) 20:24:55)
- 2 (2022-06-15 (水) 20:36:20)

※前提条件：本文基于 Vue 2.0 创作

安装
简单的例程

安装 †[edit]

npm install echarts --save

↑

简单的例程 †[edit]

<template>
   <div style="width: 100%; height: 100%" ref="chart"></div>
</template>
<script>
let Echarts = require('echarts/lib/echarts'); //基础实例 注意不要使用import
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', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, //X轴
        yAxis: { type: 'value' }, //Y轴
        series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] //配置项
      };
      // 4.传入数据
      this.chart.setOption(option);
    }
  }
};
</script>

コメント：