1. 直接引入echarts
先npm安装echarts
rush:js;">
npm install echarts --save
开发：
main.js
rush: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
...
...
mounted() {
this.$chart.line1('chart1');
},
2、使用vue-echarts
先npm安装vue-echarts
rush:js;">
npm install vue-echarts
开发：
main.js
rush:js;">
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/bar'
import 'echarts/lib/component/tooltip'
Vue.component('chart',ECharts)
hello.vue
...
...
data: function() {
return {
orgOptions: {},}
},...
mounted() {
this.orgOptions = {
xAxis: {
type: 'category','Sun']
},yAxis: {
type: 'value'
},series: [{
data: [820,smooth: true
}]
}
}
总结
以上所述是小编给大家介绍的Vue中使用Echarts的两种方式。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
