本篇讲述在vue中使用echarts的中国地图,以及对不同板块进行渐变色的设置。
效果图如下:
实现上图效果步骤如下:
- 确保项目中下载了echarts,然后在main.js中引用echarts
import echarts from 'echarts'
import 'echarts/map/js/china'
Vue.prototype.$echarts = echarts
- 在组件中放置一个容器
<div id="map"></div>
3.设置地图相关配置项,以下代码直接复制可用
mounted() {
this.$nextTick(() => {
var mapName = "china";
var data = [
{ name: "北京", value: 177 },
{ name: "天津", value: 42 },
{ name: "河北", value: 102 },
{ name: "山西", value: 81 },
{ name: "内蒙古", value: 47 },
{ name: "辽宁", value: 67 },
{ name: "吉林", value: 82 },
{ name: "黑龙江", value: 66 },
{ name: "上海", value: 24 },
{ name: "江苏", value: 92 },
{ name: "浙江", value: 114 },
{ name: "安徽", value: 109 },
{ name: "福建", value: 116 },
{ name: "江西", value: 91 },
{ name: "山东", value: 119 },
{ name: "河南", value: 137 },
{ name: "湖北", value: 116 },
{ name: "湖南", value: 114 },
{ name: "重庆", value: 91 },
{ name: "四川", value: 125 },
{ name: "贵州", value: 62 },
{ name: "云南", value: 83 },
{ name: "西藏", value: 9 },
{ name: "陕西", value: 80 },
{ name: "甘肃", value: 56 },
{ name: "青海", value: 10 },
{ name: "宁夏", value: 18 },
{ name: "新疆", value: 67 },
{ name: "广东", value: 123 },
{ name: "广西", value: 59 },
{ name: "海南", value: 14 }
];
var geoCoordMap = {};
var toolTipData = [
{
name: "北京",
value: [{ name: "文科", value: 95 }, { name: "理科", value: 82 }]
},
{
name: "天津",
value: [{ name: "文科", value: 22 }, { name: "理科", value: 20 }]
},
{
name: "河北",
value: [{ name: "文科", value: 60 }, { name: "理科", value: 42 }]
},
{
name: "山西",
value: [{ name: "文科", value: 40 }, { name: "理科", value: 41 }]
},
{
name: "内蒙古",
value: [{ name: "文科", value: 23 }, { name: "理科", value: 24 }]
},
{
name: "辽宁",
value: [{ name: "文科", value: 39 }, { name: "理科", value: 28 }]
},
{
name: "吉林",
value: [{ name: "文科", v