echarts + vue 实现人口热力图显示，包含数据结构

<!-- 热力图 -->
<template><div id="myChart" style="width:1500px;height:700px"></div>
</template><script>import echarts from 'echarts'import 'echarts/map/js/china'import mapJson from '@/store/json/xuzhou.json'export default {props: {cityConfig: {type: Object,default () {return {name: '徐州市',dataJson: mapJson}}}},data () {return {data: [{name: '沛县', value: 150},{name: '泉山区', value: 42},{name: '铜山区', value: 102},{name: '鼓楼区', value: 81}],toolTipData: [{name: '沛县', value: [{name: '农村人口', value: 10}, {name: '城市人口', value: 10}]},{name: '泉山区', value: [{name: '农村人口', value: 22}, {name: '城市人口', value: 20}]},{name: '铜山区', value: [{name: '农村人口', value: 60}, {name: '城市人口', value: 42}]},{name: '鼓楼区', value: [{name: '农村人口', value: 40}, {name: '城市人口', value: 41}]}]}},components: {},created () {},mounted () {this.init()},computed: {},methods: {loadMap (mapName, data) {if (data) {echarts.registerMap(mapName, data)}},init () {var myChart = echarts.init(document.getElementById('myChart'))if (this.cityConfig.dataJson) {this.loadMap(this.cityConfig.name, this.cityConfig.dataJson)}var mapName = '徐州'var geoCoordMap = {}/* 获取地图数据 */myChart.showLoading()var mapFeatures = this.cityConfig.dataJson.featuresmyChart.hideLoading()``mapFeatures.forEach(function (v) {// 地区名称var name = v.properties.name// 地区经纬度geoCoordMap[name] = v.properties.center})var max = 480,min = 9 // todovar maxSize4Pin = 100,minSize4Pin = 20var convertData = function (data) {var res = []for (var i = 0; i < data.length; i++) {var geoCoord = geoCoordMap[data[i].name]if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)})}}return res}var option = {tooltip: {trigger: 'item',formatter: (params) => {if (typeof (params.value)[2] === 'undefined') {var toolTiphtml = ''for (var i = 0; i < this.toolTipData.length; i++) {if (params.name == this.toolTipData[i].name) {toolTiphtml += this.toolTipData[i].name + ':<br>'for (var j = 0; j < this.toolTipData[i].value.length; j++) {toolTiphtml += this.toolTipData[i].value[j].name + ':' + this.toolTipData[i].value[j].value + '<br>'}}}return toolTiphtml} else {var toolTiphtml = ''for (var i = 0; i < this.toolTipData.length; i++) {if (params.name == this.toolTipData[i].name) {toolTiphtml += this.toolTipData[i].name + ':<br>'for (var j = 0; j < this.toolTipData[i].value.length; j++) {toolTiphtml += this.toolTipData[i].value[j].name + ':' + this.toolTipData[i].value[j].value + '<br>'}}}return toolTiphtml}}},// legend: {//     orient: 'vertical',//     y: 'bottom',//     x: 'right',//     data: ['credit_pm2.5'],//     textStyle: {//         color: '#fff'//     }// },visualMap: {show: true,min: 0,max: 200,left: 'left',top: 'bottom',text: ['高', '低'], // 文本，默认为数值文本calculable: true,seriesIndex: [1],inRange: {color: ['#00467F', '#A5CC82'] // 蓝绿}},geo: {show: true,map: mapName,label: {normal: {show: false},emphasis: {show: false}},roam: true,itemStyle: { // 设置地图块的相关显示信息normal: {areaColor: '#d1def3',borderColor: '#b4caef',borderWidth: 1},emphasis: {areaColor: '#9abfff' // hover效果}}},series: [{name: '散点',type: 'scatter',coordinateSystem: 'geo',data: convertData(this.data),symbolSize: function (val) {return val[2] / 10},label: {normal: {formatter: '{b}',position: 'right',show: true},emphasis: {show: true}},itemStyle: {normal: {color: '#05C3F9'}}},{type: 'map',map: mapName,geoIndex: 0,aspectScale: 0.75, // 长宽比showLegendSymbol: false, // 存在legend时显示label: {normal: {show: true},emphasis: {show: false,textStyle: {color: '#fff'}}},roam: true,itemStyle: {normal: {areaColor: '#031525',borderColor: '#3B5077'},emphasis: {areaColor: '#2B91B7'}},animation: false,data: this.data},{name: '点',type: 'scatter',coordinateSystem: 'geo',symbol: 'pin', // 气泡symbolSize: function (val) {var a = (maxSize4Pin - minSize4Pin) / (max - min)var b = minSize4Pin - a * minb = maxSize4Pin - a * maxreturn a * val[2] + b},label: {normal: {show: true,textStyle: {color: '#fff',fontSize: 9},formatter: '{@[2]}'}},itemStyle: {normal: {color: '#F62157' // 标志颜色}},zlevel: 6,data: convertData(this.data)},{name: 'Top 5',type: 'effectScatter',coordinateSystem: 'geo',data: convertData(this.data.sort(function (a, b) {return b.value - a.value}).slice(0, 5)),symbolSize: function (val) {return val[2] / 10},showEffectOn: 'render',rippleEffect: {brushType: 'stroke'},hoverAnimation: true,label: {normal: {formatter: '{b}',position: 'right',show: true}},itemStyle: {normal: {color: 'yellow',shadowBlur: 10,shadowColor: 'yellow'}},zlevel: 1}]}myChart.setOption(option)window.addEventListener('resize', () => {myChart.resize()})}}}
</script><style scoped lang="scss">
</style>

echarts + vue 实现人口热力图显示，包含数据结构相关推荐

【15】数据可视化：基于 Echarts + Vue 实现的大屏范例 - 世界人口统计大屏
系列文章 https://blog.csdn.net/lildkdkdkjf/article/details/120705616 文末有免费福利,喜欢的小伙伴们一键三连支持下,关注收藏点赞~ 目录 ...
echarts vue图表加载动态数据 vue 数据加载完了,数据没有显示问题
记录一下遇到的问题: 使用echarts +vue 的时候.遇到后台请求的数据没有别获取拿到. 原因是图表先已经被加载了,vue里 data 默认初始化的数据是[]的,这个时候,后台请求方法还没有将 ...
echarts 地图九状线显示钓鱼岛系列（1）之 3.0 与2.0区别
由于echarts 3.0 和2.0版本不一样, 下文将分别介绍. (vue项目,可以参考 echarts 地图九状线显示钓鱼岛(续-vue项目) echarts地图需要按数据值大小,显 ...
ECharts统计数据以图表显示
ECharts统计数据以图表显示 1:简介 ECharts用于图表展示,提供了常规的折线图.柱状图.散点图.饼图.K线图,用于统计的盒形图,用于地理数据可视化的地图.热力图.线图,用于关系数据可视化的 ...
echarts+vue+koa+websocket（精）
项目一览: http://jinruixiang.top:4000/ github:https://github.com/chenqi13814529300/echarts 比一篇前后端数据综合项目教 ...
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
百度热力图颜色说明_大数据下的龙港、鳌江人口热力图
大数据下的龙港.鳌江人口热力图 --趋势显示,人口逐步集中于区域中心地区与城市 2020-08-25 大数据(big data),是指无法在一定时间内用常规软件工具对其内容进行抓取.管理和处理的数 ...
Echarts数据可视化series-heatmap热力图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
高德地图+Echarts+Vue
@[TOC]高德地图+Echarts+Vue 高德地图+Echarts+Vue 先上效果图 1.创建后vue项目后下载echarts和高德地图插件 npm install amap-echarts n ...

echarts + vue 实现人口热力图显示，包含数据结构

echarts + vue 实现人口热力图显示，包含数据结构相关推荐

最新文章

热门文章