十字图echarts slider配置项内容和展示
配置项如下
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 + "</br>" +
"第一列：" + item.value[0] + "</br>" +
"第二列：" + item.value[1] + "</br>" +
"第三列：" + item.value[2] + "</br>" +
"第四列：" + item.value[3] + "</br>" +
"第五列：" + item.value[4] + "</br>" +
"第六列：" + item.value[5] + "</br>" +
"第七列：" + item.value[6] + "</br>";
}
},
// 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 '<a style="padding-bottom:100px;">'+ obj.data.value[0]+'</a>';
}
}
},
{
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;
}
截图如下
