这里的china.json 可以直接import引入,不需要和echarts官网例子一致, 使用也会更方便axios.get("/city/china.json").then((res)=>{console.log(res);echarts.registerMap("china",{geoJSON:res.data});this.mapChart=echarts.init(document.getElementById("mapChart"));// 目标数据格式// let arr = [/...
这一步完成之后,相当于地图已经注册了,但是需要一个载体来呈现它,这时候echarts就出场了: 各种数据初始化准备: 另外我封装了一个方法makeMapOption用来装载echarts图表所需的各种参数(主要为了方便后面接口请求数据后传到这个方法中地图打点): 当程序解析到 mounted() { this.mapChart = this.$refs.map.chart this...
that.$http.locGet(path, param).then((res) => { //mapChart.hideLoading(); let areaName = areaObj?areaObj.data.name:'china'; that.$echarts.registerMap(areaName, res); if ( res && res.features && res.features.length>0) { that.mapDataList = res.features; if (areaObj != undefined...
npm audit fix 成功后可以在package.json内看到echarts对应的版本号 2、封装自定义组件与配置路由 在router文件下的index.js里配置自定义组件chart.vue对应的路由 在App.vue中配置路由跳转 在view文件夹下新建一个自定义组件chart.vue MapChart.vue 3、在chart.vue中进行使用echarts 引入echarts import echarts from...
另外我封装了一个方法makeMapOption用来装载echarts图表所需的各种参数(主要为了方便后面接口请求数据后传到这个方法中地图打点): 方法makeMapOption 当程序解析到: mounted() { this.mapChart = this.$refs.map.chart this.mapOption = makeMapOption()
var myChart = echarts.init(document.getElementById('main')); var option = { // 配置项 }; myChart.setOption(option); } } 配置地图选项:在配置项中定义地图类型及其数据。 var option = { series: [{ type: 'map', map: 'china',
"vue-echarts-v3": "^2.0.1", 1. 2. 3. 4. 5. vue-echarts在一个月前更新了“6.0.0-rc.6版本”,这个版本适用于Echarts5.0+。进入开发: Vue3.0安装 首先确定自己的电脑是否安装了Vue3.0,具体查看步骤如下: Win+R --> 打开cmd --> npm install -g vue@next ...
全局代码如下: vardom=document.getElementById("mapEchart");varmapChart=echarts.init(dom);// 散点在地图上的坐标vargeoCoordMap={"武汉":[114.23,30.11],};// 将坐标与值对应并反映在地图上varconvertData=function(data){varres=[];for(vari=0;i<data.length;i++){vargeoCoord=geoCoordMap[data[i]...
"@/data/africaXY.js"; echarts.use([ TitleComponent, TooltipComponent, GridComponent, GeoComponent, MapChart, CanvasRenderer, ]); const selectedCountries = ref(["Algeria"]); function getAllNames(data) { const names = []; data.features.forEach((feature) => { ...
在vue3中,通过npm install echarts可获取到对应的echart资源,在项目文件中建立对应的utils作为引用echart资源的工具库。 @/utils/utils import * asechartsfrom "echarts/core" import { BarChart, LineChart, PieChart, MapChart, PictorialBarChart, RadarChart } from "echarts/charts" ...