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

vue-echarts插件随笔(两张图)

时间:2023-03-31 18:06:06 vue.js

vue使用echarts地图实例第一步:安装:npmi-Secharts安装好echarts依赖后,打开node_modules下map文件夹下的js。js文件包含:china.js-->中国地图world.js-->世界地图省份文件夹--->各省地图第二步:在全局main.js中引入地图资源importEchartsfrom'./plugin/echarts'Vue.use(Echarts);import"../node_modules/echarts/map/js/china.js"第三步:在echarts.js文件中添加chinaMap相关配置importechartsfrom'echarts'constinstall=function(Vue){//给vue原型挂载echartsObject.defineProperties(Vue.prototype,{$charts:{get(){return{//写viewchinaMap:function(id){this.chart=echarts.init(document.getElementById("chinamap"));this.chart.clear();//配置地图信息varoption={......//示例代码},this.chart.setOption(option)}}}}})}导出默认安装;第四步:在views文件夹下创建视图组件Map.vuemap

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