详解Vue中使用Echarts的两种方式

1. 直接引入echarts

先npm安装echarts

npm install echarts --save

开发：

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
...
<div id=\"chart1\"></div>
...
mounted() {
  this.$chart.line1(\'chart1\');
},

2、使用vue-echarts

先npm安装vue-echarts

npm install vue-echarts

开发：

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: \'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
    }]
  }
}

以上所述是小编给大家介绍的Vue中使用Echarts的两种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！