Echarts在线免费图表

 
            var errorData = [
   [0,0.5,0.8],
   [1,1.1843,1.2127],
   [2,1.2368000000000001,1.262],
   [3,1.1925000000000001,1.2143],
   [4,0.9926999999999999,1.0285],
   [5,2.358,3.68],
];
function renderItem(params, api) {
						var xValue = api.value(0); //api.value(0) 表示取出当前 dataItem 中第一个维度的数值。
						var highPoint = api.coord([api.value(1),xValue]); //高点
						var lowPoint = api.coord([api.value(2),xValue]); //低点
						// var halfWidth = api.size([1, 0])[0] * 0.1; //半宽度
						var halfWidth = 20;
						var style = api.style({
							stroke: api.visual('color'),
							fill: null
						});					
	 
						return {
							type: 'group',
							children: [
								{
									type: 'line',
									shape: {
										x1: (highPoint[0] - halfWidth),
										y1: highPoint[1],
										x2: highPoint[0] + halfWidth,
										y2: highPoint[1]
									},
									style: style
								}, 
								// {
								// 	type: 'line',
								// 	shape: {
								// 		x1: highPoint[0],
								// 		y1: highPoint[1],
								// 		x2: lowPoint[0],
								// 		y2: lowPoint[1]
								// 	},
								// 	style: style
								// }, 
								// {
								// 	type: 'line',
								// 	shape: {
								// 		x1: lowPoint[0] - halfWidth,
								// 		y1: lowPoint[1],
								// 		x2: lowPoint[0] + halfWidth,
								// 		y2: lowPoint[1]
								// 	},
								// 	style: style
								// }
							]
						};
					}
option = {
              grid: {
                left: '8%',
                right: '12%',
                bottom: '20%'
              },
              tooltip: {
                trigger: 'axis',
                confine: true // 解决浮窗被截断问题
              },
              legend: {
                // type: 'scroll',
                bottom: 20,
                width: 600, // 单行图例的宽度
                icon: 'path://M801.171 547.589H222.83c-17.673 0-32-14.327-32-32s14.327-32 32-32h578.341c17.673 0 32 14.327 32 32s-14.327 32-32 32z'
              },
              xAxis: {
                type:'value'
                
              },
              yAxis: {
                      "type": "category",
                      "axisLine": {
                          "onZero": false,
                          "show": true
                      },
                      "splitLine": {
                          "show": true,
                          "lineStyle": {
                              "type": "dashed",
                              "color": "gainsboro"
                          }
                      },
                      "boundaryGap": false,
                      "data": [
                          -1,
                          -0.8,
                          -0.2,
                          0.4,
                          0.9,
                          1
                      ],
                      "scale": true
                  } ,
              series: [
                {
								type: 'scatter',
								name: 'scatter',
								data: [0.66,
                      1.19,
                      1.24,
                      1.2034,
                      1.0106,
                      2.55]
							},
              {
                type: 'custom',
                name: 'error',
                renderItem: renderItem,
                encode: {
                    x:  [1, 2],
                    y: 0
                },
                data: errorData,
                z: 100
              },
                            {
                  "type": "line",
                  "smooth": true,
                  "yAxisIndex": 0,
                  "data": [
                      0.66,
                      1.19,
                      1.2494,
                      1.2034,
                      1.0106,
                      2.55
                  ],
                  "name": "工况1A"
              }
          ]
            }