使用echarts的庖丁解牛示例

1、UI畫svg圖，每個(gè)區(qū)域定義好name，或id。前端拿到svg圖，在vscode里可以看到源碼

?2、svg丟到服務(wù)器，通過線上地址拿取svg圖和源碼? 并添加echarts點(diǎn)擊事件

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 //鼠標(biāo)懸浮不顯示},visualMap: {left: 'center',bottom: '-10%', //隱藏底部顏色條min: 1,max: 4,orient: 'horizontal',realtime: true,calculable: false, //底部不可拖動(dòng)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, //鼠標(biāo)懸浮不變色areaColor: null}},selectedMode: false,data: this.data1}]};this.myChart.setOption(this.option);window.onresize = this.myChart.resize;//獲取當(dāng)前點(diǎn)擊的項(xiàng)的參數(shù)this.myChart.on('click', param => {console.log('click:', param);this.changeColor(param.data);});});},

3、后端傳的每個(gè)區(qū)域的name和value

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

4、到此為止，回顯顏色ok。

5、設(shè)置5個(gè)按鈕，點(diǎn)擊按鈕，再點(diǎn)擊色塊，色塊變成對應(yīng)的顏色

?

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

6、根據(jù)第2步里拿到的點(diǎn)擊區(qū)域，

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); //動(dòng)態(tài)option，就不用重復(fù)加載dom渲染echarts}console.log('changeColor:', this.data1);},

7、完工

工作量交給ui

重點(diǎn)是給svg圖的每個(gè)區(qū)域加上name

總結(jié)

以上是生活随笔為你收集整理的厂房 安全等级四色图 且可修改的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。