echarts实现流程图以及分割面板组件
资源内容介绍
echarts实现流程图以及分割面板组件 <template> <div ref="myChart" id="myChart" style="width:100%;height:100%;"></div> </template> <script> export default { props:['currentNodeObj'], watch:{ currentNodeObj: { handler(val){ if(val.id=='1'){ this.$nextTick(()=>{ this.myChart && this.myChart.clear() && this.myChart.dispose(); this.initTu(this.progress1.charts); }) }else if(val.id=='2'){ this.$nextTick(()=>{ this.myChart && this.myChart.clear() && this.myChart.dispose(); this.initTu(this.progress2.charts); }) }else if(val.id=='3'){ this.$nextTick(()=>{ this.myChart && this.myChart.clear() && this.myChart.dispose(); this.initTu(this.progress3.charts); }) } }, immediate:true, deep:true }, }, data() { return { progress1:{ charts:{ nodes: [ // 节点 { name: '开始', value: [200, 800], // symbol: "circle", // symbolSize: 50, label: { borderColor: '#e5e8e8', // 边框颜色 borderWidth: 1, // 边框宽度 borderRadius: [50,50,50,50], backgroundColor: '#fff', color: '#000', padding: [15, 15, 15, 15], }, select:{ label:{ backgroundColor: '#08979C', color: '#fff', } }, emphasis:{ label: { backgroundColor: '#08979C', color: '#fff', } } }, { name: '生成', value: [400, 800], label: { borderColor: '#e5e8e8', // 边框颜色 borderWidth: 1, // 边框宽度 borderRadius: [4, 4, 4, 4], backgroundColor: '#fff', color: '#000', padding: [10, 15, 10, 15], }, select:{ label:{ backgroundColor: '#08979C', color: '#fff', } }, emphasis:{ label: { backgroundColor: '#08979C', color: '#fff', } } }, { name: '质控', value: [600, 800], label: { borderColor: '#e5e8e8', // 边框颜色 borderWidth: 1, // 边框宽度 borderRadius: [4, 4, 4, 4], backgroundColor: '#fff', color: '#000', padding: [10, 15, 10, 15], }, select:{ label:{ backgroundColor: '#08979C', color: '#fff', } }, emphasis:{ label: { backgroundColor: '#08979C', color: '#fff', } } }, { name: '初审', value: [800, 800], label: { borderColor: '#e5e8e8', // 边框颜色 borderWidth: 1, // 边框宽度 borderRadius: [4, 4, 4, 4], backgroundColor: '#fff', color: '#000', padding: [10, 15, 10, 15], }, select:{ label:{ backgroundColor: '#08979C', color: '#fff', } }, emphasis:{ label: { backgroundColor: '#08979C', color: '#fff', } } }, { name: '复审', value: [800, 400], label: { borderColor: '#e5e8e8', // 边框颜色 borderWidth: 1, // 边框宽度 borderRadius: [4, 4, 4, 4], backgroundColor: '#fff', color: '#000', padding: [10, 15, 10, 15], }, select:{ label:{ backgroundColor: '#08979C', color: '#fff', } }, emphasis:{ label: { backgroundColor: '#08979C', color: '#fff', } } }, { name: '终审', value: [600, 400], label: { borderColor: '#e5e8e8', // 边框颜色 borderWidth: 1, // 边框宽度 borderRadius: [4, 4, 4, 4], backgroundColor: '#fff', color: '#000', padding: [10, 15, 10, 15], }, select:{ label:{ backgroundColor: '#08979C', color: '#fff', } }, emphasis:{ label: { backgroundColor: '#08979C', color: '#fff', } } }, { name: '上传', value: [400, 400], label: { borderColor: '#e5e8e8', // 边框颜色 borderWidth: 1, // 边框宽度 borderRadius: [4, 4, 4, 4], backgroundColor: '#fff', color: '#000', padding: [10, 15, 10, 15], }, select:{ label:{ backgroundColor: '#08979C', color: '#fff', } }, emphasis:{ label: { backgroundColor: '#08979C', color: '#fff', } } }, { name: '结束', value: [200, 400], label: { borderColor: '#e5e8e8', // 边框颜色 borderWidth: 1, // 边框宽度 borderRadius: [50,50,50,50], backgroundColor: '#fff', color: '#000', padding: [15, 15, 15, 15], }, select:{ label:{ backgroundColor: '#08979C', color: '#fff', } }, emphasis:{ label: { ba