厂房安全等级四色图且可修改

使用echarts的庖丁解牛示例

1、UI画svg图，每个区域定义好name，或id。前端拿到svg图，在vscode里可以看到源码

2、svg丢到服务器，通过线上地址拿取svg图和源码并添加echarts点击事件

 drawLine() {this.myChart = echarts.init(this.$refs.echarts);axios.get(process.env.VUE_APP_BASE_API + '/svg/demo222.svg').then(res => {echarts.registerMap('Beef_cuts_France', { svg: res.data });this.option = {tooltip: {show: false //鼠标悬浮不显示},visualMap: {left: 'center',bottom: '-10%', //隐藏底部颜色条min: 1,max: 4,orient: 'horizontal',realtime: true,calculable: false, //底部不可拖动inRange: {color: ['#32b6ff', '#ffff01', '#ffc000', '#cf0000']}},series: [{name: 'French Beef Cuts',type: 'map',map: 'Beef_cuts_France',roam: true,emphasis: {label: {show: true},itemStyle: {color: null, //鼠标悬浮不变色areaColor: null}},selectedMode: false,data: this.data1}]};this.myChart.setOption(this.option);window.onresize = this.myChart.resize;//获取当前点击的项的参数this.myChart.on('click', param => {console.log('click:', param);this.changeColor(param.data);});});},

3、后端传的每个区域的name和value

data1: [{ name: 'name1', value: 1 },{ name: 'name2', value: 2 },{ name: 'name3', value: 3 }]

4、到此为止，回显颜色ok。

5、设置5个按钮，点击按钮，再点击色块，色块变成对应的颜色

 <div><el-button style="background-color: #32b6ff" @click="clickBtn(1)">低风险</el-button><el-button style="background-color: #ffff01" @click="clickBtn(2)">一般风险</el-button><el-button type="warning" @click="clickBtn(3)">较大风险</el-button><el-button type="danger" @click="clickBtn(4)">重大风险</el-button><el-button @click="clickBtn(5)">完成修改</el-button></div>clickBtn(key) {if (key == 5) {//接口保存this.data1return;} else {this.changeValue = key;}}

6、根据第2步里拿到的点击区域，

 changeColor(clickItem) {if (this.changeValue) {this.data1.forEach(item => {if (item.name == clickItem.name) {item.value = this.changeValue;}});// this.drawLine();this.myChart.setOption(this.option);  //动态option，就不用重复加载dom渲染echarts}console.log('changeColor:', this.data1);},

7、完工

工作量交给ui

重点是给svg图的每个区域加上name

厂房安全等级四色图且可修改相关推荐

QGIS|如何制作行政区划四色图
行政区划单元是常用的底图要素,通常用颜色进行区分,这些大面积分布的色彩往往决定了一幅地图的配色风格,因此,行政区划图的色彩配置将影响到地图信息表达效果. 本文结合QGIS的[拓扑着色]工具,介绍QGI ...
Cesium Primitive实现风险四色图
一般情况下,点线面用entity去实现显得更加容易,但是当数据量比较大的时候,其页面性能真的让人不敢恭维,被甲方大大看到,大概率会被拉出去阉割了... 所以今天我们使用Cesium底层api,Prim ...
PPTX双重预防体系风险四色图制作（34页）（附下载）
摘要:双重预防体系风险四色图制作(34页) 公众号:安全生产星球
2021年“金三银四”来袭！java修改json文件
第一个分布式:限流 1.1 ZooKeeper+Nginx面试常备题(附答案) ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Ha ...
征途pak文件修改_传奇技能，第十四祭：装备属性修改与增加新装备
技能献祭,Get 新技能:传奇技能--应用篇,增加新装备与绑特效跟航家学技能,用正式服带你飞,底部有配套学习资源场景:游戏中装备的属性是可以修改的,基础攻防属性可以直接在物品数据库中修改: 套装属 ...
linux netfilter路由表,Linux netfilter 学习笔记之十四 netfilter模块会修改数据包关联的路由缓存吗...
起因: 最近在完成网关的一个相关功能时,对于网关本身通过socket发送的数据包,没有从正确的wan接口发送出去,但是在udp_sendmsg 函数里打印出来的信息显示路由查找是正确的,但是当数据包 ...
Quartz总结（四）：动态修改定时器二
前文:http://www.cnblogs.com/LiuChunfu/p/5598806.html 提到了一种动态修改定时器的方法, 其本质就是在job方法中注入Schedular的对象,从Sche ...
给初学者：用VB写外挂 ———— 实战四：雷电3修改器
代码如下: 窗体: '请保留作者信息: 'ZCSOR于06-10-4开发 'E-MAIL:shaoyan5@163.com Option Explicit Private Sub Form_Load( ...
thinkPHP6.0入门笔记（四）——删除和修改用户信息
thinkPHP6.0实现删除和修改用户信息 1.删除用户信息 2.优化bootstrap资源引入方式 3.浏览器的cookie与session机制 4.token令牌原理 5.利用token防止表单 ...

厂房安全等级四色图且可修改

厂房安全等级四色图且可修改相关推荐

最新文章

热门文章

厂房 安全等级四色图 且可修改

厂房 安全等级四色图 且可修改相关推荐

最新文章

热门文章

厂房安全等级四色图且可修改

厂房安全等级四色图且可修改相关推荐