1、Echarts地图柱状图问题

需要根据功能修改自己所需的地图模块，当前功能是根据line和散点图进行处理，根据经纬度形成一个柱状图，

比如：需要两个或者多个柱状图

1、添加多个经纬度，添加多个柱状图。经纬度跟柱状图一一对应

2、根据定位，自己写柱状图。一一添加到地图上去。分为两个部分，1.Echarts地图,2.柱状图，可以写div

2、Echarts地图饼状图问题

需要渲染地图成功后，再通过setOption添加series。

3、柱状图例子

河南省经纬度数据【js/Map/henan.json · 梦_阿飞/allStaticResources - Gitee.com】

npm install echarts -S

<template><div class="DataList"><div class="Echart-map" id="echartmapWidth"><div id="echart" ref="echart"></div></div></div>
</template>
<script>
import * as echarts from "echarts";
import { useStore } from "vuex";
import hnJson from "@/utils/henan.json";
import { onMounted, onUnmounted, watch, ref, computed } from "vue";
export default {name: "DataList",setup() {let echart = echarts;let echartMap = null;let geoCoordMap = {};let sddf = [];let option = {series: [],};const store = useStore();const state = store;let isCollapse = ref(computed(() => {return state.state.app.isCollapse;}));const loading = ref(false);let screenWidth = ref(window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth);let timer = ref(false); //处理监听watch(screenWidth, () => {if (!timer.value) {timer.value = true;setTimeout(function () {timer.value = false;echartMap.resize();}, 100);}});watch(isCollapse, () => {setTimeout(() => {echartMap.resize();}, 300);});const customerBatteryCityData = [];hnJson.features.map((item) => {geoCoordMap[item.properties.name] = item.properties.center;var data = {name: item.properties.name,value: item.properties.adcode,};customerBatteryCityData.push(data);});const initChart = () => {echart.registerMap("henan", hnJson);echartMap = echart.init(document.getElementById("echart"));echartMap.setOption({backgroundColor: "#131C38",tooltip: {// borderWidth: 0,trigger: "item",show: true,enterable: true,textStyle: {fontSize: 20,color: "#fff",},backgroundColor: "rgba(0,2,89,0.8)",formatter: "{b}<br />{c}",},geo: [{map: "henan",aspectScale: 0.9,roam: false, // 是否允许缩放// zoom: 1.2, // 默认显示级别zoom: 1, // 默认显示级别layoutSize: "70%",silent: false, //点击layoutCenter: ["45%", "55%"],itemStyle: {normal: {areaColor: {type: "linear-gradient",x: 0,y: 400,x2: 0,y2: 0,colorStops: [{offset: 0,color: "rgba(37,108,190,0.3)", // 0% 处的颜色},{offset: 1,color: "rgba(15,169,195,0.3)", // 50% 处的颜色},],global: true, // 缺省为 false},borderColor: "#4ecee6",borderWidth: 1,},emphasis: {areaColor: {type: "linear-gradient",x: 0,y: 300,x2: 0,y2: 0,colorStops: [{offset: 0,color: "rgba(37,108,190,1)", // 0% 处的颜色},{offset: 1,color: "rgba(15,169,195,1)", // 50% 处的颜色},],global: true, // 缺省为 false},},},emphasis: {// itemStyle: {//   areaColor: "#0160AD",// },label: {show: true,color: "#fff",},},zlevel: 3,label: {show: true,color: "#fff",},},],series: [{geoIndex: 0,showLegendSymbol: true,type: "map",roam: true,label: {normal: {show: true,textStyle: {color: "#fff",},},emphasis: {show: true,textStyle: {color: "#fff",},},},itemStyle: {},map: "henan", // 使用data: customerBatteryCityData,select: {disabled: true,label: {color: "#fff",},},emphasis: {label: {color: "#fff",},},},{type: "lines",zlevel: 5,effect: {show: false,// period: 4, //箭头指向速度，值越小速度越快// trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重// symbol: 'arrow', //箭头图标// symbol: imgDatUrl,symbolSize: 5, // 图标大小},lineStyle: {width: 17, // 尾迹线条宽度color: {type: "linear",x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: "blue", // 0% 处的颜色},{offset: 0.5,color: "blue", // 0% 处的颜色},{offset: 0.5,color: "blue", // 0% 处的颜色},{offset: 1,color: "blue", // 0% 处的颜色},{offset: 1,color: "blue", // 100% 处的颜色},],global: false, // 缺省为 false},opacity: 1, // 尾迹线条透明度curveness: 0, // 尾迹线条曲直度},label: {show: 0,position: "end",formatter: "245",},silent: true,data: lineData(),},{type: "scatter",coordinateSystem: "geo",geoIndex: 0,zlevel: 5,label: {show: true,position: "top",// formatter: (params) => this.data[params.dataIndex].value,formatter: function (params) {return customerBatteryCityData[params.dataIndex].value;},padding: [4, 8],// backgroundColor: "#fff",borderRadius: 5,// borderColor: "#fff",borderWidth: 1,// color: "#fff",},symbol: "diamond",symbolSize: [15, 8],// symbolSize: [0, 0],itemStyle: {// color: "red",color: "#fff",opacity: 1,},silent: true,data: scatterData(),},{type: "scatter",coordinateSystem: "geo",geoIndex: 0,zlevel: 4,// label: {//   formatter: "{b}",//   position: "top",//   color: "#fff",//   fontSize: 12,//   distance: 10,//   show: true,// },symbol: "diamond",symbolSize: [17, 8],itemStyle: {// color: '#F7AF21',color: {type: "linear",x: 0,y: 0,x2: 1,y2: 0,colorStops: [{offset: 0,color: "blue", // 0% 处的颜色},{offset: 0.5,color: "blue", // 0% 处的颜色},{offset: 0.5,color: "blue", // 0% 处的颜色},{offset: 1,color: "blue", // 0% 处的颜色},{offset: 1,color: "blue", // 100% 处的颜色},],global: false, // 缺省为 false},opacity: 1,// shadowColor: '#fff',// shadowBlur: 5,// shadowOffsetY: 2},silent: true,data: scatterData2(),},],});echartMap.resize();// 执行完地图讲serier用setOption重新塞入};// 动态计算柱形图的高度（定一个max）const lineMaxHeight = () => {const maxValue = Math.max(...customerBatteryCityData.map((item) => item.value));return 0.9 / maxValue;};// 柱状体的主干const lineData = () => {return customerBatteryCityData.map((item) => {return {coords: [geoCoordMap[item.name],[geoCoordMap[item.name][0],geoCoordMap[item.name][1] + item.value * lineMaxHeight(),],],};});};// 柱状体的顶部const scatterData = () => {return customerBatteryCityData.map((item) => {return [geoCoordMap[item.name][0],geoCoordMap[item.name][1] + item.value * lineMaxHeight(),];});};// 柱状体的底部const scatterData2 = () => {return customerBatteryCityData.map((item) => {return {name: item.name,value: geoCoordMap[item.name],};});};const destroyedChart = () => {echartMap.dispose();};// // 地图饼状图const mapPie = () => {// 地图饼状图sddf = [{type: "pie",radius: "5%",// 设置成绝对的像素值center: echartMap.convertToPixel("geo", [113.238266, 35.23904]),avoidLabelOverlap: false,label: {show: false,position: "center",},emphasis: {label: {show: false,fontSize: "40",fontWeight: "bold",},},labelLine: {show: false,},data: [{ value: 100, name: "搜索引擎" },{ value: 735, name: "直接访问" },],},{type: "pie",radius: "5%",// 设置成绝对的像素值center: echartMap.convertToPixel("geo", [113.883991, 35.302616]),avoidLabelOverlap: false,label: {show: false,position: "center",},emphasis: {label: {show: false,fontSize: "40",fontWeight: "bold",},},labelLine: {show: false,},data: [{ value: 484, name: "联盟广告" },{ value: 300, name: "视频广告" },],},];option.series = sddf;echartMap.setOption(option);};const search = () => {loading.value = true;setTimeout(() => {loading.value = false;}, 1000);};onMounted(() => {initChart();// // mapPie()window.onresize = () => {return (() => {window.screenWidth =window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth;screenWidth.value = window.screenWidth;})();};});onUnmounted(() => {// destroyedChart();});return {initChart,destroyedChart,mapPie,search,screenWidth,timer,loading,isCollapse,};},
};
</script>
<style scoped lang='scss'>
.Echart-map {overflow: hidden;width: 100%;
}
#echart {width: 100%;height: 500px;padding: 16px;
}
</style>

