<template>
<div class="map">
<div id="map" ref="chart1" style="width:777px;height:527px"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
// import jsonp from 'jsonp'
import 'echarts/map/js/china'// 引入中国地图
export default {
data() {
return {
myChart: ''
}
},
mounted() {
this.demo()
},
// methods:{
// init(){
// var option = {
// title:{
// text:'全国新增确诊/疑似趋势',
// left:'center',
// textStyle:{
// color:'#f00',
// }
// },
// tooltip:{
// },
// series:{
// }
// };
// }
// }
methods: {
demo() {
// this.getData()
// 基于准备好的dom，初始化echarts实例
// this.myChart = echarts.init(document.getElementById('chart1')); //放在mounted中，初始化页面
const myChart = echarts.init(document.getElementById('map'))
const option = {
title: {
text: 'vue实现疫情地图',
textStyle: {
color: '#9c0505',
fontWeight: 'bolder',
fontSize: '25'
},
// left:'center',//居中
left: 'center' // 居中
},
tooltip: {
trigger: 'item', // 类型
formatter: '地区:{b}<br/>确诊:{c}'// {a}系列名称,{b}地区名称,{c}合并数值
},
series: [
{
type: 'map',
map: 'china', // 后边还可以写成省份
// data:[
// {name:'北京',value:200},
// {name:'湖北',value:20000},
// {name:'湖南',value:10000},
// {name:'河南',value:1200},
// {name:'浙江',value:8000},
// ],
label: { // 显示省份名称的样式
show: true,
color: 'red',
fontSize: 12
// backgroundColor:'yellow'
},
zoom: 1, // 地图缩放比例
// itemStyle:{
// // areaColor:'red',//地图区域的颜色
// borderColor:'blue'
// },
emphasis: { // 高亮状态下的设置
label: { // 显示省份名称的样式
color: '#fff',
fontSize: 12
},
itemStyle: { // 地图区域多边形下的颜色
areaColor: 'green'
}
}
}
],
visualMap: {
type: 'piecewise', // 分段型
show: true,
pieces: [
{ min: 10000 }, // 不指定 max，表示 max 为无限大（Infinity）。
{ min: 1000, max: 9999 },
{ min: 100, max: 999 },
{ min: 10, max: 99 },
{ min: 1, max: 9 },
{ value: 0 } // 不指定 min，表示 min 为无限大（-Infinity）。
],
inRange: {
// color: ['#fff', '#ffaa85', '#660208'],
color: ['red', 'red', 'red']
},
itemWidth: 10, // 设置方块的宽度
itemHeight: 10
}
}
// this.myChart = echarts.init(this.$refs.chart1) // 放在mounted中，初始化页面调用
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
// 真实数据 https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522447
// jsonp('url',function(){})
// getData() {
// jsonp('http://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522447', (err, data) => {
// // console.log(data.data.list)
// // map()js循环遍历的方法,forEach()是有返回值的,map()四没有返回值的
// var lists = data.data.list.map(item => {
// return { name: item.name, value: item.value }
// })
// console.log(lists)
// option.series[0].data = lists
// console.log(option.series[0].data)
// // 使用刚指定的配置项和数据显示图表。
// this.myChart.setOption(option) // 再次调用
// })
// }
}
}
</script>
<style>
</style>
