详解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的两种方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!