当前位置: 首页 > Web前端 > vue.js

vue-echarts插件使用随笔(一张图表)

时间:2023-04-01 11:22:16 vue.js

Vue使用echarts图表示例第一步:安装:npmi-Secharts第二步:创建plugins文件夹,创建echarts.js并配置importechartsfrom'echarts'constinstall=function(Vue){//安装echarts挂载到vueprototypeObject.defineProperties(Vue.prototype,{$charts:{get(){return{//写视图线:function(id){this.chart=echarts.init(document.getElementById(id));this.chart.clear();//增加配置varoption={......//示例代码},this.chart.setOption(option)}}}}})}exportdefaultinstall;第三步:全局导入使用,所有插件都需要use()importEchartsfrom'./plugin/echarts'Vue.use(Echarts);第四步:在views文件夹class="map>下创建视图组件Map.vue

mounted(){this.$charts.line("line");}#line{width:100%;height:400px;}第五步:导入App.vue让它显示importMapfrom'./views/Map'components:{Map}