Introduction à deux façons d'utiliser Echarts dans Vue

Cet article présente principalement les deux façons d'utiliser Echarts dans Vue. Cet article vous présente de manière très détaillée et a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer

1.

Première installation de npm echarts

npm install echarts --save

Développement :

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. echarts

Première installation de npm vue-echarts

npm install vue-echarts

développement :

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
    }]
  }
}

Ce qui précède est l'intégralité Nous espérons que le contenu de cet article sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois !

Recommandations associées :

Introduction à plusieurs méthodes d'importation couramment utilisées dans VUE (modules, fichiers)

Comment définir l'autorisation de connexion pour le routage dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!