Echarts构建厂图（地图等类型）

*最终实现的效果图：中间部分是最终实现的效果图

第一步：跟UI沟通，请UI提供对应的SVG图并且切好对应的块，如（C01-C13的块），下面的图片是我这边引入厂图的SVG，一般情况下，UI提供的SVG是没有name值的，这就需要我们自己添加上去！！！（重点！重点！重点！必须要添加name值，不然Echarts没法识别对应的位置）

2.第二步：引入SVG到Echarts里，并对SVG进行数据联调，实现最终的效果

const myChart = echarts.init(document.getElementById('factoryDrawing'));
//data里存放C01-C13的数据，原本是有13组数据的，但是太多了，我就只放三个
const data = [ {name: 'C01', // 和SVG的name对应title: 'C01库存信息',list: [{title: '库存预警值(吨)',label: 1000,}, {title: '实际库存(吨)',label: 850,}, {title: '其中原板(吨)',label: 300,}, {title: '在制品(吨)',label: 250,}, {title: '产成品(吨)',label: 300,},]},{name: 'C02',title: 'C02库存信息',list: [{title: '库存预警值(吨)',label: 1000,}, {title: '实际库存(吨)',label: 850,}, {title: '其中原板(吨)',label: 300,}, {title: '在制品(吨)',label: 250,}, {title: '产成品(吨)',label: 300,},]},{name: 'C03',title: 'C03库存信息',list: [{title: '库存预警值(吨)',label: 1000,}, {title: '实际库存(吨)',label: 850,}, {title: '其中原板(吨)',label: 300,}, {title: '在制品(吨)',label: 250,}, {title: '产成品(吨)',label: 300,},]}
];data.map(item => {Object.assign(item, {itemStyle: {color: 'transparent', // 引入SVG后，UI切好的块可能会显示黑色，这就需要我们手动改变黑色块的背景色},emphasis: {label: {show: false, //如果UI提供的SVG上有对应块的name值就隐藏，没有就可以不隐藏}},tooltip: { //这是鼠标悬浮在对应的块上显示对应的提示（效果图3红框）formatter(param) {return `<div class='factoryDrawingTooltip'><div class="factoryDrawingTooltipHead flex-align"><img class="factoryDrawingTooltipImg" src="../common/image/factoryDrawingTooltipLocation.png" alt="">${param.name}库存信息</div><div class="factoryDrawingTooltipList">${item.list.map((listItem, listIndex) => `<div class="factoryDrawingTooltipListItem flex"><div>${listItem.title}</div><div class="factoryDrawingTooltipListItemLabel ${listIndex === 0 ? 'fontGlowOrange' : 'fontGlow'}">${listItem.label}</div></div>`).join('')}</div></div>`}}})
})
$.get('../common/image/factoryDrawing.svg', function (svg) {echarts.registerMap('factoryDrawing', {svg: svg}); //这里的factoryDrawing必须要和geo里面的map值统一let option = {visualMap: { // 这块内容对最终效果图没啥作用，但是又必须要要写，不写就不显示，写了也不影响效果图left: 'center',bottom: '200%',min: 5,max: 100,orient: 'horizontal',text: ['', 'Price'],realtime: true,calculable: true,inRange: {color: ['#cf0000']}},tooltip: {className: 'factoryDrawing',triggerOn: 'mousemove' // 只做鼠标悬浮效果},emphasis: {itemStyle: {color: 'transparent',areaColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: "rgb(255,120,21,0.3)"},{offset: 0.5, color: "rgba(255,120,21, 0.49)"},{offset: 1, color: "rgba(255,120,21, 0.8)"},]), // 鼠标悬浮对应的块显示橙色borderColor: 'rgba(236,106,0, 0.49)',borderWidth: 2,},},geo: {name: 'factoryDrawing',map: 'factoryDrawing',roam: false,zoom: 1.4, // 缩放selectedMode: false,regions: data}};myChart.setOption(option);
});

图3：

Echarts构建厂图（地图等类型）相关推荐

vue3.0中echarts实现中图地图的省份切换，并解决多次切换后地图卡死的情况
一.echarts安装及地图的准备 1.安装echarts npm install echarts 2.下载china.js等json文件到项目中的文件夹 map的下载链接:https://pan.b ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
echarts 3d饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件
echarts下载及使用 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir ...
JavaScript高德地图中绘制echarts图表随地图移动
JavaScript高德地图中绘制echarts图表随地图移动** 先上效果图实现方法如下: 使用高德地图"信息窗体",信息窗体AMap.InfoWindow的属性content ...
（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
回顾作者用心写作,请动动你可爱的小手点亮大拇指.你的鼓励是作者继续创作的动力- 前端的学习,不能仅仅依靠知识点的学习,实战项目的操作可以帮助我们整理知识点以及提高编程能力,更有助于学习和实践,最重要 ...
Spring Boot 实践折腾记（20）：Thymleaf + webjar + ECharts 构建本地图表
前言作为geek后端程序员,画图的选择其实有很多,手画,excel,ppt,copy别人的图等.虽然用excel最方便,但是类似按中国省份来显示详细数据的图,excel是画不了的,而PPT画起来又很 ...
echarts学习——（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
一个基于Vue前端框架和第三方图表库Echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合.以及一些功能模块的设计及代码 ...
echart 动画饼图_echarts构建关系图，节点可收缩和展开，可添加点击事件
echarts下载及使用 ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fir ...
Echarts数据可视化series-map地图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

Echarts构建厂图（地图等类型）

Echarts构建厂图（地图等类型）相关推荐

最新文章

热门文章