75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div id="main" class="chart-container">dasd</div>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
name: "VectorMap",
|
||
methods: {
|
||
initChart() {
|
||
fetch('/data/china.json').then(function(response){
|
||
return response.json();
|
||
}).then(function(result){
|
||
// console.log(result);
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById('main'));
|
||
|
||
//在echarts中注册地图矢量数据
|
||
echarts.registerMap('china',result);
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
//配置地理坐标系组件
|
||
geo:{
|
||
type: 'map',
|
||
map: 'china',
|
||
roam: true, //设置允许缩放以及拖动的效果
|
||
label:{
|
||
// show: true
|
||
},
|
||
zoom: 4, //初始化缩放比例
|
||
center: [113,23], //设置初始化中心点
|
||
itemStyle: { // 定义样式
|
||
areaColor: '#f4f1de', // 普通状态下的样式
|
||
borderColor: '#111'
|
||
},
|
||
emphasis: { // 高亮状态下的样式
|
||
itemStyle:{
|
||
areaColor: '#f5cac3'
|
||
},
|
||
label:{
|
||
color:'#000',
|
||
fontSize:14
|
||
}
|
||
}
|
||
},
|
||
backgroundColor: '#404a59', // 图表背景色
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
myChart.setOption(option);
|
||
});
|
||
|
||
},
|
||
},
|
||
mounted() {
|
||
this.initChart();
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.container{
|
||
display flex
|
||
justify-content center
|
||
align-content center
|
||
}
|
||
.chart-container{
|
||
width 350px
|
||
height 300px
|
||
}
|
||
</style>>
|