为什么没有绘制可视化地图？
Why isn't visual map drawn?
我在画图表，这部分没问题。但是没有显示可视化地图。我的视觉地图定义有什么问题？
const data = {
"data": [
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[5, 0],
[6, 0],
[7, 0],
[8, 0],
[9, 0],
[10, 0],
[11, 0],
[12, 0],
[13, 0],
[14, 0],
[15, 0],
[16, 0],
[17, 0],
[18, 0],
[19, 0],
[20, 0],
[21, 0],
[22, 0],
[23, 0],
[24, 0],
[25, 3],
[26, 1250],
[27, 1258],
[28, 1260],
[29, 1264],
[30, 1284],
[31, 1284],
[32, 1300],
[33, 1303],
[34, 1303],
[35, 1303],
[36, 1305],
[37, 1312],
[38, 1313],
[39, 1316],
[40, 1320],
[41, 1386],
[42, 8000],
[43, 8001],
[44, 8002],
[45, 8003],
[46, 8004],
[47, 8005],
[48, 8006],
[49, 8007],
[50, 8008],
[51, 8009],
[52, 8010],
[53, 8011],
[54, 8011],
[55, 8013],
[56, 8014],
[57, 8000],
[58, 8015],
[59, 8017],
[60, 8018],
[61, 8019],
[62, 8013],
[63, 8021],
[64, 8021],
[65, 8022],
[66, 8023],
[67, 8023],
[68, 8016],
[69, 8024],
[70, 8023],
[71, 8024],
[72, 8024],
[73, 8023],
[74, 8026],
[75, 8026],
[76, 8006],
[77, 8005],
[78, 7993],
[79, 7988],
[80, 8000],
[81, 8001],
[82, 7994],
[83, 8000],
[84, 8001],
[85, 8002],
[86, 8003],
[87, 8004],
[88, 8005],
[89, 8005],
[90, 8004],
[91, 8006],
[92, 8006],
[93, 8006],
[94, 8007],
[95, 8008],
[96, 8008],
[97, 8008],
[98, 8008],
[99, 8008],
[100, 8009],
[101, 8006],
[102, 8009],
[103, 8009],
[104, 8006],
[105, 8007],
[106, 8008],
[107, 8008],
[108, 8007],
[109, 8010],
[110, 8010],
[111, 7999],
[112, 8011],
[113, 8012],
[114, 8013],
[115, 8012],
[116, 8012],
[117, 8011],
[118, 8011],
[119, 8010],
[120, 8009],
[121, 8008],
[122, 8010],
[123, 8004],
[124, 8002],
[125, 8001],
[126, 8000],
[127, 7999],
[128, 7997],
[129, 7994],
[130, 7995],
[131, 7994],
[132, 7993],
[133, 7992],
[134, 7988],
[135, 7985],
[136, 7997],
[137, 7997],
[138, 7995],
[139, 7997],
[140, 7998],
[141, 7998],
[142, 7998],
[143, 7995],
[144, 7999],
[145, 7995],
[146, 7986],
[147, 7999],
[148, 8000],
[149, 8000],
[150, 7994],
[151, 7999],
[152, 7996],
[153, 7991],
[154, 7997],
[155, 7995],
[156, 7997],
[157, 7996],
[158, 7999],
[159, 7999],
[160, 7998],
[161, 7998],
[162, 8000],
[163, 8001],
[164, 8000],
[165, 7997],
[166, 7997],
[167, 7999],
[168, 7992],
[169, 8000],
[170, 8000],
[171, 8000],
[172, 8001],
[173, 8002],
[174, 8000],
[175, 7999],
[176, 8002],
[177, 8001],
[178, 8000],
[179, 7998],
[180, 7996],
[181, 7998],
[182, 7996],
[183, 7991],
[184, 7995],
[185, 7994],
[186, 7991],
[187, 7981],
[188, 7981],
[189, 7982],
[190, 7955],
[191, 7982],
[192, 7988],
[193, 7984],
[194, 7985],
[195, 7986],
[196, 7983],
[197, 7983],
[198, 7982],
[199, 7975],
[200, 7953],
[201, 7979],
[202, 7966],
[203, 7965],
[204, 7955],
[205, 7945],
[206, 7954],
[207, 7950],
[208, 7910],
[209, 7902],
[210, 7866],
[211, 7433],
[212, 7859],
[213, 7859],
[214, 7844],
[215, 7841],
[216, 7838],
[217, 7839],
[218, 7840],
[219, 7835],
[220, 7830],
[221, 7829],
[222, 7821],
[223, 7819],
[224, 7817],
[225, 7794],
[226, 7793],
[227, 7789],
[228, 7772],
[229, 7759],
[230, 7756],
[231, 1131],
[232, 1129],
[233, 1129],
[234, 1129],
[235, 1078],
[236, 1077],
[237, 1076],
[238, 1075],
[239, 1078],
[240, 1077],
[241, 1075],
[242, 1076],
[243, 1077],
[244, 1082],
[245, 1079],
[246, 1079],
[247, 1080],
[248, 1078],
[249, 1078],
[250, 1077],
[251, 1080],
[252, 4391],
[253, 4391],
[254, 4393],
[255, 4394],
[256, 4398],
[257, 4391],
[258, 4420],
[259, 4418],
[260, 4452],
[261, 4529],
[262, 4541],
[263, 4558],
[264, 4581],
[265, 4591],
[266, 4598],
[267, 4601],
[268, 4608],
[269, 4630],
[270, 4637],
[271, 4638],
[272, 4638],
[273, 4635],
[274, 4635],
[275, 4640],
[276, 4639],
[277, 4641],
[278, 4642],
[279, 4642],
[280, 4632],
[281, 4633],
[282, 4628],
[283, 4630],
[284, 4621],
[285, 4623],
[286, 4621],
[287, 4627],
[288, 4616],
[289, 4616],
[290, 3602],
[291, 3608],
[292, 3609],
[293, 3612],
[294, 3613],
[295, 3612],
[296, 3562],
[297, 3631],
[298, 3629],
[299, 3615],
[300, 3622],
[301, 3626],
[302, 3627],
[303, 3627],
[304, 3628],
[305, 3627],
[306, 3628],
[307, 3632],
[308, 3632],
[309, 3632],
[310, 3632],
[311, 3633],
[312, 3635],
[313, 8000],
[314, 8000],
[315, 8000],
[316, 7981],
[317, 8002],
[318, 7996],
[319, 7999],
[320, 7996],
[321, 8000],
[322, 8001],
[323, 8001],
[324, 7761],
[325, 8002],
[326, 8004],
[327, 7997],
[328, 7999],
[329, 7998],
[330, 7996],
[331, 7993],
[332, 7997],
[333, 7998],
[334, 7999],
[335, 7999],
[336, 8000],
[337, 8000],
[338, 8001],
[339, 8000],
[340, 8001],
[341, 8000],
[342, 8001],
[343, 8001],
[344, 8002],
[345, 8002],
[346, 8003],
[347, 8004],
[348, 8005],
[349, 8006],
[350, 8003],
[351, 7999],
[352, 7995],
[353, 7988],
[354, 7975],
[355, 7973],
[356, 7955],
[357, 7978],
[358, 7966],
[359, 7972],
[360, 7986],
[361, 7990],
[362, 7988],
[363, 7986],
[364, 7981],
[365, 7984],
[366, 7982],
[367, 7979],
[368, 7977],
[369, 7971],
[370, 7971],
[371, 7970],
[372, 7967],
[373, 7968],
[374, 7958],
[375, 7957],
[376, 7947],
[377, 7956],
[378, 7955],
[379, 7957],
[380, 7957],
[381, 7958],
[382, 7959],
[383, 7960],
[384, 7964],
[385, 7966],
[386, 7966],
[387, 7964],
[388, 7969],
[389, 7978],
[390, 7978],
[391, 7973],
[392, 7802],
[393, 7970],
[394, 7971],
[395, 7966],
[396, 7956],
[397, 7956],
[398, 7959],
[399, 7956],
[400, 7954],
[401, 7955],
[402, 7950],
[403, 7944],
[404, 7934],
[405, 7938],
[406, 7935],
[407, 7932],
[408, 7937],
[409, 7939],
[410, 7941],
[411, 7941],
[412, 7939],
[413, 7936],
[414, 7931],
[415, 7929],
[416, 7929],
[417, 7926],
[418, 7927],
[419, 7923],
[420, 7916],
[421, 7914],
[422, 7916],
[423, 7917],
[424, 7918],
[425, 7912],
[426, 7909],
[427, 7904],
[428, 7883],
[429, 7869],
[430, 7857],
[431, 7850],
[432, 7843],
[433, 7843],
[434, 7833],
[435, 7177],
[436, 7783],
[437, 7784],
[438, 7766],
[439, 7743],
[440, 7741],
[441, 7751],
[442, 7756],
[443, 7756],
[444, 7501],
[445, 7765],
[446, 7766],
[447, 7755],
[448, 7758],
[449, 7762],
[450, 7769],
[451, 7769],
[452, 7775],
[453, 7779],
[454, 7784],
[455, 7787],
[456, 7791],
[457, 7793],
[458, 7794],
[459, 7794],
[460, 7798],
[461, 7801],
[462, 7804],
[463, 7792],
[464, 7758],
[465, 7796],
[466, 7789],
[467, 7802],
[468, 7808],
[469, 7810],
[470, 7814],
[471, 7814],
[472, 7811],
[473, 7809],
[474, 7813],
[475, 7805],
[476, 7807],
[477, 7807],
[478, 7803],
[479, 7707],
[480, 7754],
[481, 7738],
[482, 7740],
[483, 7741],
[484, 7733],
[485, 7738],
[486, 7738],
[487, 7736],
[488, 7736],
[489, 4537],
[490, 4543],
[491, 4548],
[492, 4548],
[493, 4548],
[494, 4549],
[495, 4547],
[496, 4548],
[497, 4550],
[498, 4550],
[499, 4549],
[500, 4756]
],
"min_val": 0,
"max_val": 8041
};
const div = document.createElement('div');
div.id = 'plot';
div.style.width = '500px';
div.style.height = '200px';
document.body.appendChild(div);
const plot = echarts.init(div);
const option = {
xAxis: {
scale: true,
name: "G",
nameLocation: "middle",
nameGap: 30,
nameTextStyle: {
fontSize: 16
},
splitLine: false
},
yAxis: {
scale: true,
name: "D",
nameTextStyle: {
fontSize: 16
},
splitLine: false
},
visualMap: {
min: data.min_val,
max: data.max_val,
dimension: 1,
orient: "vertical",
right: "10%",
top: "center",
itemWidth: "10px",
itemHeight: "80px",
text: ["H", "L"],
calculable: false,
realtime: false,
hoverLink: false,
inRange: {
color: ["#f2c31a", "#24b7f2"]
},
textStyle: {
fontSize: 16
}
},
series: [{
symbolSize: 1,
data: data.data,
type: "line",
large: true,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: "#24b7f2"
},
{
offset: 1,
color: "#f2c31a"
}
]
}
}
}]
};
option.series[0].lineStyle = Object.assign({}, option.series[0].areaStyle);
option.series[0].lineStyle.opacity = 0.05;
option.series[0].itemStyle = Object.assign({}, option.series[0].areaStyle);
option.series[0].itemStyle.opacity = 0.05;
plot.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts-en.common.js"></script>
您使用了不带 VisualMap 组件的通用 Echarts 库，请参阅 build set :) 将路径 echarts-en.common.js 替换为 echarts-en.js，VisualMap 将起作用。如果要显示句柄，则需要将组件 calculable 设置为 true。
const data = {
"data": [
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[5, 0],
[6, 0],
[7, 0],
[8, 0],
[9, 0],
[10, 0],
[11, 0],
[12, 0],
[13, 0],
[14, 0],
[15, 0],
[16, 0],
[17, 0],
[18, 0],
[19, 0],
[20, 0],
[21, 0],
[22, 0],
[23, 0],
[24, 0],
[25, 3],
[26, 1250],
[27, 1258],
[28, 1260],
[29, 1264],
[30, 1284],
[31, 1284],
[32, 1300],
[33, 1303],
[34, 1303],
[35, 1303],
[36, 1305],
[37, 1312],
[38, 1313],
[39, 1316],
[40, 1320],
[41, 1386],
[42, 8000],
[43, 8001],
[44, 8002],
[45, 8003],
[46, 8004],
[47, 8005],
[48, 8006],
[49, 8007],
[50, 8008],
[51, 8009],
[52, 8010],
[53, 8011],
[54, 8011],
[55, 8013],
[56, 8014],
[57, 8000],
[58, 8015],
[59, 8017],
[60, 8018],
[61, 8019],
[62, 8013],
[63, 8021],
[64, 8021],
[65, 8022],
[66, 8023],
[67, 8023],
[68, 8016],
[69, 8024],
[70, 8023],
[71, 8024],
[72, 8024],
[73, 8023],
[74, 8026],
[75, 8026],
[76, 8006],
[77, 8005],
[78, 7993],
[79, 7988],
[80, 8000],
[81, 8001],
[82, 7994],
[83, 8000],
[84, 8001],
[85, 8002],
[86, 8003],
[87, 8004],
[88, 8005],
[89, 8005],
[90, 8004],
[91, 8006],
[92, 8006],
[93, 8006],
[94, 8007],
[95, 8008],
[96, 8008],
[97, 8008],
[98, 8008],
[99, 8008],
[100, 8009],
[101, 8006],
[102, 8009],
[103, 8009],
[104, 8006],
[105, 8007],
[106, 8008],
[107, 8008],
[108, 8007],
[109, 8010],
[110, 8010],
[111, 7999],
[112, 8011],
[113, 8012],
[114, 8013],
[115, 8012],
[116, 8012],
[117, 8011],
[118, 8011],
[119, 8010],
[120, 8009],
[121, 8008],
[122, 8010],
[123, 8004],
[124, 8002],
[125, 8001],
[126, 8000],
[127, 7999],
[128, 7997],
[129, 7994],
[130, 7995],
[131, 7994],
[132, 7993],
[133, 7992],
[134, 7988],
[135, 7985],
[136, 7997],
[137, 7997],
[138, 7995],
[139, 7997],
[140, 7998],
[141, 7998],
[142, 7998],
[143, 7995],
[144, 7999],
[145, 7995],
[146, 7986],
[147, 7999],
[148, 8000],
[149, 8000],
[150, 7994],
[151, 7999],
[152, 7996],
[153, 7991],
[154, 7997],
[155, 7995],
[156, 7997],
[157, 7996],
[158, 7999],
[159, 7999],
[160, 7998],
[161, 7998],
[162, 8000],
[163, 8001],
[164, 8000],
[165, 7997],
[166, 7997],
[167, 7999],
[168, 7992],
[169, 8000],
[170, 8000],
[171, 8000],
[172, 8001],
[173, 8002],
[174, 8000],
[175, 7999],
[176, 8002],
[177, 8001],
[178, 8000],
[179, 7998],
[180, 7996],
[181, 7998],
[182, 7996],
[183, 7991],
[184, 7995],
[185, 7994],
[186, 7991],
[187, 7981],
[188, 7981],
[189, 7982],
[190, 7955],
[191, 7982],
[192, 7988],
[193, 7984],
[194, 7985],
[195, 7986],
[196, 7983],
[197, 7983],
[198, 7982],
[199, 7975],
[200, 7953],
[201, 7979],
[202, 7966],
[203, 7965],
[204, 7955],
[205, 7945],
[206, 7954],
[207, 7950],
[208, 7910],
[209, 7902],
[210, 7866],
[211, 7433],
[212, 7859],
[213, 7859],
[214, 7844],
[215, 7841],
[216, 7838],
[217, 7839],
[218, 7840],
[219, 7835],
[220, 7830],
[221, 7829],
[222, 7821],
[223, 7819],
[224, 7817],
[225, 7794],
[226, 7793],
[227, 7789],
[228, 7772],
[229, 7759],
[230, 7756],
[231, 1131],
[232, 1129],
[233, 1129],
[234, 1129],
[235, 1078],
[236, 1077],
[237, 1076],
[238, 1075],
[239, 1078],
[240, 1077],
[241, 1075],
[242, 1076],
[243, 1077],
[244, 1082],
[245, 1079],
[246, 1079],
[247, 1080],
[248, 1078],
[249, 1078],
[250, 1077],
[251, 1080],
[252, 4391],
[253, 4391],
[254, 4393],
[255, 4394],
[256, 4398],
[257, 4391],
[258, 4420],
[259, 4418],
[260, 4452],
[261, 4529],
[262, 4541],
[263, 4558],
[264, 4581],
[265, 4591],
[266, 4598],
[267, 4601],
[268, 4608],
[269, 4630],
[270, 4637],
[271, 4638],
[272, 4638],
[273, 4635],
[274, 4635],
[275, 4640],
[276, 4639],
[277, 4641],
[278, 4642],
[279, 4642],
[280, 4632],
[281, 4633],
[282, 4628],
[283, 4630],
[284, 4621],
[285, 4623],
[286, 4621],
[287, 4627],
[288, 4616],
[289, 4616],
[290, 3602],
[291, 3608],
[292, 3609],
[293, 3612],
[294, 3613],
[295, 3612],
[296, 3562],
[297, 3631],
[298, 3629],
[299, 3615],
[300, 3622],
[301, 3626],
[302, 3627],
[303, 3627],
[304, 3628],
[305, 3627],
[306, 3628],
[307, 3632],
[308, 3632],
[309, 3632],
[310, 3632],
[311, 3633],
[312, 3635],
[313, 8000],
[314, 8000],
[315, 8000],
[316, 7981],
[317, 8002],
[318, 7996],
[319, 7999],
[320, 7996],
[321, 8000],
[322, 8001],
[323, 8001],
[324, 7761],
[325, 8002],
[326, 8004],
[327, 7997],
[328, 7999],
[329, 7998],
[330, 7996],
[331, 7993],
[332, 7997],
[333, 7998],
[334, 7999],
[335, 7999],
[336, 8000],
[337, 8000],
[338, 8001],
[339, 8000],
[340, 8001],
[341, 8000],
[342, 8001],
[343, 8001],
[344, 8002],
[345, 8002],
[346, 8003],
[347, 8004],
[348, 8005],
[349, 8006],
[350, 8003],
[351, 7999],
[352, 7995],
[353, 7988],
[354, 7975],
[355, 7973],
[356, 7955],
[357, 7978],
[358, 7966],
[359, 7972],
[360, 7986],
[361, 7990],
[362, 7988],
[363, 7986],
[364, 7981],
[365, 7984],
[366, 7982],
[367, 7979],
[368, 7977],
[369, 7971],
[370, 7971],
[371, 7970],
[372, 7967],
[373, 7968],
[374, 7958],
[375, 7957],
[376, 7947],
[377, 7956],
[378, 7955],
[379, 7957],
[380, 7957],
[381, 7958],
[382, 7959],
[383, 7960],
[384, 7964],
[385, 7966],
[386, 7966],
[387, 7964],
[388, 7969],
[389, 7978],
[390, 7978],
[391, 7973],
[392, 7802],
[393, 7970],
[394, 7971],
[395, 7966],
[396, 7956],
[397, 7956],
[398, 7959],
[399, 7956],
[400, 7954],
[401, 7955],
[402, 7950],
[403, 7944],
[404, 7934],
[405, 7938],
[406, 7935],
[407, 7932],
[408, 7937],
[409, 7939],
[410, 7941],
[411, 7941],
[412, 7939],
[413, 7936],
[414, 7931],
[415, 7929],
[416, 7929],
[417, 7926],
[418, 7927],
[419, 7923],
[420, 7916],
[421, 7914],
[422, 7916],
[423, 7917],
[424, 7918],
[425, 7912],
[426, 7909],
[427, 7904],
[428, 7883],
[429, 7869],
[430, 7857],
[431, 7850],
[432, 7843],
[433, 7843],
[434, 7833],
[435, 7177],
[436, 7783],
[437, 7784],
[438, 7766],
[439, 7743],
[440, 7741],
[441, 7751],
[442, 7756],
[443, 7756],
[444, 7501],
[445, 7765],
[446, 7766],
[447, 7755],
[448, 7758],
[449, 7762],
[450, 7769],
[451, 7769],
[452, 7775],
[453, 7779],
[454, 7784],
[455, 7787],
[456, 7791],
[457, 7793],
[458, 7794],
[459, 7794],
[460, 7798],
[461, 7801],
[462, 7804],
[463, 7792],
[464, 7758],
[465, 7796],
[466, 7789],
[467, 7802],
[468, 7808],
[469, 7810],
[470, 7814],
[471, 7814],
[472, 7811],
[473, 7809],
[474, 7813],
[475, 7805],
[476, 7807],
[477, 7807],
[478, 7803],
[479, 7707],
[480, 7754],
[481, 7738],
[482, 7740],
[483, 7741],
[484, 7733],
[485, 7738],
[486, 7738],
[487, 7736],
[488, 7736],
[489, 4537],
[490, 4543],
[491, 4548],
[492, 4548],
[493, 4548],
[494, 4549],
[495, 4547],
[496, 4548],
[497, 4550],
[498, 4550],
[499, 4549],
[500, 4756]
],
"min_val": 0,
"max_val": 8041
};
const div = document.createElement('div');
div.id = 'plot';
div.style.width = '500px';
div.style.height = '200px';
document.body.appendChild(div);
const plot = echarts.init(div);
const option = {
xAxis: {
scale: true,
name: "G",
nameLocation: "middle",
nameGap: 30,
nameTextStyle: {
fontSize: 16
},
splitLine: false
},
yAxis: {
scale: true,
name: "D",
nameTextStyle: {
fontSize: 16
},
splitLine: false
},
visualMap: {
min: data.min_val,
max: data.max_val,
dimension: 1,
orient: "vertical",
right: "10%",
top: "center",
itemWidth: "10px",
itemHeight: "80px",
text: ["H", "L"],
calculable: false,
realtime: false,
hoverLink: false,
inRange: {
color: ["#f2c31a", "#24b7f2"]
},
textStyle: {
fontSize: 16
}
},
series: [{
symbolSize: 1,
data: data.data,
type: "line",
large: true,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: "#24b7f2"
},
{
offset: 1,
color: "#f2c31a"
}
]
}
}
}]
};
option.series[0].lineStyle = Object.assign({}, option.series[0].areaStyle);
option.series[0].lineStyle.opacity = 0.05;
option.series[0].itemStyle = Object.assign({}, option.series[0].areaStyle);
option.series[0].itemStyle.opacity = 0.05;
plot.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts-en.js"></script>
我在画图表，这部分没问题。但是没有显示可视化地图。我的视觉地图定义有什么问题？
const data = {
"data": [
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[5, 0],
[6, 0],
[7, 0],
[8, 0],
[9, 0],
[10, 0],
[11, 0],
[12, 0],
[13, 0],
[14, 0],
[15, 0],
[16, 0],
[17, 0],
[18, 0],
[19, 0],
[20, 0],
[21, 0],
[22, 0],
[23, 0],
[24, 0],
[25, 3],
[26, 1250],
[27, 1258],
[28, 1260],
[29, 1264],
[30, 1284],
[31, 1284],
[32, 1300],
[33, 1303],
[34, 1303],
[35, 1303],
[36, 1305],
[37, 1312],
[38, 1313],
[39, 1316],
[40, 1320],
[41, 1386],
[42, 8000],
[43, 8001],
[44, 8002],
[45, 8003],
[46, 8004],
[47, 8005],
[48, 8006],
[49, 8007],
[50, 8008],
[51, 8009],
[52, 8010],
[53, 8011],
[54, 8011],
[55, 8013],
[56, 8014],
[57, 8000],
[58, 8015],
[59, 8017],
[60, 8018],
[61, 8019],
[62, 8013],
[63, 8021],
[64, 8021],
[65, 8022],
[66, 8023],
[67, 8023],
[68, 8016],
[69, 8024],
[70, 8023],
[71, 8024],
[72, 8024],
[73, 8023],
[74, 8026],
[75, 8026],
[76, 8006],
[77, 8005],
[78, 7993],
[79, 7988],
[80, 8000],
[81, 8001],
[82, 7994],
[83, 8000],
[84, 8001],
[85, 8002],
[86, 8003],
[87, 8004],
[88, 8005],
[89, 8005],
[90, 8004],
[91, 8006],
[92, 8006],
[93, 8006],
[94, 8007],
[95, 8008],
[96, 8008],
[97, 8008],
[98, 8008],
[99, 8008],
[100, 8009],
[101, 8006],
[102, 8009],
[103, 8009],
[104, 8006],
[105, 8007],
[106, 8008],
[107, 8008],
[108, 8007],
[109, 8010],
[110, 8010],
[111, 7999],
[112, 8011],
[113, 8012],
[114, 8013],
[115, 8012],
[116, 8012],
[117, 8011],
[118, 8011],
[119, 8010],
[120, 8009],
[121, 8008],
[122, 8010],
[123, 8004],
[124, 8002],
[125, 8001],
[126, 8000],
[127, 7999],
[128, 7997],
[129, 7994],
[130, 7995],
[131, 7994],
[132, 7993],
[133, 7992],
[134, 7988],
[135, 7985],
[136, 7997],
[137, 7997],
[138, 7995],
[139, 7997],
[140, 7998],
[141, 7998],
[142, 7998],
[143, 7995],
[144, 7999],
[145, 7995],
[146, 7986],
[147, 7999],
[148, 8000],
[149, 8000],
[150, 7994],
[151, 7999],
[152, 7996],
[153, 7991],
[154, 7997],
[155, 7995],
[156, 7997],
[157, 7996],
[158, 7999],
[159, 7999],
[160, 7998],
[161, 7998],
[162, 8000],
[163, 8001],
[164, 8000],
[165, 7997],
[166, 7997],
[167, 7999],
[168, 7992],
[169, 8000],
[170, 8000],
[171, 8000],
[172, 8001],
[173, 8002],
[174, 8000],
[175, 7999],
[176, 8002],
[177, 8001],
[178, 8000],
[179, 7998],
[180, 7996],
[181, 7998],
[182, 7996],
[183, 7991],
[184, 7995],
[185, 7994],
[186, 7991],
[187, 7981],
[188, 7981],
[189, 7982],
[190, 7955],
[191, 7982],
[192, 7988],
[193, 7984],
[194, 7985],
[195, 7986],
[196, 7983],
[197, 7983],
[198, 7982],
[199, 7975],
[200, 7953],
[201, 7979],
[202, 7966],
[203, 7965],
[204, 7955],
[205, 7945],
[206, 7954],
[207, 7950],
[208, 7910],
[209, 7902],
[210, 7866],
[211, 7433],
[212, 7859],
[213, 7859],
[214, 7844],
[215, 7841],
[216, 7838],
[217, 7839],
[218, 7840],
[219, 7835],
[220, 7830],
[221, 7829],
[222, 7821],
[223, 7819],
[224, 7817],
[225, 7794],
[226, 7793],
[227, 7789],
[228, 7772],
[229, 7759],
[230, 7756],
[231, 1131],
[232, 1129],
[233, 1129],
[234, 1129],
[235, 1078],
[236, 1077],
[237, 1076],
[238, 1075],
[239, 1078],
[240, 1077],
[241, 1075],
[242, 1076],
[243, 1077],
[244, 1082],
[245, 1079],
[246, 1079],
[247, 1080],
[248, 1078],
[249, 1078],
[250, 1077],
[251, 1080],
[252, 4391],
[253, 4391],
[254, 4393],
[255, 4394],
[256, 4398],
[257, 4391],
[258, 4420],
[259, 4418],
[260, 4452],
[261, 4529],
[262, 4541],
[263, 4558],
[264, 4581],
[265, 4591],
[266, 4598],
[267, 4601],
[268, 4608],
[269, 4630],
[270, 4637],
[271, 4638],
[272, 4638],
[273, 4635],
[274, 4635],
[275, 4640],
[276, 4639],
[277, 4641],
[278, 4642],
[279, 4642],
[280, 4632],
[281, 4633],
[282, 4628],
[283, 4630],
[284, 4621],
[285, 4623],
[286, 4621],
[287, 4627],
[288, 4616],
[289, 4616],
[290, 3602],
[291, 3608],
[292, 3609],
[293, 3612],
[294, 3613],
[295, 3612],
[296, 3562],
[297, 3631],
[298, 3629],
[299, 3615],
[300, 3622],
[301, 3626],
[302, 3627],
[303, 3627],
[304, 3628],
[305, 3627],
[306, 3628],
[307, 3632],
[308, 3632],
[309, 3632],
[310, 3632],
[311, 3633],
[312, 3635],
[313, 8000],
[314, 8000],
[315, 8000],
[316, 7981],
[317, 8002],
[318, 7996],
[319, 7999],
[320, 7996],
[321, 8000],
[322, 8001],
[323, 8001],
[324, 7761],
[325, 8002],
[326, 8004],
[327, 7997],
[328, 7999],
[329, 7998],
[330, 7996],
[331, 7993],
[332, 7997],
[333, 7998],
[334, 7999],
[335, 7999],
[336, 8000],
[337, 8000],
[338, 8001],
[339, 8000],
[340, 8001],
[341, 8000],
[342, 8001],
[343, 8001],
[344, 8002],
[345, 8002],
[346, 8003],
[347, 8004],
[348, 8005],
[349, 8006],
[350, 8003],
[351, 7999],
[352, 7995],
[353, 7988],
[354, 7975],
[355, 7973],
[356, 7955],
[357, 7978],
[358, 7966],
[359, 7972],
[360, 7986],
[361, 7990],
[362, 7988],
[363, 7986],
[364, 7981],
[365, 7984],
[366, 7982],
[367, 7979],
[368, 7977],
[369, 7971],
[370, 7971],
[371, 7970],
[372, 7967],
[373, 7968],
[374, 7958],
[375, 7957],
[376, 7947],
[377, 7956],
[378, 7955],
[379, 7957],
[380, 7957],
[381, 7958],
[382, 7959],
[383, 7960],
[384, 7964],
[385, 7966],
[386, 7966],
[387, 7964],
[388, 7969],
[389, 7978],
[390, 7978],
[391, 7973],
[392, 7802],
[393, 7970],
[394, 7971],
[395, 7966],
[396, 7956],
[397, 7956],
[398, 7959],
[399, 7956],
[400, 7954],
[401, 7955],
[402, 7950],
[403, 7944],
[404, 7934],
[405, 7938],
[406, 7935],
[407, 7932],
[408, 7937],
[409, 7939],
[410, 7941],
[411, 7941],
[412, 7939],
[413, 7936],
[414, 7931],
[415, 7929],
[416, 7929],
[417, 7926],
[418, 7927],
[419, 7923],
[420, 7916],
[421, 7914],
[422, 7916],
[423, 7917],
[424, 7918],
[425, 7912],
[426, 7909],
[427, 7904],
[428, 7883],
[429, 7869],
[430, 7857],
[431, 7850],
[432, 7843],
[433, 7843],
[434, 7833],
[435, 7177],
[436, 7783],
[437, 7784],
[438, 7766],
[439, 7743],
[440, 7741],
[441, 7751],
[442, 7756],
[443, 7756],
[444, 7501],
[445, 7765],
[446, 7766],
[447, 7755],
[448, 7758],
[449, 7762],
[450, 7769],
[451, 7769],
[452, 7775],
[453, 7779],
[454, 7784],
[455, 7787],
[456, 7791],
[457, 7793],
[458, 7794],
[459, 7794],
[460, 7798],
[461, 7801],
[462, 7804],
[463, 7792],
[464, 7758],
[465, 7796],
[466, 7789],
[467, 7802],
[468, 7808],
[469, 7810],
[470, 7814],
[471, 7814],
[472, 7811],
[473, 7809],
[474, 7813],
[475, 7805],
[476, 7807],
[477, 7807],
[478, 7803],
[479, 7707],
[480, 7754],
[481, 7738],
[482, 7740],
[483, 7741],
[484, 7733],
[485, 7738],
[486, 7738],
[487, 7736],
[488, 7736],
[489, 4537],
[490, 4543],
[491, 4548],
[492, 4548],
[493, 4548],
[494, 4549],
[495, 4547],
[496, 4548],
[497, 4550],
[498, 4550],
[499, 4549],
[500, 4756]
],
"min_val": 0,
"max_val": 8041
};
const div = document.createElement('div');
div.id = 'plot';
div.style.width = '500px';
div.style.height = '200px';
document.body.appendChild(div);
const plot = echarts.init(div);
const option = {
xAxis: {
scale: true,
name: "G",
nameLocation: "middle",
nameGap: 30,
nameTextStyle: {
fontSize: 16
},
splitLine: false
},
yAxis: {
scale: true,
name: "D",
nameTextStyle: {
fontSize: 16
},
splitLine: false
},
visualMap: {
min: data.min_val,
max: data.max_val,
dimension: 1,
orient: "vertical",
right: "10%",
top: "center",
itemWidth: "10px",
itemHeight: "80px",
text: ["H", "L"],
calculable: false,
realtime: false,
hoverLink: false,
inRange: {
color: ["#f2c31a", "#24b7f2"]
},
textStyle: {
fontSize: 16
}
},
series: [{
symbolSize: 1,
data: data.data,
type: "line",
large: true,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: "#24b7f2"
},
{
offset: 1,
color: "#f2c31a"
}
]
}
}
}]
};
option.series[0].lineStyle = Object.assign({}, option.series[0].areaStyle);
option.series[0].lineStyle.opacity = 0.05;
option.series[0].itemStyle = Object.assign({}, option.series[0].areaStyle);
option.series[0].itemStyle.opacity = 0.05;
plot.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts-en.common.js"></script>
您使用了不带 VisualMap 组件的通用 Echarts 库，请参阅 build set :) 将路径 echarts-en.common.js 替换为 echarts-en.js，VisualMap 将起作用。如果要显示句柄，则需要将组件 calculable 设置为 true。
const data = {
"data": [
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[5, 0],
[6, 0],
[7, 0],
[8, 0],
[9, 0],
[10, 0],
[11, 0],
[12, 0],
[13, 0],
[14, 0],
[15, 0],
[16, 0],
[17, 0],
[18, 0],
[19, 0],
[20, 0],
[21, 0],
[22, 0],
[23, 0],
[24, 0],
[25, 3],
[26, 1250],
[27, 1258],
[28, 1260],
[29, 1264],
[30, 1284],
[31, 1284],
[32, 1300],
[33, 1303],
[34, 1303],
[35, 1303],
[36, 1305],
[37, 1312],
[38, 1313],
[39, 1316],
[40, 1320],
[41, 1386],
[42, 8000],
[43, 8001],
[44, 8002],
[45, 8003],
[46, 8004],
[47, 8005],
[48, 8006],
[49, 8007],
[50, 8008],
[51, 8009],
[52, 8010],
[53, 8011],
[54, 8011],
[55, 8013],
[56, 8014],
[57, 8000],
[58, 8015],
[59, 8017],
[60, 8018],
[61, 8019],
[62, 8013],
[63, 8021],
[64, 8021],
[65, 8022],
[66, 8023],
[67, 8023],
[68, 8016],
[69, 8024],
[70, 8023],
[71, 8024],
[72, 8024],
[73, 8023],
[74, 8026],
[75, 8026],
[76, 8006],
[77, 8005],
[78, 7993],
[79, 7988],
[80, 8000],
[81, 8001],
[82, 7994],
[83, 8000],
[84, 8001],
[85, 8002],
[86, 8003],
[87, 8004],
[88, 8005],
[89, 8005],
[90, 8004],
[91, 8006],
[92, 8006],
[93, 8006],
[94, 8007],
[95, 8008],
[96, 8008],
[97, 8008],
[98, 8008],
[99, 8008],
[100, 8009],
[101, 8006],
[102, 8009],
[103, 8009],
[104, 8006],
[105, 8007],
[106, 8008],
[107, 8008],
[108, 8007],
[109, 8010],
[110, 8010],
[111, 7999],
[112, 8011],
[113, 8012],
[114, 8013],
[115, 8012],
[116, 8012],
[117, 8011],
[118, 8011],
[119, 8010],
[120, 8009],
[121, 8008],
[122, 8010],
[123, 8004],
[124, 8002],
[125, 8001],
[126, 8000],
[127, 7999],
[128, 7997],
[129, 7994],
[130, 7995],
[131, 7994],
[132, 7993],
[133, 7992],
[134, 7988],
[135, 7985],
[136, 7997],
[137, 7997],
[138, 7995],
[139, 7997],
[140, 7998],
[141, 7998],
[142, 7998],
[143, 7995],
[144, 7999],
[145, 7995],
[146, 7986],
[147, 7999],
[148, 8000],
[149, 8000],
[150, 7994],
[151, 7999],
[152, 7996],
[153, 7991],
[154, 7997],
[155, 7995],
[156, 7997],
[157, 7996],
[158, 7999],
[159, 7999],
[160, 7998],
[161, 7998],
[162, 8000],
[163, 8001],
[164, 8000],
[165, 7997],
[166, 7997],
[167, 7999],
[168, 7992],
[169, 8000],
[170, 8000],
[171, 8000],
[172, 8001],
[173, 8002],
[174, 8000],
[175, 7999],
[176, 8002],
[177, 8001],
[178, 8000],
[179, 7998],
[180, 7996],
[181, 7998],
[182, 7996],
[183, 7991],
[184, 7995],
[185, 7994],
[186, 7991],
[187, 7981],
[188, 7981],
[189, 7982],
[190, 7955],
[191, 7982],
[192, 7988],
[193, 7984],
[194, 7985],
[195, 7986],
[196, 7983],
[197, 7983],
[198, 7982],
[199, 7975],
[200, 7953],
[201, 7979],
[202, 7966],
[203, 7965],
[204, 7955],
[205, 7945],
[206, 7954],
[207, 7950],
[208, 7910],
[209, 7902],
[210, 7866],
[211, 7433],
[212, 7859],
[213, 7859],
[214, 7844],
[215, 7841],
[216, 7838],
[217, 7839],
[218, 7840],
[219, 7835],
[220, 7830],
[221, 7829],
[222, 7821],
[223, 7819],
[224, 7817],
[225, 7794],
[226, 7793],
[227, 7789],
[228, 7772],
[229, 7759],
[230, 7756],
[231, 1131],
[232, 1129],
[233, 1129],
[234, 1129],
[235, 1078],
[236, 1077],
[237, 1076],
[238, 1075],
[239, 1078],
[240, 1077],
[241, 1075],
[242, 1076],
[243, 1077],
[244, 1082],
[245, 1079],
[246, 1079],
[247, 1080],
[248, 1078],
[249, 1078],
[250, 1077],
[251, 1080],
[252, 4391],
[253, 4391],
[254, 4393],
[255, 4394],
[256, 4398],
[257, 4391],
[258, 4420],
[259, 4418],
[260, 4452],
[261, 4529],
[262, 4541],
[263, 4558],
[264, 4581],
[265, 4591],
[266, 4598],
[267, 4601],
[268, 4608],
[269, 4630],
[270, 4637],
[271, 4638],
[272, 4638],
[273, 4635],
[274, 4635],
[275, 4640],
[276, 4639],
[277, 4641],
[278, 4642],
[279, 4642],
[280, 4632],
[281, 4633],
[282, 4628],
[283, 4630],
[284, 4621],
[285, 4623],
[286, 4621],
[287, 4627],
[288, 4616],
[289, 4616],
[290, 3602],
[291, 3608],
[292, 3609],
[293, 3612],
[294, 3613],
[295, 3612],
[296, 3562],
[297, 3631],
[298, 3629],
[299, 3615],
[300, 3622],
[301, 3626],
[302, 3627],
[303, 3627],
[304, 3628],
[305, 3627],
[306, 3628],
[307, 3632],
[308, 3632],
[309, 3632],
[310, 3632],
[311, 3633],
[312, 3635],
[313, 8000],
[314, 8000],
[315, 8000],
[316, 7981],
[317, 8002],
[318, 7996],
[319, 7999],
[320, 7996],
[321, 8000],
[322, 8001],
[323, 8001],
[324, 7761],
[325, 8002],
[326, 8004],
[327, 7997],
[328, 7999],
[329, 7998],
[330, 7996],
[331, 7993],
[332, 7997],
[333, 7998],
[334, 7999],
[335, 7999],
[336, 8000],
[337, 8000],
[338, 8001],
[339, 8000],
[340, 8001],
[341, 8000],
[342, 8001],
[343, 8001],
[344, 8002],
[345, 8002],
[346, 8003],
[347, 8004],
[348, 8005],
[349, 8006],
[350, 8003],
[351, 7999],
[352, 7995],
[353, 7988],
[354, 7975],
[355, 7973],
[356, 7955],
[357, 7978],
[358, 7966],
[359, 7972],
[360, 7986],
[361, 7990],
[362, 7988],
[363, 7986],
[364, 7981],
[365, 7984],
[366, 7982],
[367, 7979],
[368, 7977],
[369, 7971],
[370, 7971],
[371, 7970],
[372, 7967],
[373, 7968],
[374, 7958],
[375, 7957],
[376, 7947],
[377, 7956],
[378, 7955],
[379, 7957],
[380, 7957],
[381, 7958],
[382, 7959],
[383, 7960],
[384, 7964],
[385, 7966],
[386, 7966],
[387, 7964],
[388, 7969],
[389, 7978],
[390, 7978],
[391, 7973],
[392, 7802],
[393, 7970],
[394, 7971],
[395, 7966],
[396, 7956],
[397, 7956],
[398, 7959],
[399, 7956],
[400, 7954],
[401, 7955],
[402, 7950],
[403, 7944],
[404, 7934],
[405, 7938],
[406, 7935],
[407, 7932],
[408, 7937],
[409, 7939],
[410, 7941],
[411, 7941],
[412, 7939],
[413, 7936],
[414, 7931],
[415, 7929],
[416, 7929],
[417, 7926],
[418, 7927],
[419, 7923],
[420, 7916],
[421, 7914],
[422, 7916],
[423, 7917],
[424, 7918],
[425, 7912],
[426, 7909],
[427, 7904],
[428, 7883],
[429, 7869],
[430, 7857],
[431, 7850],
[432, 7843],
[433, 7843],
[434, 7833],
[435, 7177],
[436, 7783],
[437, 7784],
[438, 7766],
[439, 7743],
[440, 7741],
[441, 7751],
[442, 7756],
[443, 7756],
[444, 7501],
[445, 7765],
[446, 7766],
[447, 7755],
[448, 7758],
[449, 7762],
[450, 7769],
[451, 7769],
[452, 7775],
[453, 7779],
[454, 7784],
[455, 7787],
[456, 7791],
[457, 7793],
[458, 7794],
[459, 7794],
[460, 7798],
[461, 7801],
[462, 7804],
[463, 7792],
[464, 7758],
[465, 7796],
[466, 7789],
[467, 7802],
[468, 7808],
[469, 7810],
[470, 7814],
[471, 7814],
[472, 7811],
[473, 7809],
[474, 7813],
[475, 7805],
[476, 7807],
[477, 7807],
[478, 7803],
[479, 7707],
[480, 7754],
[481, 7738],
[482, 7740],
[483, 7741],
[484, 7733],
[485, 7738],
[486, 7738],
[487, 7736],
[488, 7736],
[489, 4537],
[490, 4543],
[491, 4548],
[492, 4548],
[493, 4548],
[494, 4549],
[495, 4547],
[496, 4548],
[497, 4550],
[498, 4550],
[499, 4549],
[500, 4756]
],
"min_val": 0,
"max_val": 8041
};
const div = document.createElement('div');
div.id = 'plot';
div.style.width = '500px';
div.style.height = '200px';
document.body.appendChild(div);
const plot = echarts.init(div);
const option = {
xAxis: {
scale: true,
name: "G",
nameLocation: "middle",
nameGap: 30,
nameTextStyle: {
fontSize: 16
},
splitLine: false
},
yAxis: {
scale: true,
name: "D",
nameTextStyle: {
fontSize: 16
},
splitLine: false
},
visualMap: {
min: data.min_val,
max: data.max_val,
dimension: 1,
orient: "vertical",
right: "10%",
top: "center",
itemWidth: "10px",
itemHeight: "80px",
text: ["H", "L"],
calculable: false,
realtime: false,
hoverLink: false,
inRange: {
color: ["#f2c31a", "#24b7f2"]
},
textStyle: {
fontSize: 16
}
},
series: [{
symbolSize: 1,
data: data.data,
type: "line",
large: true,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: "#24b7f2"
},
{
offset: 1,
color: "#f2c31a"
}
]
}
}
}]
};
option.series[0].lineStyle = Object.assign({}, option.series[0].areaStyle);
option.series[0].lineStyle.opacity = 0.05;
option.series[0].itemStyle = Object.assign({}, option.series[0].areaStyle);
option.series[0].itemStyle.opacity = 0.05;
plot.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts-en.js"></script>