详解Vue中使用Echarts的两种方式
1.直接引入echarts
先npm安装echarts
npminstallecharts--save
开发：
main.js
importmyChartsfrom'./comm/js/myCharts.js'
Vue.use(myCharts)
myCharts.js
/**
*各种画echarts图表的方法都封装在这里
*/
importechartsfrom'echarts'
(function(){
varchart={};
chart.install=function(vue){
vue.prototype.$chart={
//画一条简单的线
line1:function(id){
this.chart=echarts.init(document.getElementById(id));
this.chart.clear();
constoptionData={
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(typeofexports=='object'){
module.exports=chart
}
})()
hello.vue
...
2、使用vue-echarts
先npm安装vue-echarts
npminstallvue-echarts
开发：
main.js
importEChartsfrom'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',
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的两种方式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！