115 lines
3.5 KiB
Vue
115 lines
3.5 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div id="main1" class="chart-container"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as echarts from "echarts";
|
||
export default {
|
||
name: "UniqueRender",
|
||
methods: {
|
||
initChart() {
|
||
let airData = [
|
||
{ name: "北京市", value: 39.92 },
|
||
{ name: "天津市", value: 39.13 },
|
||
{ name: "上海市", value: 31.22 },
|
||
{ name: "重庆市", value: 66 },
|
||
{ name: "河北省", value: 147 },
|
||
{ name: "河南省", value: 113 },
|
||
{ name: "云南省", value: 25.04 },
|
||
{ name: "辽宁省", value: 50 },
|
||
{ name: "黑龙江省", value: 114 },
|
||
{ name: "湖南省", value: 175 },
|
||
{ name: "安徽省", value: 117 },
|
||
{ name: "山东省", value: 92 },
|
||
{ name: "新疆维吾尔自治区", value: 84 },
|
||
{ name: "江苏省", value: 67 },
|
||
{ name: "浙江省", value: 84 },
|
||
{ name: "江西省", value: 96 },
|
||
{ name: "湖北省", value: 273 },
|
||
{ name: "广西壮族自治区", value: 59 },
|
||
{ name: "甘肃省", value: 99 },
|
||
{ name: "山西省", value: 39 },
|
||
{ name: "内蒙古自治区", value: 58 },
|
||
{ name: "陕西省", value: 61 },
|
||
{ name: "吉林省", value: 51 },
|
||
{ name: "福建省", value: 29 },
|
||
{ name: "贵州省", value: 71 },
|
||
{ name: "广东省", value: 38 },
|
||
{ name: "青海省", value: 57 },
|
||
{ name: "西藏自治区", value: 24 },
|
||
{ name: "四川省", value: 58 },
|
||
{ name: "宁夏回族自治区", value: 52 },
|
||
{ name: "海南省", value: 54 },
|
||
{ name: "台湾省", value: 88 },
|
||
{ name: "香港特别行政区", value: 66 },
|
||
{ name: "澳门特别行政区", value: 77 },
|
||
{ name: "南海诸岛", value: 55 },
|
||
];
|
||
fetch("/data/china.json")
|
||
.then(function (response) {
|
||
return response.json();
|
||
})
|
||
.then(function (result) {
|
||
console.log(result);
|
||
// 基于准备好的dom，初始化echarts实例
|
||
var myChart = echarts.init(document.getElementById("main1"));
|
||
|
||
//在echarts中注册地图矢量数据
|
||
echarts.registerMap("china", result);
|
||
// 指定图表的配置项和数据
|
||
var option = {
|
||
//配置地理坐标系组件
|
||
geo: {
|
||
type: "map",
|
||
map: "china",
|
||
roam: true, //设置允许缩放以及拖动的效果
|
||
label: {
|
||
show: false,
|
||
fontSize: 10,
|
||
},
|
||
// zoom: 4, //初始化缩放比例
|
||
center: [108.948024, 34.263161], //设置初始化中心点
|
||
},
|
||
series: [
|
||
{
|
||
data: airData,
|
||
geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
|
||
type: "map",
|
||
},
|
||
],
|
||
visualMap: {
|
||
min: 0,
|
||
max: 300,
|
||
inRange: {
|
||
symbolSize: [30, 100],
|
||
color: ["white", "red"], // 控制颜色渐变的范围
|
||
},
|
||
calculable: true, // 出现滑块
|
||
},
|
||
};
|
||
|
||
// 使用刚指定的配置项和数据显示图表。
|
||
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>>
|