【可视化】Echarts3 在世界地图中绘制中国各省份的轮廓

要在世界地图展现出来的情况下绘制中国省份的轮廓,根据现有的echarts-api是不可行的。

但好在echarts也提供了自定义地图的方式,使用echarts.registerMap();来实现 

第一步 查阅官方文档你会知道这是echarts在使用geojson绘制svg图像,geojson的开发规范是固定的,参考http://geojson.org/ ,这应该是开发地理svg图像的官方网站吧, 在这里所说的要参考不是让你自己参考规范写json,仅仅明白规范内容就可以了。

第二步 下载world.json 然后和china.json进行合并,合并时要注意world.json的json格式,也就是要参考geojson的规范,避免格式错误。

关键的一点要明白:一般人的概念里会认为中国当然要去包含这些省份,而在事实上,china与各省份是同一层级的.

在这里 我把我合并好的json文件放在了download.csdn.net/download/dream361/9655095 大家可以去下载直接使用

第三步 合并之后的json要被调用到 这里使用了 jQuery的get的方法来从前端异步获取。

$.get(

"world.json的url",

null,

function(data,status){ 

echarts.registerMap(data,''world);

option = {

geo:{

type:'world'

//声明为world 和registerMap(data,'world')一致

}

};

},'json');

这三步就把问题搞定了




 

转载于:https://www.cnblogs.com/zhengwenqiang/p/6804728.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于Vue3可视化Echarts图的源码可以通过以下步骤实现: 1. 引入echarts库:首先,在Vue3项目安装echarts库。可以通过在终端运行`npm install echarts --save`命令来安装echarts。然后,在需要使用可视化图的Vue组件,引入echarts库:`import echarts from 'echarts'`。 2. 创建图表容器:在Vue组件的模板,创建一个容器元素,用于承载echarts图表。例如,可以在模板添加一个`<div id="chartContainer"></div>`。 3. 初始化图表实例:在Vue组件的`mounted`生命周期钩子函数,初始化echarts图表实例。首先,获取图表容器的DOM元素:`const chart = document.getElementById('chartContainer')`。然后,创建echarts实例:`const myChart = echarts.init(chart)`。 4. 配置图表选项:使用echarts实例的`setOption`方法,配置图表的选项。例如,可以设置图表的类型、标题、x轴和y轴等:`myChart.setOption({ type: 'bar', title: { text: '柱状图' }, xAxis: { data: ['A', 'B', 'C'] }, yAxis: {} })`。 5. 绑定数据:将需要的数据绑定到图表。可以通过Vue组件的props属性传递数据,或者通过axios等方式请求后端API获取数据,并将数据传递给图表实例的`setOption`方法。 6. 更新图表:在数据变化时,更新图表的显示。可以通过Vue组件的watch属性监听数据变化,并在数据变化后,调用图表实例的`setOption`方法更新图表。 7. 销毁实例:在Vue组件的`beforeUnmount`生命周期钩子函数,调用echarts实例的`dispose`方法销毁图表实例。 通过以上步骤,我们可以基于Vue3实现echarts可视化图的源码。这样,我们可以根据实际需求,灵活地配置和更新图表,实现丰富的可视化效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值