?
getEchart1() {
echarts.init(document.getElementById('echart1')).dispose();
var chartDom = document.getElementById('echart1');
this.myChart = echarts.init(chartDom);
var charts = {
nodes: [ // 節(jié)點(diǎn)
{
name: '開始', value: [0, 500],
label: {
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#7856FF',
color: '#fff',
padding: [8, 5, 7, 5],
}
},
{
name: '查找資源', value: [88, 500],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '資源申請', value: [180, 500],
label: {
borderColor: '#E6E6E6', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#F5F5F5',
color: 'rgba(0, 0, 0, 0.45)',
padding: [8, 5, 7, 5],
},
},
{
name: '資源提供方審核', value: [300, 500],
label: {
borderColor: '#E6E6E6', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#F5F5F5',
color: 'rgba(0, 0, 0, 0.45)',
padding: [8, 5, 7, 5],
},
},
{
name: '平臺審核', value: [420, 500],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '資源使用', value: [520, 500],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '服務(wù)', value: [620, 500],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '認(rèn)證對接', value: [720, 500],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '接口調(diào)用', value: [820, 500],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '數(shù)據(jù)使用', value: [920, 500],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '結(jié)束', value: [1000, 500],
label: {
backgroundColor: '#13C2C2',
color: '#fff',
borderRadius: [4, 4, 4, 4],
padding: [10, 8, 10, 8],
},
},
{
name: '文件', value: [520, 800],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '文件下載', value: [800, 800],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '庫表', value: [520, 200],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '前置庫填寫', value: [650, 200],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '生成推送任務(wù)', value: [800, 200],
label: {
borderColor: '#E6E6E6', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#F5F5F5',
color: 'rgba(0, 0, 0, 0.45)',
padding: [8, 5, 7, 5],
},
},
{
name: '數(shù)據(jù)推送', value: [1000, 200],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
],
linesData: [ // 連線
{ name: '', coords: [[0, 500], [60, 500]] },
{ name: '', coords: [[80, 500], [155, 500]] },
{ name: '', coords: [[180, 500], [250, 500]] },
{ name: '', coords: [[320, 500], [390, 500]] },
{ name: '', coords: [[420, 500], [490, 500]] },
{ name: '', coords: [[520, 500], [600, 500]] },
{ name: '', coords: [[620, 500], [690, 500]] },
{ name: '', coords: [[720, 500], [790, 500]] },
{ name: '', coords: [[820, 500], [890, 500]] },
{ name: '', coords: [[920, 500], [990, 500]] },
{
name: '', coords: [ // 關(guān)于折線要分兩個(gè)方向，第一個(gè)方向無symbol
[530, 500],
[530, 710]
],
},
{
name: '', coords: [
[530, 800],
[770, 800]
]
},
{
name: '', coords: [
[800, 800],
[1000, 800]
], symbol: 'none'
},
{
name: '', coords: [
[1000, 800],
[1000, 600]
]
},
{
name: '', coords: [ // 關(guān)于折線要分兩個(gè)方向，第一個(gè)方向無symbol
[530, 500],
[530, 300]
]
},
{
name: '', coords: [ // 關(guān)于折線要分兩個(gè)方向，第一個(gè)方向無symbol
[530, 200],
[620, 200]
],
},
{
name: '', coords: [ // 關(guān)于折線要分兩個(gè)方向，第一個(gè)方向無symbol
[650, 200],
[750, 200]
]
},
{
name: '', coords: [
[800, 200],
[970, 200]
],
},
{
name: '', coords: [
[1000, 200],
[1000, 400]
],
},
]
}
var option = {
xAxis: {
min: 0,
max: 1060,
show: false,
type: "value",
},
yAxis: {
min: 0,
max: 1060,
show: false,
type: "value",
},
grid: {
left: '1%',
right: '0',
bottom: 0,
top: 0
},
tooltip: {
show: false,
axisPointer: {
type: "shadow",
},
borderColor: "white",
backgroundColor: "white",
borderWidth: 1,
padding: 0,
textStyle: {
fontSize: 14,
color: '#333',
},
},
series: [
{
type: "graph",
coordinateSystem: "cartesian2d",
symbol: "rect",
// symbolSize: [80, 40],
// edgeSymbol: ['', 'arrow'],
// edgeSymbolSize: [1, 10],
lineStyle: {
normal: {
width: 0,
color: '#387DFF'
}
},
itemStyle: {
color: "rgb(194, 194, 194)",
},
symbolOffset: [10, 0],
force: {
edgeLength: 10,//連線的長度
repulsion: 50 //子節(jié)點(diǎn)之間的間距
},
label: {
show: true,
color: '#387DFF', // 節(jié)點(diǎn)文字顏色
},
data: charts.nodes
},
{
type: "lines",
polyline: false,
coordinateSystem: "cartesian2d",
lineStyle: {
// type: "dashed",
opacity: 0.5,
width: 1,
color: '#08979C',
},
symbol: ['', 'arrow'],
symbolSize: 10,
label: {
show: true,
position: "middle",
fontSize: 16,
color: '#08979C',
formatter: function (args) {
let val = args.data.name;
var strs = val.split("");
var str = "";
if (args.data.linkView) {
for (var i = 0, s; (s = strs[i++]);) {
str += s;
if (!(i % 15)) str += "\n";
}
return str;
}
},
},
// lineStyle: {
// color: '#65B7E3',
// width: 2
// },
data: charts.linesData,
},
],
};
option && this.myChart.setOption(option);
let chart = this.myChart
window.addEventListener('resize', function () {
chart.resize();
});
},
文章來源：http://www.zghlxwxcb.cn/news/detail-601909.html
getEchart2() {
echarts.init(document.getElementById('echart2')).dispose();
var chartDom = document.getElementById('echart2');
this.myChart = echarts.init(chartDom);
var charts = {
nodes: [ // 節(jié)點(diǎn)
{
name: '開始', value: [2, 500],
label: {
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#7856FF',
color: '#fff',
padding: [10, 8, 10, 8],
}
},
{
name: '資源注冊', value: [150, 500],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '數(shù)據(jù)', value: [200, 800],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '數(shù)據(jù)源注冊', value: [300, 800],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '數(shù)據(jù)資產(chǎn)注冊', value: [450, 800],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '資源使用', value: [600, 800],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '文件下載', value: [800, 800],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '服務(wù)', value: [200, 200],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '服務(wù)注冊', value: [300, 200],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '服務(wù)發(fā)布', value: [450, 200],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '平臺審核', value: [800, 500],
label: {
borderColor: '#387DFF', // 邊框顏色
borderWidth: 1, // 邊框?qū)挾? borderRadius: [4, 4, 4, 4],
backgroundColor: '#fff',
color: '#387DFF',
padding: [8, 5, 7, 5],
},
},
{
name: '結(jié)束', value: [1000, 500],
label: {
backgroundColor: '#13C2C2',
color: '#fff',
borderRadius: [4, 4, 4, 4],
padding: [10, 8, 10, 8],
},
},
],
linesData: [ // 連線
{ name: '', coords: [[0, 500], [120, 500]] },
{ name: '', coords: [[130, 500], [770, 500]] },
{ name: '', coords: [[790, 500], [980, 500]] },
{ name: '', coords: [[155, 500], [155, 800]] , symbol: 'none'},
{ name: '', coords: [[155, 800], [180, 800]] },
{ name: '', coords: [[200, 800], [270, 800]] },
{ name: '', coords: [[300, 800], [410, 800]] },
{ name: '', coords: [[450, 800], [570, 800]] },
{ name: '', coords: [[620, 800], [770, 800]] },
{ name: '', coords: [[810, 800], [810, 560]] },
{ name: '', coords: [[155, 800], [155, 200]] , symbol: 'none'},
{ name: '', coords: [[155, 200], [180, 200]] },
{ name: '', coords: [[210, 200], [270, 200]] },
{ name: '', coords: [[300, 200], [420, 200]] },
{ name: '', coords: [[460, 200], [810, 200]] , symbol: 'none'},
{ name: '', coords: [[810, 200], [810, 457]] },
]
}
var option = {
xAxis: {
min: 0,
max: 1060,
show: false,
type: "value",
},
yAxis: {
min: 0,
max: 1060,
show: false,
type: "value",
},
grid: {
left: '1%',
right: '0',
bottom: 0,
top: 0
},
tooltip: {
show: false,
axisPointer: {
type: "shadow",
},
borderColor: "white",
backgroundColor: "white",
borderWidth: 1,
padding: 0,
textStyle: {
fontSize: 14,
color: '#333',
},
},
series: [
{
type: "graph",
coordinateSystem: "cartesian2d",
symbol: "rect",
// symbolSize: [80, 40],
// edgeSymbol: ['', 'arrow'],
// edgeSymbolSize: [1, 10],
lineStyle: {
normal: {
width: 0,
color: '#387DFF'
}
},
itemStyle: {
color: "rgb(194, 194, 194)",
},
symbolOffset: [10, 0],
force: {
edgeLength: 10,//連線的長度
repulsion: 50 //子節(jié)點(diǎn)之間的間距
},
label: {
show: true,
color: '#387DFF', // 節(jié)點(diǎn)文字顏色
},
data: charts.nodes
},
{
type: "lines",
polyline: false,
coordinateSystem: "cartesian2d",
lineStyle: {
// type: "dashed",
opacity: 0.5,
width: 1,
color: '#08979C',
},
symbol: ['', 'arrow'],
symbolSize: 10,
label: {
show: true,
position: "middle",
fontSize: 16,
color: '#08979C',
formatter: function (args) {
let val = args.data.name;
var strs = val.split("");
var str = "";
if (args.data.linkView) {
for (var i = 0, s; (s = strs[i++]);) {
str += s;
if (!(i % 15)) str += "\n";
}
return str;
}
},
},
// lineStyle: {
// color: '#65B7E3',
// width: 2
// },
data: charts.linesData,
},
],
};
option && this.myChart.setOption(option);
let chart = this.myChart
window.addEventListener('resize', function () {
chart.resize();
});
},?當(dāng)這兩個(gè)流程圖進(jìn)行切換展示時(shí)，一定要使用v-show文章來源地址http://www.zghlxwxcb.cn/news/detail-601909.html
<div class="flow">
<div class="flow_title">
<div class="flow_tabbar" @click="flow(0)"
:class="[flowIndex == 0 ? 'flow_title_act' : 'flow_title_act1']">資源申請流程</div>
<div class="flow_tabbar" @click="flow(1)"
:class="[flowIndex == 1 ? 'flow_title_act' : 'flow_title_act1']">資源發(fā)布流程</div>
</div>
<div class="flow_con" v-show="flowIndex == 0">
<div id="echart1">
</div>
</div>
<div class="flow_con" v-show="flowIndex == 1">
<div id="echart2"></div>
</div>
</div>flow(index) {
this.flowIndex = index;
this.$nextTick(() => {
if (index == 1) {
this.getEchart2();
} else if (index == 0) {
this.getEchart1();
}
})
},到了這里，關(guān)于用echarts繪制流程圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
