99 lines
3.5 KiB
Vue
99 lines
3.5 KiB
Vue
|
<template>
|
|||
|
|
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
|||
|
|
<div ref="chart" style="width:100%;height:350px;;"></div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import * as echarts from 'echarts'
|
|||
|
|
import chinaMap from '@/assets/json/china.json'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data(){
|
|||
|
|
return {
|
|||
|
|
items:[]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted(){
|
|||
|
|
this.initChart();
|
|||
|
|
},
|
|||
|
|
methods:{
|
|||
|
|
initChart(){
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(this.$refs.chart);
|
|||
|
|
echarts.registerMap('china', chinaMap);
|
|||
|
|
|
|||
|
|
// 指定图表的配置项和数据
|
|||
|
|
var option = {
|
|||
|
|
geo:{
|
|||
|
|
show:true,
|
|||
|
|
type:'map',
|
|||
|
|
map:'china',
|
|||
|
|
// label:{
|
|||
|
|
// show:true, //文字标签显示
|
|||
|
|
// color:'#fff',
|
|||
|
|
// fontSize:12
|
|||
|
|
// },
|
|||
|
|
itemStyle:{ //图形样式
|
|||
|
|
areaColor:'#3352c7', //背景色
|
|||
|
|
borderColor:'#fff',
|
|||
|
|
borderWidth:1
|
|||
|
|
},
|
|||
|
|
zoom:1.2,
|
|||
|
|
emphasis:{ //高亮状态
|
|||
|
|
label:{
|
|||
|
|
show:true, //文字标签显示
|
|||
|
|
color:'#fff',
|
|||
|
|
fontSize:14
|
|||
|
|
},
|
|||
|
|
itemStyle:{ //图形样式
|
|||
|
|
areaColor:'#f60', //背景色
|
|||
|
|
borderColor:'#ccc',
|
|||
|
|
borderWidth:1
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
series:[
|
|||
|
|
{
|
|||
|
|
type:'effectScatter', //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出
|
|||
|
|
coordinateSystem:'geo',//该系列使用的坐标系
|
|||
|
|
rippleEffect:{ //涟漪特效相关配置。
|
|||
|
|
period:2,
|
|||
|
|
brushType:'stroke',
|
|||
|
|
scale :5,
|
|||
|
|
},
|
|||
|
|
label:{ //标签
|
|||
|
|
normal:{
|
|||
|
|
show:true,
|
|||
|
|
position:'right'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
itemStyle:{
|
|||
|
|
color:'#f00'
|
|||
|
|
},
|
|||
|
|
symbol:'circle' ,//标记的图形，还可以设置图片
|
|||
|
|
symbolSize:function(val){
|
|||
|
|
return val[2]
|
|||
|
|
},
|
|||
|
|
data:[
|
|||
|
|
{
|
|||
|
|
name:'北京',
|
|||
|
|
value:[116.405285,39.904989,20]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name:'上海',
|
|||
|
|
value:[121.472644,31.231706,20]
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name:'珠海',
|
|||
|
|
value:[113.52, 22.3,15]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|