markLine,tooltipecharts 柱状配置项内容和展示
配置项如下
var data = {
"historymax": {
"times": [
"2012072119",
"2012072120",
"2012072122",
"2012072122",
"2012072202"
],
"value": [
83.9,
205.3,
246.9,
350.8,
371.3
]
},
"evevtmax": [{
"times": [
"2016072010",
"2016072015",
"2016072015",
"2016072018",
"2016072022"
],
"value": [
19.6,
54,
97.6,
154.1,
199.7
]
},
{
"times": [
"2012072119",
"2012072120",
"2012072122",
"2012072122",
"2012072202"
],
"value": [
83.9,
205.3,
246.9,
350.8,
371.3
]
}
],
"xaxis": [
1,
5,
10,
15,
20,
25,
30,
40,
50,
60,
70,
80,
100,
120,
140,
170,
200,
250,
400
],
"odds1": [
46.3,
13.7,
5.8,
3.1,
2.2,
1.6,
1.2,
0.8,
0.4,
0.3,
0.1,
0.1,
0,
0,
0,
0,
0,
0,
0
],
"odds3": [
63.8,
30.1,
16,
9.7,
6.8,
4.7,
3.8,
2.3,
1.3,
0.9,
0.8,
0.8,
0.4,
0.3,
0.2,
0.1,
0.1,
0,
0
],
"odds6": [
71.2,
41.3,
26.3,
16.7,
12.5,
8.9,
6.7,
4.3,
3,
2.2,
1.8,
1.6,
1.1,
0.6,
0.4,
0.4,
0.3,
0,
0
],
"odds12": [
76.9,
51,
36.3,
26.2,
21,
15.6,
11.2,
7.5,
5.2,
3.6,
3,
2.7,
2.3,
1.4,
0.9,
0.7,
0.6,
0.6,
0
],
"odds24": [
82.4,
59.5,
45.4,
34.8,
29.6,
24.6,
19.7,
13.6,
9.5,
6.5,
5,
4,
3.1,
2.2,
1.8,
1.5,
0.8,
0.8,
0
]
};
var that = this;
var odds; //y轴数据
var xData = data.xaxis; //x轴数据
var renderX = []; // x轴的数据初始化
for (var ti = 0; ti < xData.length; ti++) {
var maxIndex = xData.length - 1;
if (ti === 0) {
var min = '>' + xData[ti];
renderX.push(min);
} else if (ti === maxIndex) {
var max = '>' + xData[maxIndex];
renderX.push(max);
} else {
renderX.push(String(xData[ti]));
}
}
var maxValue_arr = data.historymax.value || [];
var m;
if (that.tqjlStatus === 1) {
odds = data.odds1;
m = maxValue_arr[0];
} else if (that.tqjlStatus === 3) {
odds = data.odds3;
m = maxValue_arr[1];
} else if (that.tqjlStatus === 6) {
odds = data.odds6;
m = maxValue_arr[2];
} else if (that.tqjlStatus === 12) {
odds = data.odds12;
m = maxValue_arr[3];
} else {
odds = data.odds24;
m = maxValue_arr[4];
}
var myValue; //历史最大过滤出来
for (var i = 0; i < xData.length; i++) {
var myLength = xData.length;
if (m < xData[i]) {
myValue = xData[i] - m <= m - xData[i - 1] ? xData[i] : xData[i - 1];
myValue = myValue.toString();
if (myValue === xData[myLength - 1].toString()) {
myValue = '>' + myValue;
}
if (myValue === xData[0].toString()) {
myValue = '>' + myValue;
}
break;
}
}
var evevtmax_arr = data.evevtmax || [];
var markLineData = [];
var mcValue; //事件的最大过滤出来
for (var j = 0; j < evevtmax_arr.length; j++) {
var mc_arr = evevtmax_arr[j].value;
var mc;
if (that.tqjlStatus === 1) {
mc = mc_arr[0];
} else if (that.tqjlStatus === 3) {
odds = data.odds3;
mc = mc_arr[1];
} else if (that.tqjlStatus === 6) {
odds = data.odds6;
mc = mc_arr[2];
} else if (that.tqjlStatus === 12) {
odds = data.odds12;
mc = mc_arr[3];
} else {
odds = data.odds24;
mc = mc_arr[4];
}
for (var k = 0; k < xData.length; k++) {
var mcLength = xData.length;
if (mc < xData[k]) {
mcValue = xData[k] - mc <= mc - xData[k - 1] ? xData[k] : xData[k - 1];
mcValue = mcValue.toString();
if (mcValue === xData[mcLength - 1].toString()) {
mcValue = '>' + mcValue;
}
if (mcValue === xData[0].toString()) {
mcValue = '>' + mcValue;
}
break;
}
}
var arr = [{
name: mc + 'mm',
xAxis: mcValue,
yAxis: '0'
},
{
xAxis: mcValue,
yAxis: '100'
}
];
markLineData.push(arr);
}
var option = {
color: ['#34bbff'],
tooltip: {
show: true,
trigger: 'item',
formatter: function() {
return '11111111111111'
},
axisPointer: {
type: 'shadow'
},
},
grid: {
left: '20',
right: '18',
bottom: '35',
top: "20",
containLabel: true
},
xAxis: [{
name: '降水量/mm',
type: 'category',
nameLocation: "middle",
nameGap: 25,
data: renderX
}],
yAxis: [{
name: '累积频率(%)',
nameGap: 35,
nameLocation: 'middle',
nameRotate: 90,
type: 'value',
min: 0,
max: 100
}],
series: [{
name: "所占比例",
type: 'bar',
barWidth: '15',
data: odds,
// markLine: {
// silent: false,
// // toolTip: {
// // show: true,
// // formatter: 'xxxxxx'
// // },
// // label: {
// // show: true,
// // position: 'middle',
// // formatter: function () {
// // alert('shemegui');
// // return 'hahah'
// // }
// // },
// symbolSize: 0,
// "itemStyle": {
// type: "line",
// "normal": {
// lineStyle: {
// "color": "#0000ff",
// "width": 2,
// "type": "dashed"
// }
// }
// },
// data: markLineData
// }
},
{
type: 'line',
"itemStyle": {
type: "line",
"normal": {
lineStyle: {
"color": "#217dc3",
"width": 1,
"type": "solid"
}
}
},
data: odds,
markLine: { //历史最大
silent: false,
tooltip: {
formatter: function() {
return '123456'
}
},
symbolSize: 0,
"itemStyle": {
type: "line",
"normal": {
lineStyle: {
"color": "#ff0000",
"width": 1,
"type": "dashed"
}
}
},
data: [
[{
name: m + 'mm',
coord: ['20', '0']
},
{
coord: ['20', '100']
}
]
]
}
}
]
};
截图如下
