Echarts繪制帶箭頭的線
這個圖主要參考echarts官網的關系圖繪制的,難點在于去掉其餘導向圖的箭頭,隻保留最後一個節點的箭頭,以及處理值為null時箭頭的指向問題,代碼如下:
<template>
<div class="invoicechart">
<div class="invoicechart_box" :id="elId"> </div>
</div>
<!-- :id="echartId" -->
</template>
<script>
import uuidv1 from 'uuid/v1'
export default {
name: 'r-echarts-line-mul',
data () {
return {
elId: 'echartid11',
// myChart執行個體數組
myChart:null,
legendShow:false,
}
},
props: {
data: {//具體資料
type: Object,
default(){
return{
}
}
}
},
created(){
this.elId = uuidv1() //擷取随機id
},
mounted () {
this.setEchart();
},
watch:{
data: {//監聽數值是否有變化
handler(newValue, oldValue) {
if (!this.myChart) {
this.setEchart();
}else{
this.chartChange();
}
},
deep: true//深度
}
},
computed: {
origin() {
return this.data;
},
option() {
let that = this;
// console.log('color',this.data.color)
let obj = {
title: {
text: that.origin.title?that.origin.title:''
},
color:['#6fac45','#f5bb94','#a2c6e7','#aeaeae'],
tooltip: { },
legend: { },
xAxis: {
type: 'category',
// boundaryGap: true,
axisLine:{
lineStyle:{
color:'#292727'
}
},
axisLabel:{
textStyle:{
color:'#000000',
fontFamily:'Gotham-Bold'
}
},
data: that.origin.xAxisData?that.origin.xAxisData:[],
},
yAxis: {
type: 'value',
show: true,
min:that.origin.min?that.origin.min:0,
axisLine:{
lineStyle:{
color:'#292727'
}
},
axisLabel: {
show: true,
position: 'inside',
interval: 'auto',
textStyle:{
color:'#000000',
fontFamily:'Gotham-Bold'
},
// formatter: '{value}%'
}
},
series: this.dealSeries
}
return obj;
},
dealSeries(){
let data=[];
let objdata={};
let links={};
let color=this.data.color?this.data.color:['#6fac45','#ff6800','#0083ff','#ff0202'];
if(this.data.seriesData){
this.data.seriesData.forEach((element,index) => {
// console.log('1',element.data)
//過濾null,将所有值為null的轉為字元串‘null’
element.data = element.data.map((item,index) => {
return item==null?'null':item;
})
// console.log('2',element.data)
//倒序周遊數組,查找值為null的值,并将其删除,知道值為數字則跳出循環
for(var i = element.data.length-1;i!=-1;i--){
if(element.data[i] == 'null'){
//符合條件,移除
element.data.pop();
}else{
break;
}
}
// console.log('3',element.data)
//箭頭指向,值為null時指向置為空,将線的寬度置為0,隐藏線
links = element.data.map(function (item, i) {
if(item=='null'){
return {
source:'',
target: '',
lineStyle: {
normal: {
width: 0,
curveness: 0.2
}
}
}
}else{
return {
source: i,
target: i + 1
}
}
});
links.pop();
let list = links.pop();
list.symbolSize=[0,10]
links.push(list);
//繪制實線
if(element.name=='true_value'){
objdata={
type: 'line',
data: element.data,
symbol: 'circle', //設定為實心點
symbolSize: 5, //設定實心點的大小
color:'green',
lineStyle: {
normal: {
type:'solid',
color:'green',
width:3
}
}
}
}else{
//繪制虛線
objdata={
type: 'graph',
layout: 'none',
coordinateSystem: 'cartesian2d',
symbolSize: 0,
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [0, 0],
data:element.data,
links:links,
color:color[index],
lineStyle: {
normal: {
type:'dashed',
color:color[index],
width:2,
}
}
};
}
// console.log(objdata)
if(element&&Object.prototype.toString.call(element)=="[object Object]"){
for(let key in element){
if(!objdata[key]){
objdata[key]=element[key];
}
}
}
data.push(objdata);
});
}
return data;
}
},
methods: {
setEchart () {
let _this=this;
this.myChart = this.$echarts.init(document.getElementById(_this.elId));
this.myChart.setOption(this.option);
this.myChart.group = _this.data.name;
this.$echarts.connect(_this.data.name);
window.addEventListener('resize',function(){//圖表自适應
_this.myChart.resize();
});
},
chartChange () {
this.myChart.setOption(this.option);
},
},
beforeDestroy(){
this.myChart.clear();
}
}
</script>