Introduction à deux façons d'utiliser Echarts dans Vue-js tutoriel-php.cn

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

不言

Libérer： 2018-07-03 14:35:57

original

1730 Les gens l'ont consulté

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

Première installation de npm echarts

npm install echarts --save

Copier après la connexion

Développement :

main.js

import myCharts from &#39;./comm/js/myCharts.js&#39;
Vue.use(myCharts)
myCharts.js
/**
 * 各种画echarts图表的方法都封装在这里
 */
import echarts from &#39;echarts&#39;
(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: &#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
          }]
        };
        this.chart.setOption(optionData);
      },
    }
  }
  if(typeof exports == &#39;object&#39;) {
    module.exports = chart
  }
})()
hello.vue
...
<p id="chart1"></p>
...
mounted() {
  this.$chart.line1(&#39;chart1&#39;);
},

Copier après la connexion

2. echarts

Première installation de npm vue-echarts

npm install vue-echarts

Copier après la connexion

développement :

main.js

import ECharts from &#39;vue-echarts/components/ECharts&#39;
import &#39;echarts/lib/chart/bar&#39;
import &#39;echarts/lib/component/tooltip&#39;
Vue.component(&#39;chart&#39;, 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
    }]
  }
}

Copier après la connexion

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!