Echarts地图柱状图问题相关推荐

vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
Echarts绘制地图柱状图
场景需求:在使用echarts渲染的时候,有需求在页面中实现在echarts地图上叠加柱状图或者折线图,饼图等场景:目前地图上叠加的代码是甘肃省的json文件,也可以更换成全国的或者其他省份的,有需要 ...
前端vue显示柱状图_Vue接入Echarts 显示柱状图饼图
Vue接入Echarts 显示柱状图饼图使用CLI接入 npm install echarts --save 1.可以全局引入(在main.js) // 引入echarts import echar ...
ECharts地图使用
ECharts地图使用最近项目开发中用到了ECharts地图,感觉ECharts地图美观炫酷,所 ...
echarts 地图九状线显示钓鱼岛系列（3）之 vue项目
我引入的是 "echarts": "^4.2.1" (地图对比) (china.js) (china1.js) 1.首先需要在node_modul ...
vue + echarts+地图实现功能，实现地图上数据显示，四川省地图echarts地市数据案列
echart在开发地图时,会遇到下钻显示子区域地图数据.比如四川省,下钻到市级成都市,再下钻到区级.下载地址:DataV.GeoAtlas地理小工具系列 1.首先需要下载对应的地图,如果是联网的可以直 ...
echarts 地图geo、geo3D 下穿
记录贴 echarts地铁图,3D地图的下穿首先说平面的吧,平面地图的下穿通过echats的点击事件,获取到点击板块的名称,通过名称请求json数据,代码如下 myChart.on('click', ...
“大数据时代下的地理信息可视化：ECharts地图和数据面板实践“
数据可视化是一种数据分析技术,它通过将数据转化为图形或图表等可视化方式,以便更好地理解和解释数据.在实际应用中,数据可视化被广泛用于数据监控.业务分析.决策支持等领域.而ECharts是一款优秀的数据 ...
echarts 地图_地图 json 免费下载_自定义icon
Echarts 常用各类图表模板配置注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项: 以下代码都可以复制到 Echarts 官网,直接预览: 图标模板目录 Echarts ...

Echarts地图柱状图问题

1、Echarts地图柱状图问题

2、Echarts地图饼状图问题

3、柱状图例子

Echarts地图柱状图问题相关推荐

最新文章

热门文章