Johu

echarts绘制多条线

echarts成为我生活中不可或缺的一部分。直到它坑了我😒

项目上要画多条线,用lines写完了发现出不来东西,可这文档翻遍都没发现有啥错误

最后发现要在xAxisyAxis设置一个范围把内容框起来才行,如果不加这个属性,只能起点是[0,0]来画多条线。

关键代码

    xAxis: {
        min: 0,
        max: 100,
        show: false,
        type: 'value'
    },
    yAxis: {
        min: 0,
        max: 100,
        show: false,
        type: 'value'
    },

完整代码

option = {
    xAxis: {
        min: 0,
        max: 100,
        show: false,
        type: 'value'
    },
    yAxis: {
        min: 0,
        max: 100,
        show: false,
        type: 'value'
    },
	        series: [
	          {
	            name: 'A',
	            type: 'lines',
	            coordinateSystem: 'cartesian2d',
	            z: 1,
                polyline: true ,
	            effect: {
	              show: true,
	              period: 4,
	              smooth: true,
	              trailLength: 0.2,
	              // symbol: 'arrow',
	              symbol: 'circle',
	              color: 'rgba(55,155,255,0.5)',
	              symbolSize: 20
	            },
	            data: [{
	              coords: [ 
	                [0, 0], // 起点
	                [50, 300], // 终点
	              ]
	            },
	            {
	              coords: [ 
	                [50, 0], // 起点
	                [0, 100], // 终点
	              ]
	            }
	            ]
	          }
	        ]
	      } 

实现效果

posted @ 2020-11-05 14:22  Johu  阅读(4091)  评论(0编辑  收藏  举报