option = { backgroundColor: '#000', topicIndex: null, height: '432px', legend: { show: false }, tooltip: { formatter: function(params) { console.log(params); var data = params.data; return "

" + "

编码　" + data.name + "

" + "

" + data.paizi + "

" + "

轮胎　" + data.luntai + "

" + "

刹车　" + data.shache + "

" + "

雨刮　" + data.yugua + "

" + "

挡风玻璃　" + data.dfbl + "

" + "

"; }, padding: 0, axisPointer: { type: 'shadow', }, position: function(point, params, dom, rect, size) { console.log(); if (point[1] > 866 && point[0] <= 1644) { return [point[0] + 10, point[1] - (size.contentSize)[1]]; } else if (point[1] > 866 && point[0] > 1644) { return [point[0] - (size.contentSize)[0] - 10, point[1] - (size.contentSize)[1]]; } } }, grid: { containLabel: true, left: 0, top: 0, right: 0, bottom: 0, height: 432, }, xAxis: { max: 100, min: 0, interval: 2, position: 'top', type: 'value', splitNumber: 4, axisLabel: { //坐标轴刻度标签的相关设置。 show: false, interval: 0, //设置为 1，表示『隔一个标签显示一个标签』 margin: 15, }, axisTick: { //坐标轴刻度相关设置。 show: false, }, axisLine: { show: false, lineStyle: { color: '#fff', opacity: 0.2 } }, splitLine: { //坐标轴在 grid 区域中的分隔线。 show: false, lineStyle: { color: ['#fff'], opacity: 0.1 } } }, yAxis: { max: 100, min: 0, interval: 1, inverse: true, type: 'value', splitNumber: 4, axisLine: { show: false, lineStyle: { color: '#fff', opacity: 0.2 } }, axisLabel: { show: false }, axisTick: { show: false }, splitLine: { //坐标轴在 grid 区域中的分隔线。 show: false, } }, dataZoom: [{ type: 'slider', show: true, yAxisIndex: [0], right: '1px', start: 1, end: 36, fillerColor: '#1C466A', showDetail: false, handleSize: '0%', zoomLock: true, borderColor: 'rgba(167,183,204,0)', width: 8, }, { type: 'inside', yAxisIndex: [0], start: 1, end: 36, zoomOnMouseWheel: false, moveOnMouseMove: false, moveOnMouseWheel: true } ], series: [{ name: "车辆", data: [{ value: [5, 5], name: "G253678", paizi: "广汽丰田", luntai: "故障", shache: "故障", yugua: "正常", dfbl: "正常" }, { value: [15, 5], name: "G251248", paizi: "广汽丰田", luntai: "故障", shache: "正常", yugua: "故障", dfbl: "故障" }, { value: [25, 5], name: "G253624", paizi: "广汽丰田", luntai: "故障", shache: "正常", yugua: "正常", dfbl: "正常" }, { value: [35, 5], name: "G250212", paizi: "广汽丰田", luntai: "故障", shache: "正常", yugua: "正常", dfbl: "正常" }, { value: [45, 5], name: "G253313", paizi: "广汽丰田", luntai: "故障", shache: "故障", yugua: "正常", dfbl: "正常" }, { value: [55, 5], name: "G253625", paizi: "广汽丰田", luntai: "正常", shache: "故障", yugua: "正常", dfbl: "正常" }, { value: [65, 5], name: "G253520", paizi: "广汽丰田", luntai: "故障", shache: "正常", yugua: "正常", dfbl: "正常" }, { value: [75, 5], name: "G253775", paizi: "广汽丰田", luntai: "正常", shache: "故障", yugua: "故障", dfbl: "正常" }, { value: [85, 5], name: "G253668", paizi: "广汽丰田", luntai: "故障", shache: "正常", yugua: "正常", dfbl: "正常" }, { value: [95, 5], name: "G251235", paizi: "广汽丰田", luntai: "故障", shache: "故障", yugua: "故障", dfbl: "正常" }, { value: [5, 13], name: "G253312", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "正常", dfbl: "正常" }, { value: [15, 13], name: "G253641", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "正常", dfbl: "故障" }, { value: [25, 13], name: "G253625", paizi: "广汽丰田", luntai: "故障", shache: "故障", yugua: "正常", dfbl: "故障" }, { value: [35, 13], name: "G253641", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [45, 13], name: "G253645", paizi: "广汽丰田", luntai: "故障", shache: "正常", yugua: "正常", dfbl: "故障" }, { value: [55, 13], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "正常", dfbl: "故障" }, { value: [65, 13], name: "G253645", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "正常", dfbl: "正常" }, { value: [75, 13], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 21], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 29], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 37], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 45], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 53], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 61], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 69], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 77], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 85], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }], symbol: "rect", type: "scatter", hoverAnimation: false, zlevel: 3, symbolSize: [123, 67], label: { normal: { show: true, formatter: function(param) { return param.data.name; }, position: "insideLeft", fontSize: 16, color: "#fff" } }, itemStyle: { normal: { opacity: 1, color: "#3E9A9D", barBorderRadius: "100" }, emphasis: { color: "#DC5F51", opacity: 0 } } }, { name: "车辆", data: [{ value: [5, 5], name: "G253678", paizi: "广汽丰田", luntai: "故障", shache: "故障", yugua: "正常", dfbl: "正常" }, { value: [15, 5], name: "G251248", paizi: "广汽丰田", luntai: "故障", shache: "正常", yugua: "故障", dfbl: "故障" }, { value: [25, 5], name: "G253624", paizi: "广汽丰田", luntai: "故障", shache: "正常", yugua: "正常", dfbl: "正常" }, { value: [35, 5], name: "G250212", paizi: "广汽丰田", luntai: "故障", shache: "正常", yugua: "正常", dfbl: "正常" }, { value: [45, 5], name: "G253313", paizi: "广汽丰田", luntai: "故障", shache: "故障", yugua: "正常", dfbl: "正常" }, { value: [55, 5], name: "G253625", paizi: "广汽丰田", luntai: "正常", shache: "故障", yugua: "正常", dfbl: "正常" }, { value: [65, 5], name: "G253520", paizi: "广汽丰田", luntai: "故障", shache: "正常", yugua: "正常", dfbl: "正常" }, { value: [75, 5], name: "G253775", paizi: "广汽丰田", luntai: "正常", shache: "故障", yugua: "故障", dfbl: "正常" }, { value: [85, 5], name: "G253668", paizi: "广汽丰田", luntai: "故障", shache: "正常", yugua: "正常", dfbl: "正常" }, { value: [95, 5], name: "G251235", paizi: "广汽丰田", luntai: "故障", shache: "故障", yugua: "故障", dfbl: "正常" }, { value: [5, 13], name: "G253312", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "正常", dfbl: "正常" }, { value: [15, 13], name: "G253641", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "正常", dfbl: "故障" }, { value: [25, 13], name: "G253625", paizi: "广汽丰田", luntai: "故障", shache: "故障", yugua: "正常", dfbl: "故障" }, { value: [35, 13], name: "G253641", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [45, 13], name: "G253645", paizi: "广汽丰田", luntai: "故障", shache: "正常", yugua: "正常", dfbl: "故障" }, { value: [55, 13], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "正常", dfbl: "故障" }, { value: [65, 13], name: "G253645", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "正常", dfbl: "正常" }, { value: [75, 13], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 21], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 29], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 37], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 45], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 53], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 61], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 69], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 77], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }, { value: [5, 85], name: "G253612", paizi: "广汽丰田", luntai: "正常", shache: "正常", yugua: "故障", dfbl: "正常" }], hoverAnimation: false, symbol: "rect", type: "scatter", zlevel: 2, symbolSize: [123, 67], label: { normal: { show: true, formatter: function(param) { return param.data.name; }, position: "insideLeft", fontSize: 16, color: "#fff" } }, itemStyle: { normal: { opacity: 1, color: "#DC5F51" } } }] }

Echarts在线免费图表