vue-echarts の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+vue-echarts へ行く。
• +Vue+vue-echarts の差分を削除

#author("2022-06-15T19:36:20+08:00","default:Admin","Admin")
#author("2023-08-29T17:25:15+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents

* 安装 [#t9e21c35]

#codeprettify{{
npm install echarts --save
}}


* 简单的例程 [#bd35c4e0]

#codeprettify{{
<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>
}}

* Tips [#rd6e743f]

** 实例的销毁 [#n55dcfb6]

dispose 函数

#codeprettify{{
if (this.chart != null) this.chart.dispose();
}}


#hr();
コメント：
#comment_kcaptcha