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

使用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.data1
        return;
      } 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