var datalist = [ { mc: "[1440]", y: "747", x: "400", x_l: "123", x_r: "220", y_b: "697", y_t: "837" }, { mc: "[1441]", y: "706", x: "600", x_l: "233", x_r: "320", y_b: "656", y_t: "765" }, { mc: "[1450]", y: "690", x: "800", x_l: "353", x_r: "420", y_b: "640", y_t: "753" }, { mc: "[SH10]", y: "668", x: "5200", x_l: "2563", x_r: "2620", y_b: "618", y_t: "719" }, { mc: "[SH28]", y: "668", x: "6400", x_l: "3176", x_r: "3220", y_b: "618", y_t: "732" }, { mc: "[2568]", y: "666", x: "2800", x_l: "1364", x_r: "1420", y_b: "616", y_t: "716" }, { mc: "[SH30]", y: "665", x: "6600", x_l: "3271", x_r: "3320", y_b: "615", y_t: "721" }, { mc: "[SH32]", y: "664", x: "6800", x_l: "3373", x_r: "3420", y_b: "614", y_t: "721" }, { mc: "[S339]", y: "661", x: "3800", x_l: "1869", x_r: "1920", y_b: "611", y_t: "711" }, { mc: "[2926]", y: "658", x: "3000", x_l: "1472", x_r: "1520", y_b: "608", y_t: "708" }, { mc: "[1640]", y: "658", x: "1600", x_l: "773", x_r: "820", y_b: "608", y_t: "709" }, { mc: "[N112]", y: "658", x: "3200", x_l: "1572", x_r: "1620", y_b: "608", y_t: "708" }, { mc: "[S523]", y: "657", x: "5000", x_l: "2473", x_r: "2520", y_b: "607", y_t: "707" }, { mc: "[S520]", y: "657", x: "4800", x_l: "2373", x_r: "2420", y_b: "607", y_t: "707" }, { mc: "[1641]", y: "656", x: "1800", x_l: "874", x_r: "920", y_b: "606", y_t: "706" }, { mc: "[1470]", y: "656", x: "1200", x_l: "574", x_r: "620", y_b: "606", y_t: "706" }, { mc: "[N117]", y: "655", x: "3400", x_l: "1675", x_r: "1720", y_b: "605", y_t: "705" }, { mc: "[SH22]", y: "654", x: "5800", x_l: "2877", x_r: "2920", y_b: "604", y_t: "705" }, { mc: "[SH24]", y: "654", x: "6000", x_l: "2978", x_r: "3020", y_b: "604", y_t: "706" }, { mc: "[1528]", y: "654", x: "1400", x_l: "676", x_r: "720", y_b: "604", y_t: "704" }, { mc: "[1456]", y: "653", x: "1000", x_l: "477", x_r: "520", y_b: "603", y_t: "703" }, { mc: "[S430]", y: "653", x: "4600", x_l: "2278", x_r: "2320", y_b: "603", y_t: "704" }, { mc: "[2240]", y: "652", x: "2400", x_l: "1178", x_r: "1220", y_b: "602", y_t: "702" }, { mc: "[2250]", y: "652", x: "2600", x_l: "1278", x_r: "1320", y_b: "602", y_t: "702" }, { mc: "[1650]", y: "652", x: "2000", x_l: "978", x_r: "1020", y_b: "602", y_t: "702" }, { mc: "[SH20]", y: "652", x: "5600", x_l: "2778", x_r: "2820", y_b: "602", y_t: "702" }, { mc: "[S331]", y: "651", x: "3600", x_l: "1780", x_r: "1820", y_b: "601", y_t: "702" }, { mc: "[2200]", y: "651", x: "2200", x_l: "1079", x_r: "1120", y_b: "601", y_t: "701" }, { mc: "[S426]", y: "651", x: "4400", x_l: "2180", x_r: "2220", y_b: "601", y_t: "702" }, { mc: "[1420]", y: "651", x: "200", x_l: "79", x_r: "120", y_b: "501", y_t: "701" }, { mc: "[SH16]", y: "651", x: "5400", x_l: "2679", x_r: "2720", y_b: "601", y_t: "701" }, { mc: "[S33E]", y: "651", x: "4000", x_l: "1979", x_r: "2020", y_b: "601", y_t: "701" }, { mc: "[SH26]", y: "651", x: "6200", x_l: "3079", x_r: "3120", y_b: "601", y_t: "701" }, { mc: "[T420]", y: "651", x: "7000", x_l: "3479", x_r: "3520", y_b: "601", y_t: "701" }, { mc: "[S33N]", y: "651", x: "4200", x_l: "2079", x_r: "2120", y_b: "601", y_t: "701" }, ] var data = []; //{value:['Blouse "Blue Viola"', 101.88, 99.75, 76.75, 116.75, 69.88, 119.88],itemStyle:{color:"black"}}, var xdata = []; var xlable = new Map(); var ymax = 1000; var xinterval = 200; var xmax = 7200; for (var d in datalist) { data.push({ value: [ datalist[d].mc, parseInt(datalist[d].y), parseInt(datalist[d].x), parseInt(datalist[d].x_l) * 2, parseInt(datalist[d].x_r) * 2, parseInt(datalist[d].y_b), parseInt(datalist[d].y_t) ], itemStyle: { color: '#23a8f7' } }); xdata.push(datalist[d].mc) xlable.set((datalist[d].x), datalist[d].mc) } // 标题 y x 横轴头的位置横轴尾的位置纵轴底部位置纵轴头部位置 function renderItem(params, api) { // console.log(params) var children = []; var coordDims = ['x', 'y']; for (var baseDimIdx = 0; baseDimIdx < 2; baseDimIdx++) { var otherDimIdx = 1 - baseDimIdx; var encode = params.encode; var baseValue = api.value(encode[coordDims[baseDimIdx]][0]); var param = []; param[baseDimIdx] = baseValue; param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][1]); var highPoint = api.coord(param); param[otherDimIdx] = api.value(encode[coordDims[otherDimIdx]][2]); var lowPoint = api.coord(param); var halfWidth = 5;//四周小线的高 var zlineWidth=4;//中间十字的粗细 var style = api.style({ stroke: api.visual('color'), fill: null, lineWidth: 3,//四周小线的粗细 }); children.push({ type: 'line', shape: makeShape( baseDimIdx, highPoint[baseDimIdx] - halfWidth, highPoint[otherDimIdx], highPoint[baseDimIdx] + halfWidth, highPoint[otherDimIdx] ), style: style }, { type: 'line', shape: makeShape( baseDimIdx, highPoint[baseDimIdx], highPoint[otherDimIdx], lowPoint[baseDimIdx], lowPoint[otherDimIdx] ), style: { stroke: "#808080", lineWidth: zlineWidth, } }, { type: 'line', shape: makeShape( baseDimIdx, lowPoint[baseDimIdx] - halfWidth, lowPoint[otherDimIdx], lowPoint[baseDimIdx] + halfWidth, lowPoint[otherDimIdx] ), style: style }); } // for (var ch in children) { // if(ch==0){ // children[ch].style.text=" "; // } // if(ch==1){ // children[ch].style.text="1"; // } // if(ch==2){ // children[ch].style.text="5"; // } // if(ch==3){ // children[ch].style.text="3"; // } // if(ch==4){ // children[ch].style.text="4"; // } // console.log(children) // } function makeShape(baseDimIdx, base1, value1, base2, value2) { var shape = {}; shape[coordDims[baseDimIdx] + '1'] = base1; shape[coordDims[1 - baseDimIdx] + '1'] = value1; shape[coordDims[baseDimIdx] + '2'] = base2; shape[coordDims[1 - baseDimIdx] + '2'] = value2; return shape; } return { type: 'group', children: children }; } // console.log(renderItem) option = { tooltip: { formatter: function (item) { // console.log(item) return item.marker + item.seriesName + "
" + "第一列：" + item.value[0] + "
" + "第二列：" + item.value[1] + "
" + "第三列：" + item.value[2] + "
" + "第四列：" + item.value[3] + "
" + "第五列：" + item.value[4] + "
" + "第六列：" + item.value[5] + "
" + "第七列：" + item.value[6] + "
"; } }, // legend: { // data: ['bar', 'error'] // }, dataZoom: [{ type: 'slider', start:0, // end:39.45, end: 19.445, zoomLock:true, height: 8, bottom: 20, borderColor: 'transparent', backgroundColor: '#e2e2e2', handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z', // jshint ignore:line handleSize: 20, handleStyle: { shadowBlur: 6, shadowOffsetX: 1, shadowOffsetY: 2, shadowColor: '#aaa' }, xAxisIndex: [0], } // , { // type: 'inside', // filterMode: 'weakFilter' // } ], grid: { // bottom: 80 left: 50, right: 50 }, xAxis: [{ name: "疑点", type: 'value', interval: xinterval, min: 0, max: xmax, silent: true, axisLine: { lineStyle: { color: '#e6e6e6' } }, splitLine: { lineStyle: { color: '#e6e6e6' } }, nameTextStyle: { color: "black", }, axisLabel: { color: "black", formatter: function (obj, index) { // console.log(obj) // return obj; // obj=num(parseInt(obj)); obj = obj; return (xlable.get('' + obj + '')) != undefined ? xlable.get('' + obj + '') : ""; }, } }, ], yAxis: { name: "数量", max: ymax, axisLine: { lineStyle: { color: '#e6e6e6' } }, splitLine: { lineStyle: { color: '#e6e6e6' } }, nameTextStyle: { color: "black", }, axisLabel: { color: "black", }, }, series: [ { type: 'scatter', name: 'error', data: data, symbolSize:1, symbol:'circle', encode: { x: 2, y: 1, }, itemStyle: { normal: { color: '#77bef7' } }, label: { show: true, offset:[0,40], fontWeight:"blod", textStyle: { color: "black" }, position: "insideBottom", formatter: function(obj,ss) { return obj.data.value[0]; // return ''+ obj.data.value[0]+''; } } }, { type: 'custom', name: 'error', renderItem: renderItem, // dimensions: dimensions, encode: { x: [2, 3, 4], y: [1, 5, 6], }, data: data, z: 100, xAxisIndex: 0, // label: { // show: true, // // offset:[0,40], // fontWeight:"blod", // textStyle: { // color: "black" // }, // position: "insideBottom", // formatter: function(obj) { // return obj.data.value[0]; // } // } }, ] }; function num(abc) { var s = Math.ceil(abc / 100); var e = s * 100; return e; }

Echarts在线免费图表