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>>
|