758 lines
30 KiB
HTML
Generated
758 lines
30 KiB
HTML
Generated
|
|
<!--
|
|
Licensed to the Apache Software Foundation (ASF) under one
|
|
or more contributor license agreements. See the NOTICE file
|
|
distributed with this work for additional information
|
|
regarding copyright ownership. The ASF licenses this file
|
|
to you under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance
|
|
with the License. You may obtain a copy of the License at
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
Unless required by applicable law or agreed to in writing,
|
|
software distributed under the License is distributed on an
|
|
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
|
KIND, either express or implied. See the License for the
|
|
specific language governing permissions and limitations
|
|
under the License.
|
|
-->
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="lib/simpleRequire.js"></script>
|
|
<script src="lib/config.js"></script>
|
|
<script src="lib/jquery.min.js"></script>
|
|
<script src="lib/facePrint.js"></script>
|
|
<script src="lib/testHelper.js"></script>
|
|
<link rel="stylesheet" href="lib/reset.css" />
|
|
<meta name="viewport" content="user-scalable=no,width=device-width,height=device-height">
|
|
</head>
|
|
<body>
|
|
<style>
|
|
.test-title {
|
|
background: #146402;
|
|
color: #fff;
|
|
}
|
|
</style>
|
|
|
|
<div id="main0"></div>
|
|
<div id="main1"></div>
|
|
<div id="main2"></div>
|
|
<div id="stack-default"></div>
|
|
<div id="stack-all"></div>
|
|
<div id="stack-positive"></div>
|
|
<div id="stack-negative"></div>
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'
|
|
], function (echarts) {
|
|
|
|
var chart = echarts.init(document.getElementById('main0'));
|
|
|
|
var xAxisData = [];
|
|
var data1 = [];
|
|
var data2 = [];
|
|
var data3 = [];
|
|
var data4 = [];
|
|
var data5 = [];
|
|
var data6 = [];
|
|
|
|
xAxisData.push('类目' + -1);
|
|
data1.push('-');
|
|
data2.push('-');
|
|
data3.push('-');
|
|
data4.push('-');
|
|
data5.push('-');
|
|
data6.push('-');
|
|
|
|
for (var i = 0; i < 5; i++) {
|
|
xAxisData.push('类目' + i);
|
|
data1.push((-Math.random() - 0.2).toFixed(3));
|
|
data2.push((Math.random() + 0.3).toFixed(3));
|
|
data3.push((Math.random() + 0.2).toFixed(3));
|
|
data4.push((-Math.random() - 0.2).toFixed(3));
|
|
data5.push((-Math.random() - 0.2).toFixed(3));
|
|
data6.push((Math.random() + 0.2).toFixed(3));
|
|
}
|
|
|
|
xAxisData.push('类目' + i);
|
|
data1.push('-');
|
|
data2.push('-');
|
|
data3.push('-');
|
|
data4.push('-');
|
|
data5.push('-');
|
|
data6.push('-');
|
|
|
|
for (; i < 10; i++) {
|
|
xAxisData.push('类目' + i);
|
|
data1.push((-Math.random() - 0.2).toFixed(3));
|
|
data2.push((Math.random() + 0.3).toFixed(3));
|
|
data3.push((Math.random() + 0.2).toFixed(3));
|
|
data4.push((-Math.random() - 0.2).toFixed(3));
|
|
data5.push((-Math.random() - 0.2).toFixed(3));
|
|
data6.push((Math.random() + 0.2).toFixed(3));
|
|
}
|
|
xAxisData.push('类目' + i);
|
|
data1.push('-');
|
|
data2.push('-');
|
|
data3.push('-');
|
|
data4.push('-');
|
|
data5.push('-');
|
|
data6.push('-');
|
|
|
|
var itemStyle = {
|
|
normal: {
|
|
// borderColor: 'white',
|
|
// borderWidth: 3,
|
|
// shadowBlur: 10,
|
|
// shadowOffsetX: 0,
|
|
// shadowOffsetY: 5,
|
|
// shadowColor: 'rgba(0, 0, 0, 0.4)',
|
|
lineStyle: {
|
|
width: 2
|
|
// shadowBlur: 10,
|
|
// shadowOffsetX: 0,
|
|
// shadowOffsetY: 5,
|
|
// shadowColor: 'rgba(0, 0, 0, 0.4)'
|
|
},
|
|
areaStyle: {
|
|
}
|
|
}
|
|
};
|
|
|
|
var option = {
|
|
legend: {
|
|
},
|
|
toolbox: {
|
|
feature: {
|
|
magicType: {
|
|
type: ['line', 'bar', 'stack', 'tiled']
|
|
}
|
|
}
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
position: function (point) {
|
|
return [point[0], '10%'];
|
|
},
|
|
axisPointer: {
|
|
type: 'line'
|
|
}
|
|
},
|
|
xAxis: {
|
|
// data: ['类目1', '类目2', '类目3', '类目4', '类目5',]
|
|
data: xAxisData,
|
|
boundaryGap: false,
|
|
// inverse: true,
|
|
splitArea: {
|
|
show: true
|
|
}
|
|
},
|
|
yAxis: {
|
|
splitLine: {
|
|
// show: false
|
|
}
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside'
|
|
}, {
|
|
type: 'slider'
|
|
}],
|
|
series: [{
|
|
name: 'line',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbolSize: 10,
|
|
data: data1,
|
|
itemStyle: itemStyle,
|
|
smooth: true,
|
|
connectNulls: true
|
|
}, {
|
|
name: 'line2',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbolSize: 10,
|
|
data: data2,
|
|
itemStyle: itemStyle,
|
|
connectNulls: true,
|
|
smooth: true
|
|
}, {
|
|
name: '+connectNulls:true',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbolSize: 10,
|
|
data: data3,
|
|
itemStyle: itemStyle,
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
}
|
|
},
|
|
connectNulls: true,
|
|
smooth: true
|
|
}, {
|
|
name: '-connectNulls:false',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbolSize: 10,
|
|
data: data4,
|
|
itemStyle: itemStyle,
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
}
|
|
},
|
|
connectNulls: false,
|
|
smooth: true
|
|
}, {
|
|
name: '-connectNulls:true',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbolSize: 10,
|
|
data: data5,
|
|
itemStyle: itemStyle,
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
}
|
|
},
|
|
connectNulls: true,
|
|
smooth: true
|
|
}, {
|
|
name: '+connectNulls:false',
|
|
type: 'line',
|
|
stack: 'all',
|
|
symbolSize: 10,
|
|
data: data6,
|
|
itemStyle: itemStyle,
|
|
label: {
|
|
normal: {
|
|
show: true
|
|
}
|
|
},
|
|
connectNulls: false,
|
|
smooth: true
|
|
}]
|
|
};
|
|
|
|
testHelper.create(echarts, 'main0', {
|
|
title: 'line break',
|
|
option: option,
|
|
height: 600
|
|
});
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
require([
|
|
'echarts'/*, 'map/js/china' */
|
|
], function (echarts) {
|
|
|
|
var xAxisData = ["2018-04-11 13:30:00","2018-04-11 13:45:00","2018-04-11 14:00:00","2018-04-11 14:30:00","2018-04-11 14:45:00","2018-04-11 15:00:00","2018-04-11 15:15:00","2018-04-11 15:30:00","2018-04-11 15:45:00","2018-04-12 09:30:00","2018-04-12 09:45:00","2018-04-12 10:00:00","2018-04-12 10:15:00","2018-04-12 10:30:00","2018-04-12 10:45:00","2018-04-12 11:00:00","2018-04-12 11:15:00","2018-04-12 11:30:00","2018-04-12 11:45:00","2018-04-12 12:00:00","2018-04-12 12:15:00","2018-04-12 12:30:00","2018-04-12 12:45:00","2018-04-12 13:00:00","2018-04-12 13:15:00","2018-04-12 13:30:00","2018-04-12 13:45:00","2018-04-12 14:00:00","2018-04-12 14:15:00","2018-04-12 14:30:00","2018-04-12 14:45:00","2018-04-12 15:00:00","2018-04-12 15:15:00","2018-04-12 15:30:00","2018-04-12 15:45:00","2018-04-13 09:30:00","2018-04-13 09:45:00","2018-04-13 10:00:00","2018-04-13 10:15:00","2018-04-13 10:30:00","2018-04-13 10:45:00","2018-04-13 11:00:00","2018-04-13 11:15:00","2018-04-13 11:45:00","2018-04-13 12:00:00","2018-04-13 12:15:00","2018-04-13 12:45:00","2018-04-13 13:00:00","2018-04-13 13:30:00","2018-04-13 13:45:00","2018-04-13 14:00:00","2018-04-13 14:30:00","2018-04-13 14:45:00","2018-04-13 15:00:00","2018-04-13 15:15:00","2018-04-13 15:30:00","2018-04-13 15:45:00","2018-04-16 09:30:00","2018-04-16 09:45:00","2018-04-16 10:00:00","2018-04-16 10:15:00","2018-04-16 10:30:00","2018-04-16 10:45:00","2018-04-16 11:00:00","2018-04-16 11:15:00","2018-04-16 11:45:00","2018-04-16 12:00:00","2018-04-16 12:15:00","2018-04-16 12:30:00","2018-04-16 12:45:00","2018-04-16 13:00:00","2018-04-16 13:15:00","2018-04-16 13:30:00","2018-04-16 13:45:00","2018-04-16 14:00:00","2018-04-16 14:15:00","2018-04-16 14:30:00","2018-04-16 14:45:00","2018-04-16 15:00:00","2018-04-16 15:15:00","2018-04-16 15:30:00","2018-04-16 15:45:00","2018-04-17 09:30:00","2018-04-17 09:45:00","2018-04-17 10:00:00","2018-04-17 10:15:00","2018-04-17 10:30:00","2018-04-17 10:45:00","2018-04-17 11:00:00","2018-04-17 11:15:00","2018-04-17 11:30:00","2018-04-17 11:45:00","2018-04-17 12:00:00","2018-04-17 12:30:00","2018-04-17 13:00:00","2018-04-17 13:15:00","2018-04-17 13:30:00","2018-04-17 13:45:00","2018-04-17 14:15:00","2018-04-17 14:30:00","2018-04-17 14:45:00","2018-04-17 15:00:00","2018-04-17 15:15:00","2018-04-17 15:30:00","2018-04-17 15:45:00","2018-04-18 09:30:00","2018-04-18 09:45:00","2018-04-18 10:00:00","2018-04-18 10:15:00","2018-04-18 10:30:00","2018-04-18 10:45:00","2018-04-18 11:00:00","2018-04-18 11:15:00","2018-04-18 11:30:00","2018-04-18 11:45:00","2018-04-18 12:00:00","2018-04-18 12:15:00","2018-04-18 12:30:00","2018-04-18 12:45:00","2018-04-18 13:00:00","2018-04-18 13:15:00","2018-04-18 13:30:00","2018-04-18 13:45:00","2018-04-18 14:00:00","2018-04-18 14:15:00","2018-04-18 14:45:00","2018-04-18 15:00:00","2018-04-18 15:15:00","2018-04-18 15:30:00","2018-04-18 15:45:00"];
|
|
var dataUpper = [6.89,6.9,6.9,6.9,6.89,6.87,6.86,6.83,6.8,6.78,6.75,6.71,6.67,6.65,6.64,6.62,6.61,6.6,6.6,6.61,6.65,6.67,6.68,6.69,6.72,6.74,6.79,6.83,6.87,6.9,6.93,6.95,6.98,6.99,7.01,7.01,7.02,7.02,7,7,7.02,7.01,7.01,7,6.98,6.97,6.97,6.97,6.97,6.97,6.97,6.97,6.98,6.98,6.98,6.99,6.99,6.99,6.99,6.99,6.98,6.97,6.97,6.97,6.97,6.99];
|
|
var dataMiddle = [6.7,6.69,6.67,6.66,6.64,6.63,6.61,6.6,6.59,6.58,6.57,6.56,6.55,6.54,6.54,6.53,6.53,6.53,6.52,6.53,6.53,6.54,6.55,6.56,6.58,6.59,6.61,6.62,6.64,6.65,6.67,6.68,6.7,6.72,6.73,6.75,6.77,6.78,6.81,6.82,6.84,6.85,6.86,6.87,6.88,6.89,6.89,6.89,6.89,6.89,6.89,6.89,6.89,6.9,6.9,6.9,6.91,6.91,6.91,6.91,6.9,6.91,6.9,6.9,6.9,6.89];
|
|
var dataLower = [6.51,6.48,6.45,6.42,6.4,6.38,6.37,6.37,6.38,6.38,6.39,6.4,6.43,6.43,6.44,6.44,6.45,6.45,6.45,6.44,6.42,6.42,6.42,6.43,6.44,6.44,6.42,6.41,6.4,6.4,6.4,6.41,6.42,6.44,6.46,6.49,6.52,6.54,6.61,6.65,6.66,6.68,6.71,6.75,6.77,6.8,6.81,6.81,6.81,6.81,6.81,6.81,6.81,6.81,6.82,6.82,6.82,6.82,6.82,6.82,6.83,6.84,6.84,6.83,6.83,6.79];
|
|
|
|
dataUpper = dataUpper.map(function (value, index) {
|
|
return value - dataMiddle[index];
|
|
});
|
|
dataMiddle = dataMiddle.map(function (value, index) {
|
|
return value - dataLower[index];
|
|
});
|
|
|
|
var option = {
|
|
"series": [
|
|
{
|
|
"smooth": true,
|
|
"lineStyle": {
|
|
"normal": {
|
|
"opacity": 0.5,
|
|
"width": 1
|
|
}
|
|
},
|
|
"name": "range",
|
|
"id": "lower",
|
|
"stack": "range",
|
|
"data": dataLower,
|
|
"type": "line",
|
|
"showSymbol": false
|
|
},
|
|
{
|
|
"smooth": true,
|
|
"lineStyle": {
|
|
"normal": {
|
|
"opacity": 0.5,
|
|
"width": 1
|
|
}
|
|
},
|
|
"name": "range",
|
|
"id": "middle",
|
|
"stack": "range",
|
|
"data": dataMiddle,
|
|
"areaStyle": {
|
|
"normal": {
|
|
"color": "rgba(102, 202, 196, .3)"
|
|
}
|
|
},
|
|
"type": "line",
|
|
"showSymbol": false
|
|
},
|
|
{
|
|
"smooth": true,
|
|
"lineStyle": {
|
|
"normal": {
|
|
"opacity": 0.5,
|
|
"width": 1
|
|
}
|
|
},
|
|
"name": "range",
|
|
"id": "upper",
|
|
"stack": "range",
|
|
"data": dataUpper,
|
|
"areaStyle": {
|
|
"normal": {
|
|
"color": "rgba(102, 202, 196, .3)"
|
|
}
|
|
},
|
|
"type": "line",
|
|
"showSymbol": false
|
|
}
|
|
],
|
|
"tooltip": {
|
|
"trigger": "axis"
|
|
},
|
|
"grid": [
|
|
{
|
|
"containLabel": false,
|
|
"show": false
|
|
}
|
|
],
|
|
"xAxis": [
|
|
{
|
|
"type": "category",
|
|
"boundaryGap": true,
|
|
"max": "dataMax",
|
|
"axisLabel": {
|
|
"show": false
|
|
},
|
|
"axisLine": {
|
|
"show": false
|
|
},
|
|
"axisTick": {
|
|
"show": false
|
|
},
|
|
"splitLine": {
|
|
"show": true,
|
|
"lineStyle": {
|
|
"color": "#edeff2"
|
|
}
|
|
},
|
|
"data": xAxisData
|
|
}
|
|
],
|
|
"yAxis": [
|
|
{
|
|
"scale": true,
|
|
"boundaryGap": [
|
|
"5%",
|
|
"5%"
|
|
],
|
|
"splitArea": {
|
|
"show": false
|
|
},
|
|
"axisLabel": {
|
|
"color": "#32325d",
|
|
"fontFamily": "rubiklight",
|
|
"fontSize": 14,
|
|
"showMinLabel": false,
|
|
"showMaxLabel": false
|
|
},
|
|
"axisLine": {
|
|
"lineStyle": {
|
|
"color": "#32325d"
|
|
}
|
|
},
|
|
"splitLine": {
|
|
"lineStyle": {
|
|
"color": "#edeff2"
|
|
}
|
|
},
|
|
"position": "right"
|
|
}
|
|
],
|
|
"axisPointer": {
|
|
"link": {
|
|
"xAxis": "all"
|
|
},
|
|
"lineStyle": {
|
|
"color": "#c3c6c9",
|
|
"type": "dotted"
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
testHelper.create(echarts, 'main1', {
|
|
title: 'yAxis extent should not contain 0 (should about [5, 8])',
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
var chart;
|
|
var option;
|
|
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var data = [
|
|
[["2016-10-4",44],["2016-10-5",54],["2016-10-6",47],["2016-10-7",37],["2016-10-8",36],["2016-10-9",30],["2016-10-10",20],["2016-10-11",21],["2016-10-12",29]],
|
|
[["2016-10-4",28],["2016-10-5",38],["2016-10-6",44],["2016-10-7",40],["2016-10-8",42],["2016-10-9",39],["2016-10-10",46],["2016-10-11",50],["2016-10-12",46]]
|
|
];
|
|
|
|
var option = {
|
|
legend: {
|
|
},
|
|
tooltip: {
|
|
triggerOn: 'none',
|
|
position: function (pt) {
|
|
return [pt[0], 130];
|
|
}
|
|
},
|
|
toolbox: {
|
|
left: 'center',
|
|
itemSize: 25,
|
|
top: 55,
|
|
feature: {
|
|
dataZoom: {
|
|
yAxisIndex: 'none'
|
|
},
|
|
restore: {}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'time',
|
|
axisPointer: {
|
|
value: '2016-10-7',
|
|
snap: true,
|
|
lineStyle: {
|
|
color: '#004E52',
|
|
opacity: 0.5,
|
|
width: 2
|
|
},
|
|
label: {
|
|
show: true,
|
|
formatter: function (params) {
|
|
return echarts.format.formatTime('yyyy-MM-dd', params.value);
|
|
},
|
|
backgroundColor: '#004E52'
|
|
},
|
|
handle: {
|
|
show: true,
|
|
color: '#004E52'
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
}
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisTick: {
|
|
inside: true
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
inside: true,
|
|
formatter: '{value}\n'
|
|
},
|
|
z: 10
|
|
},
|
|
grid: {
|
|
top: 110,
|
|
left: 15,
|
|
right: 15,
|
|
height: 160
|
|
},
|
|
dataZoom: [{
|
|
type: 'inside',
|
|
throttle: 50
|
|
}],
|
|
series: [
|
|
{
|
|
name:'line1',
|
|
type:'line',
|
|
smooth: true,
|
|
symbol: 'circle',
|
|
symbolSize: 5,
|
|
sampling: 'average',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#8ec6ad'
|
|
}
|
|
},
|
|
stack: 'a',
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#8ec6ad'
|
|
}, {
|
|
offset: 1,
|
|
color: '#ffe'
|
|
}])
|
|
}
|
|
},
|
|
data: data[0]
|
|
},
|
|
{
|
|
name:'line2',
|
|
type:'line',
|
|
smooth:true,
|
|
stack: 'a',
|
|
symbol: 'circle',
|
|
symbolSize: 5,
|
|
sampling: 'average',
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#d68262'
|
|
}
|
|
},
|
|
areaStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
offset: 0,
|
|
color: '#d68262'
|
|
}, {
|
|
offset: 1,
|
|
color: '#ffe'
|
|
}])
|
|
}
|
|
},
|
|
data: data[1]
|
|
}
|
|
|
|
]
|
|
};
|
|
|
|
testHelper.create(echarts, 'main2', {
|
|
title: 'Stack on time axis (byIndex)',
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
var chart;
|
|
var option;
|
|
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'stack',
|
|
type: 'line',
|
|
stack: 'stack',
|
|
data: [3, 1, 2, -1, -3, 1, 3, -3, -1, -2, 1, 3, -1, -3]
|
|
},
|
|
{
|
|
name: 'stack',
|
|
type: 'line',
|
|
stack: 'stack',
|
|
areaStyle: {},
|
|
data: [1, 1, 1, 1, 1, 1, 1, -1, -1, -1, -1, -1, -1, -1]
|
|
}
|
|
]
|
|
};
|
|
|
|
testHelper.create(echarts, 'stack-default', {
|
|
title: 'Stacking with positive and negative values (default: samesign)',
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
var chart;
|
|
var option;
|
|
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'stack',
|
|
type: 'line',
|
|
stack: 'stack',
|
|
stackStrategy: 'all',
|
|
data: [3, 1, 2, -1, -3, 1, 3, -3, -1, -2, 1, 3, -1, -3]
|
|
},
|
|
{
|
|
name: 'stack',
|
|
type: 'line',
|
|
stack: 'stack',
|
|
stackStrategy: 'all',
|
|
areaStyle: {},
|
|
data: [1, 1, 1, 1, 1, 1, 1, -1, -1, -1, -1, -1, -1, -1]
|
|
}
|
|
]
|
|
};
|
|
|
|
testHelper.create(echarts, 'stack-all', {
|
|
title: 'Stacking with positive and negative values (stackStrategy: all)',
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
var chart;
|
|
var option;
|
|
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'stack',
|
|
type: 'line',
|
|
stack: 'stack',
|
|
stackStrategy: 'positive',
|
|
data: [3, 1, 2, -1, -3, 1, 3, -3, -1, -2, 1, 3, -1, -3]
|
|
},
|
|
{
|
|
name: 'stack',
|
|
type: 'line',
|
|
stack: 'stack',
|
|
stackStrategy: 'positive',
|
|
areaStyle: {},
|
|
data: [1, 1, 1, 1, 1, 1, 1, -1, -1, -1, -1, -1, -1, -1]
|
|
}
|
|
]
|
|
};
|
|
|
|
testHelper.create(echarts, 'stack-positive', {
|
|
title: 'Stacking with positive and negative values (stackStrategy: positive)',
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
var chart;
|
|
var option;
|
|
|
|
require(['echarts'], function (echarts) {
|
|
|
|
var option = {
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: 'stack',
|
|
type: 'line',
|
|
stack: 'stack',
|
|
stackStrategy: 'negative',
|
|
data: [3, 1, 2, -1, -3, 1, 3, -3, -1, -2, 1, 3, -1, -3]
|
|
},
|
|
{
|
|
name: 'stack',
|
|
type: 'line',
|
|
stack: 'stack',
|
|
stackStrategy: 'negative',
|
|
areaStyle: {},
|
|
data: [1, 1, 1, 1, 1, 1, 1, -1, -1, -1, -1, -1, -1, -1]
|
|
}
|
|
]
|
|
};
|
|
|
|
testHelper.create(echarts, 'stack-negative', {
|
|
title: 'Stacking with positive and negative values (stackStrategy: negative)',
|
|
option: option
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|