vue使用echarts绘制中国地图的实现代码
短信预约 -IT技能 免费直播动态提醒
1. 插入echarts 所需模块
import echarts from "echarts";
import 'echarts/map/js/china' // 使用中国地图需把China.js文件引入2. 正式代码部分
//初始化echarts实例 通过传参获取要放置的id名称
var myChart = echarts.init(document.getElementById("容器的id名称"));
// 指定图表的配置项和数据
var optionMap = {
//设置 背景颜色
backgroundColor: "#FFFFFF",
tooltip: {
trigger: "item",
},
//左侧小导航图标
visualMap: {
// 水平摆放
orient:"horizontal",
// 是否显示指示条
show: true,
// 设置字体
textStyle: {
fontSize: 3.5,
},
// 显示的位置
x: "",
splitList: [
{ start: 0, end: 0 },
{ start: 1, end: 9 },
{ start: 10, end: 99 },
{ start: 100, end: 499 },
{ start: 500, end: 999 },
{ start: 1000, end: 10000 },
{ start: 10000 },
],
color: [
"#4a1213",
"#772526",
"#bb3937",
"#d56355",
"#e9a188",
"#faebd2",
"#f5f5f5",
],
},
//配置属性
series: [
{
name: title,
type: "map", // 类型 为map地图
// 具体地图类型为china 在这里需要引入echarts中自带的China.js文件
mapType: "china",
roam: false, // 设置是否可以缩放 false 为不可以缩放
zoom:1.2,// 默认缩放比例 刚进入页面时的缩放比例
itemStyle:{
normal: {
areaColor: '#000',
borderColor: 'skyblue',
borderWidth: 1,
shadowColor: '#ccc',
shadowBlur: 30,
opacity:1
},
},
label: {
normal: {
show: true, //是否显示省份名称 // 设置显示省份名称的的字体大小 ，也可以显示fontFamily:... ...
textStyle: {
fontSize: 6,
},
},
emphasis: {
show: true,
},
},
data:[{name:'xxx',value:数字},]
},
],
};
//使用制定的配置项和数据显示图表
myChart.setOption(optionMap);3. 最后的效果
到此这篇关于vue 使用 echarts 绘制中国地图的文章就介绍到这了,更多相关vue 使用 echarts 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
