Echarts绘制带箭头的线

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>

Echarts绘制带箭头的线相关推荐

leaflet 绘制带箭头的线（虚线，实线）
先加载leaflet地图引用leaflet 插件 leaflet-polylinedecorator polyline = L.polyline(tempLatLngArr, {color: '#3 ...
R语言使用rnorm函数生成正太分布数据、使用plot函数可视化折线图、使用arrows函数在可视化图像中绘制箭头曲线、绘制带箭头线段，可以设置箭头角度，有几个箭头（1起点箭头、2终点箭头，3双箭头）
R语言使用rnorm函数生成正太分布数据.使用plot函数可视化折线图.使用arrows函数在可视化图像中绘制箭头曲线.绘制带箭头线段,可以设置箭头角度,有几个箭头(1起点箭头.2终点箭头,3双箭头) ...
前端HTML渲染带箭头的线
前端渲染带箭头的线 1. 效果图 2. 实现方法参考 1. 效果图 mapbox-gl渲染效果图如下: minedatamap 效果图如下: 2. 实现方法 mapbox-gl minedatama ...
Android Canvas绘制带箭头的直线
先看下效果图: 下面我们直接看代码我自定义了一个View,代码如下: package com.davis.drawtrangle;import android.content.Context; im ...
Matlab如何绘制带箭头图形
Matlab如何绘制带箭头图形带箭头坐标轴带箭头曲线实例演示例1 带箭头曲线例2 带箭头曲线+带箭头坐标轴联系作者带箭头坐标轴前段时间推出了绘制箭头坐标轴曲线的方法,许多网友联系我索取 ...
Matlab任意两点之间绘制带箭头的直线
Matlab任意两点之间绘制带箭头的直线简单绘制任意两点之间.本来不想自己写的,可是网上的代码用起来不舒服,所以简单看看原理,原来就是个坐标变换而已.索性自己写了一份,分享如下: function ...
WebGL绘制带箭头贴图的线
示例在讲述本文内容之前,我希望读者先具备以下知识点: 了解WebGL的基本知识,懂得调用自定义的Shader程序: 基本的数学基础和空间几何知识: 明白GPU的渲染管线流程: 因为,本文内容主要讲述 ...
delphi 画带箭头的线
unit Unit1;interfaceusesWindows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,Di ...
高德地图画带箭头的线_模具装配图画成这样，那才真的叫标准！
模具装配图最主要的目的是要反映模具的基本构造,表达零件之间的相互装配关系,包括位置关系和配合关系. 从这个目的出发,一张模具装配图所必须达到的最基本要求为: 首先,模具装配图中各个零件(或部件)不能遗 ...

Echarts绘制带箭头的线

Echarts绘制带箭头的线相关推荐

最新文章

热门文章