vue echarts 地图,vue echarts 世界地图
这篇文章主要为大家详细介绍了某视频剪辑软件使用展示实现地图的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
目录
全局安装展示将展示绑定在原型上(main.js文件中)准备画布地图配置选择权中国地图包(china.json)总结
全局安装echarts
国家预防机制一电子海图-保存
将echarts绑定在原型上(main.js文件中)
从“电子海图”导入*作为电子海图;
vue。原型。$ e图表=e图表;
准备画布
模板
div ref=打开图表 style= height:600 px;/div
/模板
脚本
从以下位置导入中国./商店/中国。JSON ;
导出默认值{
方法:{
initCharts() {
//初始化中国地图
这个 echarts.registerMap(中国,中国);
//获取数字正射影像图节点
让openingChart=this .$echarts.init(this .$参考文献。开盘图);
//选项配置写在最下面的
openingChart.setOption(选项);
窗户。addevent侦听器( resize ,()={
打开银行图表。resize();
});
}
},
已安装(){
这个。初始化图表();
}
}
/脚本
地图配置option
选项={
//地图背景色
backgroundColor: #ccd3e4 ,
地理位置:{
地图:"中国",
},
工具提示:{
触发器:"项目",
//自定义提示框的内容
/** 这里自定义显示的值是数据中价值数组的第二个值
*格式化程序(参数){
返回(
div
params.data.name
br
省份总额度:
参数数据值[2]
(万元)/div
);
}
*/
},
系列:[
{
类型:"地图",
地图:"中国",
地理指数:1,
showLegendSymbol: false,//存在神话;传奇时显示
工具提示:{
显示:假
},
标签:{
正常:{
显示:假
},
重点:{
显示:假
}
},
漫游:假,
项目样式:{
正常:{
areaColor: #aaa ,
边框颜色: #ccd3e4 ,
borderWidth: 1,
},
重点:{
areaColor: #aaa ,
},
},
}, {
名称: 省份总额度,
类型: effectScatter ,
坐标系统:"地理",
数据:[{
名称: 深圳,
值:[121.15,31.89,12],
},
{
名称: 武汉,
值:[109.781327,39.608266,29]
}],
symbolSize: 20,
符号:"圆形",
标签:{
正常:{
秀:假的,
},
重点:{
秀:假的,
},
},
显示效果于:“渲染”,
项目样式:{
正常:{
颜色:{
类型:"径向",
色彩停止点:[
{
偏移量:0,
颜色: #e5c68b ,
},
{
偏移量:0.8,
颜色: #6e96d4 ,
},
{
偏移量:1,
颜色: #6e96d4 ,
},
],
global: false,//缺省为错误的
},
},
},
},
]
}
中国地图包(china.json)
去除了海南多余的地方的中国地图
总结
本文到此为止。希望能帮到你,也希望你能多关注我们的更多内容!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。