Einführung in zwei Möglichkeiten zur Verwendung von Echarts in Vue

In diesem Artikel werden hauptsächlich die beiden Möglichkeiten zur Verwendung von Echarts in Vue vorgestellt. Dieser Artikel stellt Ihnen einen gewissen Referenzwert vor.

1

First npm install echarts

npm install echarts --save

Entwicklung:

main.js

import myCharts from './comm/js/myCharts.js'
Vue.use(myCharts)
myCharts.js
/**
 * 各种画echarts图表的方法都封装在这里
 */
import echarts from 'echarts'
(function() {
  var chart = {};
  chart.install = function(vue) {
    vue.prototype.$chart = {
      //画一条简单的线
      line1: function(id) {
        this.chart = echarts.init(document.getElementById(id));
        this.chart.clear();
        const optionData = {
          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: true
          }]
        };
        this.chart.setOption(optionData);
      },
    }
  }
  if(typeof exports == 'object') {
    module.exports = chart
  }
})()
hello.vue
...
<p id="chart1"></p>
...
mounted() {
  this.$chart.line1(&#39;chart1&#39;);
},

2. Verwenden Sie vue-echarts

Erste npm-Installation von vue-echarts

npm install vue-echarts

Entwicklung:

main.js

import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
Vue.component('chart', ECharts)
hello.vue
...
<chart ref="chart1" :options="orgOptions" :auto-resize="true"></chart>
...
data: function() {
  return {
    orgOptions: {},
  }
},
...
mounted() {
  this.orgOptions = {
    xAxis: {
      type: &#39;category&#39;,
      data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;]
    },
    yAxis: {
      type: &#39;value&#39;
    },
    series: [{
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      type: &#39;line&#39;,
      smooth: true
    }]
  }
}

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe es Wird für alle hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Einführung in mehrere häufig in VUE verwendete Importmethoden (Module, Dateien)

So legen Sie die Anmeldeberechtigung für das Routing in Vue fest

Das obige ist der detaillierte Inhalt vonEinführung in zwei Möglichkeiten zur Verwendung von Echarts in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!