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