1431 lines
57 KiB
HTML
Generated
1431 lines
57 KiB
HTML
Generated
<!DOCTYPE html>
|
||
<!--
|
||
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">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<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>
|
||
<!-- <script src="ut/lib/canteen.js"></script> -->
|
||
<link rel="stylesheet" href="lib/reset.css" />
|
||
</head>
|
||
<body>
|
||
<style>
|
||
</style>
|
||
|
||
<h1>Bar/Line chart stack normal with dataZoom in the toolbox(should not exceed the range of coord)</h1>
|
||
<div id="main0"></div>
|
||
<div id="main1"></div>
|
||
<div id="main2"></div>
|
||
<div id="main3"></div>
|
||
<div id="main4"></div>
|
||
<div id="main5"></div>
|
||
<div id="main6"></div>
|
||
|
||
|
||
<script>
|
||
require([
|
||
'echarts'
|
||
], function (echarts) {
|
||
|
||
var option = {
|
||
|
||
top: '30%',
|
||
|
||
title: {
|
||
text: 'ECharts test'
|
||
},
|
||
tooltip: {},
|
||
legend: {
|
||
data:['test']
|
||
},
|
||
xAxis: {
|
||
data: ["AA","BB","CC","DD","EE","FF"]
|
||
},
|
||
yAxis: {},
|
||
series: [{
|
||
name: 'Y',
|
||
type: 'bar',
|
||
data: [5, 20, 36, 10, 10, 20],
|
||
stack: 1,
|
||
}, {
|
||
name: 'X',
|
||
type: 'bar',
|
||
data: [1, 2, 30, 10, 8, 2],
|
||
stack: 1,
|
||
}],
|
||
toolbox: {
|
||
feature: {
|
||
dataZoom: {show: true}
|
||
}
|
||
}
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main0', {
|
||
option: option,
|
||
// recordCanvas: true
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script>
|
||
require([
|
||
'echarts'
|
||
], function (echarts) {
|
||
|
||
var option = {
|
||
"backgroundColor": "#fff",
|
||
"legend": {
|
||
"orient": "horizontal",
|
||
"x": "center",
|
||
"left": "2%",
|
||
"top": "2%"
|
||
},
|
||
"textStyle": {
|
||
"fontFamily": "Lato"
|
||
},
|
||
"tooltip":{
|
||
"show": true,
|
||
"trigger": "axis",
|
||
"backgroundColor": "#fff",
|
||
"borderColor": "#e0e5ec",
|
||
"borderWidth": 1,
|
||
"textStyle": {
|
||
"color": "#495057",
|
||
"fontSize": 10
|
||
},
|
||
"enterable": true,
|
||
"axisPointer": {
|
||
"lineStyle": {
|
||
"color": "#e0e5ec"
|
||
}
|
||
}
|
||
},
|
||
"toolbox":{
|
||
"feature":{
|
||
"dataZoom":{
|
||
"show":true,
|
||
"title":{
|
||
"zoom":"Zoom",
|
||
"back":"Restore Zoom"
|
||
}
|
||
}
|
||
}
|
||
},
|
||
"color": [
|
||
"rgba(101,116, 205, 0.9 )",
|
||
"rgba(246,109, 155, 0.9 )",
|
||
"rgba(43,203, 186, 0.9 )",
|
||
"rgba(253,150, 68, 0.9 )",
|
||
"rgba(205,32, 31, 0.9 )",
|
||
"rgba(165,94, 234, 0.9 )",
|
||
"rgba(123,210, 53, 0.9 )",
|
||
"rgba(241,196, 15, 0.9 )",
|
||
"rgba(70,127, 207, 0.9 )",
|
||
"rgba(23,162, 184, 0.9 )",
|
||
"rgba(69,170, 242, 0.9 )",
|
||
"rgba(94,186, 0, 0.9 )",
|
||
"rgba(33,150, 243, 0.9 )",
|
||
"rgba(0,150, 136, 0.9 )",
|
||
"rgba(244,67, 54, 0.9 )",
|
||
"rgba(156,39, 176, 0.9 )",
|
||
"rgba(0,150, 136, 0.9 )",
|
||
"rgba(103,58, 183, 0.9 )",
|
||
"rgba(63,81, 181, 0.9 )",
|
||
"rgba(76,175, 80, 0.9 )",
|
||
"rgba(233,30, 99, 0.9 )",
|
||
"rgba(96,125, 139, 0.9 )",
|
||
"rgba(255,87, 34, 0.9 )",
|
||
"rgba(28,147, 99, 0.9 )",
|
||
"rgba(255,113, 91, 0.9 )",
|
||
"rgba(43,89, 195, 0.9 )",
|
||
"rgba(33,91, 86, 0.9 )",
|
||
"rgba(0,188, 212, 0.9 )",
|
||
"rgba(255,87, 34, 0.9 )",
|
||
"rgba(255,193, 7, 0.9 )",
|
||
"rgba(48,25, 102, 0.9 )",
|
||
"rgba(211,101, 130, 0.9 )",
|
||
"rgba(130,6, 70, 0.9 )",
|
||
"rgba(100,155, 193, 0.9 )",
|
||
"rgba(75,63, 114, 0.9 )",
|
||
"rgba(219,51, 64, 0.9 )",
|
||
"rgba(223,81, 76, 0.9 )",
|
||
"rgba(92,45, 80, 0.9 )",
|
||
"rgba(94,52, 72, 0.9 )",
|
||
"rgba(83,187, 244, 0.9 )",
|
||
"rgba(89,196, 197, 0.9 )",
|
||
"rgba(191,240, 115, 0.9 )",
|
||
"rgba(228,95, 86, 0.9 )",
|
||
"rgba(201,27, 38, 0.9 )",
|
||
"rgba(115,116, 149, 0.9 )",
|
||
"rgba(92,45, 80, 0.9 )",
|
||
"rgba(32,69, 124, 0.9 )",
|
||
"rgba(15,89, 89, 0.9 )",
|
||
"rgba(159,146, 170, 0.9 )",
|
||
"rgba(255,162, 0, 0.9 )",
|
||
"rgba(36,168, 172, 0.9 )",
|
||
"rgba(255,76, 101, 0.9 )",
|
||
"rgba(233,76, 111, 0.9 )",
|
||
"rgba(53,68, 88, 0.9 )",
|
||
"rgba(105,210, 231, 0.9 )",
|
||
"rgba(220,39, 66, 0.9 )",
|
||
"rgba(58,2, 86, 0.9 )",
|
||
"rgba(23,166, 151, 0.9 )",
|
||
"rgba(6,71, 137, 0.9 )",
|
||
"rgba(255,195, 60, 0.9 )"
|
||
],
|
||
"xAxis": {
|
||
"show": true,
|
||
"type": "category",
|
||
"name": "Inserted_at By Day",
|
||
"nameLocation": "center",
|
||
"nameTextStyle": {
|
||
"padding": 8,
|
||
"color": "#495057",
|
||
"fontSize": 12
|
||
},
|
||
"axisLine": {
|
||
"onZero": false,
|
||
"lineStyle": {
|
||
"color": "#e0e5ec"
|
||
}
|
||
},
|
||
"axisLabel": {
|
||
"color": "#495057",
|
||
"fontSize": 10
|
||
},
|
||
"splitLine": {
|
||
"show": false
|
||
}
|
||
},
|
||
"yAxis": {
|
||
"show": true,
|
||
"type": "value",
|
||
"name": false,
|
||
"nameLocation": "center",
|
||
"nameTextStyle": {
|
||
"padding": 8,
|
||
"color": "#495057",
|
||
"fontSize": 12
|
||
},
|
||
"axisLine": {
|
||
"onZero": false,
|
||
"lineStyle": {
|
||
"color": "#e0e5ec"
|
||
}
|
||
},
|
||
"axisLabel": {
|
||
"color": "#495057",
|
||
"fontSize": 10
|
||
},
|
||
"splitLine": {
|
||
"show": false
|
||
}
|
||
},
|
||
"series": [
|
||
{
|
||
"type": "bar",
|
||
"name": "count",
|
||
"itemStyle": null,
|
||
"stack": true,
|
||
"data": [
|
||
[
|
||
"2018-03-08 05:30:00.000",
|
||
156
|
||
],
|
||
[
|
||
"2018-03-23 05:30:00.000",
|
||
24
|
||
],
|
||
[
|
||
"2018-04-18 05:30:00.000",
|
||
513
|
||
],
|
||
[
|
||
"2018-05-16 05:30:00.000",
|
||
7
|
||
],
|
||
[
|
||
"2018-05-20 05:30:00.000",
|
||
21
|
||
],
|
||
[
|
||
"2018-05-31 05:30:00.000",
|
||
7
|
||
],
|
||
[
|
||
"2018-06-07 05:30:00.000",
|
||
7
|
||
],
|
||
[
|
||
"2018-06-08 05:30:00.000",
|
||
2
|
||
],
|
||
[
|
||
"2018-06-10 05:30:00.000",
|
||
6
|
||
]
|
||
]
|
||
},
|
||
{
|
||
"type": "bar",
|
||
"name": "?column?",
|
||
"itemStyle": null,
|
||
"stack": true,
|
||
"data": [
|
||
[
|
||
"2018-03-08 05:30:00.000",
|
||
9
|
||
],
|
||
[
|
||
"2018-03-23 05:30:00.000",
|
||
"1"
|
||
],
|
||
[
|
||
"2018-04-18 05:30:00.000",
|
||
356
|
||
],
|
||
[
|
||
"2018-05-16 05:30:00.000",
|
||
5
|
||
],
|
||
[
|
||
"2018-05-20 05:30:00.000",
|
||
15
|
||
],
|
||
[
|
||
"2018-05-31 05:30:00.000",
|
||
5
|
||
],
|
||
[
|
||
"2018-06-07 05:30:00.000",
|
||
5
|
||
],
|
||
[
|
||
"2018-06-08 05:30:00.000",
|
||
"1"
|
||
],
|
||
[
|
||
"2018-06-10 05:30:00.000",
|
||
4
|
||
]
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main1', {
|
||
option: option,
|
||
// recordCanvas: true
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
<script>
|
||
require([
|
||
'echarts'
|
||
], function (echarts) {
|
||
|
||
var option = {
|
||
"calculable": false,
|
||
"renderAsImage": false,
|
||
"series": [
|
||
{
|
||
"largeThreshold" : 2000,
|
||
"legendHoverLink" : true,
|
||
"smooth" : false,
|
||
"barCategoryGap" : "30%",
|
||
"clickable" : true,
|
||
"z" : 2,
|
||
"dataFilter" : "nearest",
|
||
"showAllSymbol" : false,
|
||
"yAxisIndex" : 0,
|
||
"type" : "bar",
|
||
"data" : [
|
||
23756.529999999999,
|
||
26716.48,
|
||
9424.25,
|
||
9530.8999999999996,
|
||
6035.3400000000001,
|
||
0,
|
||
3381.3499999999999,
|
||
6528.8599999999997,
|
||
3760.21,
|
||
3502.3800000000001,
|
||
1194.3599999999999,
|
||
4612.3400000000001,
|
||
0,
|
||
1296.3800000000001,
|
||
3743.4499999999998,
|
||
26284.240000000002,
|
||
1809.24,
|
||
0,
|
||
1947.3199999999999,
|
||
2511,
|
||
15559.23,
|
||
0,
|
||
5936.9399999999996,
|
||
0,
|
||
0,
|
||
0,
|
||
4760.2700000000004,
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
3428.1500000000001,
|
||
2521.0999999999999,
|
||
1607.8599999999999,
|
||
2441.52,
|
||
4354.8100000000004,
|
||
2960.9899999999998,
|
||
10408.42,
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
0
|
||
],
|
||
"barGap" : "30%",
|
||
"itemStyle" : {
|
||
"emphasis" : {
|
||
"color" : "#1886E3",
|
||
"label" : {
|
||
"distance" : 10,
|
||
"show" : false,
|
||
"position" : "outer",
|
||
"rotate" : false
|
||
},
|
||
"labelLine" : {
|
||
"show" : true,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
},
|
||
"length" : 40
|
||
}
|
||
},
|
||
"normal" : {
|
||
"color" : "#1886E3",
|
||
"label" : {
|
||
"distance" : 10,
|
||
"show" : false,
|
||
"position" : "outer",
|
||
"rotate" : false
|
||
},
|
||
"labelLine" : {
|
||
"show" : true,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
},
|
||
"length" : 40
|
||
}
|
||
}
|
||
},
|
||
"large" : false,
|
||
"name" : "51周平均日用量"
|
||
},
|
||
{
|
||
"largeThreshold" : 2000,
|
||
"legendHoverLink" : true,
|
||
"smooth" : false,
|
||
"barCategoryGap" : "30%",
|
||
"clickable" : true,
|
||
"z" : 2,
|
||
"dataFilter" : "nearest",
|
||
"showAllSymbol" : false,
|
||
"yAxisIndex" : 0,
|
||
"type" : "bar",
|
||
"data" : [
|
||
30489.049999999999,
|
||
36026.639999999999,
|
||
8183.5699999999997,
|
||
14145.48,
|
||
7167.7200000000003,
|
||
880.82000000000005,
|
||
6253.9200000000001,
|
||
8826.25,
|
||
4777.7399999999998,
|
||
3638.1700000000001,
|
||
3584.2800000000002,
|
||
5062.5,
|
||
1168.51,
|
||
1114.8299999999999,
|
||
11842.41,
|
||
30060.919999999998,
|
||
706.26999999999998,
|
||
3996.46,
|
||
4380.8100000000004,
|
||
5187.4099999999999,
|
||
3824.5999999999999,
|
||
2262.4499999999998,
|
||
2967.6999999999998,
|
||
4495.6300000000001,
|
||
4126.5699999999997,
|
||
0,
|
||
3858.75,
|
||
2924.0999999999999,
|
||
1746.75,
|
||
1975.5,
|
||
2082,
|
||
3088.5,
|
||
0,
|
||
0,
|
||
0,
|
||
1785.53,
|
||
4356.0100000000002,
|
||
8033.8199999999997,
|
||
4208.71,
|
||
13157.700000000001,
|
||
12462.93,
|
||
13743.9,
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
0,
|
||
0
|
||
],
|
||
"barGap" : "30%",
|
||
"itemStyle" : {
|
||
"emphasis" : {
|
||
"color" : "#F6A623",
|
||
"label" : {
|
||
"distance" : 10,
|
||
"show" : false,
|
||
"position" : "outer",
|
||
"rotate" : false
|
||
},
|
||
"labelLine" : {
|
||
"show" : true,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
},
|
||
"length" : 40
|
||
}
|
||
},
|
||
"normal" : {
|
||
"color" : "#F6A623",
|
||
"label" : {
|
||
"distance" : 10,
|
||
"show" : false,
|
||
"position" : "outer",
|
||
"rotate" : false
|
||
},
|
||
"labelLine" : {
|
||
"show" : true,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
},
|
||
"length" : 40
|
||
}
|
||
}
|
||
},
|
||
"large" : false,
|
||
"name" : "52周平均日用量"
|
||
},
|
||
{
|
||
"largeThreshold" : 2000,
|
||
"legendHoverLink" : true,
|
||
"smooth" : false,
|
||
"barCategoryGap" : "30%",
|
||
"clickable" : true,
|
||
"z" : 2,
|
||
"dataFilter" : "nearest",
|
||
"showAllSymbol" : false,
|
||
"yAxisIndex" : 0,
|
||
"type" : "bar",
|
||
"data" : [
|
||
29524.110000000001,
|
||
14007.120000000001,
|
||
8411.6900000000005,
|
||
10003.469999999999,
|
||
11589.879999999999,
|
||
896.50999999999999,
|
||
4791.6000000000004,
|
||
6617.21,
|
||
7026.1099999999997,
|
||
5556.4899999999998,
|
||
3061.27,
|
||
8506.9099999999999,
|
||
416.82999999999998,
|
||
1337.75,
|
||
12256.059999999999,
|
||
22903.669999999998,
|
||
1427.8,
|
||
1533.5699999999999,
|
||
27902.540000000001,
|
||
5579.8100000000004,
|
||
28220.360000000001,
|
||
754.44000000000005,
|
||
3196.9299999999998,
|
||
6200.3400000000001,
|
||
6716.3900000000003,
|
||
0,
|
||
939.21000000000004,
|
||
803.39999999999998,
|
||
0,
|
||
11446.959999999999,
|
||
2096.5599999999999,
|
||
4544.4799999999996,
|
||
3509.3200000000002,
|
||
0,
|
||
761.25,
|
||
4916.1400000000003,
|
||
3039.4000000000001,
|
||
6166.8000000000002,
|
||
3378.46,
|
||
8787.6399999999994,
|
||
5666.96,
|
||
12500.610000000001,
|
||
5281.7299999999996,
|
||
8854.1399999999994,
|
||
328.94999999999999,
|
||
0,
|
||
0,
|
||
0,
|
||
0
|
||
],
|
||
"barGap" : "30%",
|
||
"itemStyle" : {
|
||
"emphasis" : {
|
||
"color" : "#90AFE4",
|
||
"label" : {
|
||
"distance" : 10,
|
||
"show" : false,
|
||
"position" : "outer",
|
||
"rotate" : false
|
||
},
|
||
"labelLine" : {
|
||
"show" : true,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
},
|
||
"length" : 40
|
||
}
|
||
},
|
||
"normal" : {
|
||
"color" : "#90AFE4",
|
||
"label" : {
|
||
"distance" : 10,
|
||
"show" : false,
|
||
"position" : "outer",
|
||
"rotate" : false
|
||
},
|
||
"labelLine" : {
|
||
"show" : true,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
},
|
||
"length" : 40
|
||
}
|
||
}
|
||
},
|
||
"large" : false,
|
||
"name" : "1周平均日用量"
|
||
},
|
||
{
|
||
"largeThreshold" : 2000,
|
||
"legendHoverLink" : true,
|
||
"smooth" : false,
|
||
"barCategoryGap" : "30%",
|
||
"clickable" : true,
|
||
"z" : 2,
|
||
"dataFilter" : "nearest",
|
||
"showAllSymbol" : false,
|
||
"yAxisIndex" : 0,
|
||
"type" : "bar",
|
||
"data" : [
|
||
35376.440000000002,
|
||
21978.869999999999,
|
||
6576.0299999999997,
|
||
8786.5499999999993,
|
||
10064.26,
|
||
2063.1399999999999,
|
||
6502.3400000000001,
|
||
13495.48,
|
||
5614.5100000000002,
|
||
6085.6499999999996,
|
||
2312.5799999999999,
|
||
8553.2600000000002,
|
||
8796.3999999999996,
|
||
1880.26,
|
||
8418.7900000000009,
|
||
49651.620000000003,
|
||
1466.8,
|
||
6279.8599999999997,
|
||
7088.9499999999998,
|
||
8273.3099999999995,
|
||
12138.690000000001,
|
||
7607.8699999999999,
|
||
5459.1599999999999,
|
||
4296.71,
|
||
5477.7399999999998,
|
||
1249.6300000000001,
|
||
5644.4700000000003,
|
||
1487.8099999999999,
|
||
2465.04,
|
||
6923.5200000000004,
|
||
5541.7799999999997,
|
||
2260.6999999999998,
|
||
2172.1500000000001,
|
||
1944,
|
||
8513.8600000000006,
|
||
10300.84,
|
||
2953.7600000000002,
|
||
10124.91,
|
||
12560.67,
|
||
7698.3199999999997,
|
||
9854.2099999999991,
|
||
11715.85,
|
||
3042.8299999999999,
|
||
11900.15,
|
||
19656.810000000001,
|
||
2519.0900000000001,
|
||
3384.0500000000002,
|
||
1441.74,
|
||
690.61000000000001
|
||
],
|
||
"barGap" : "30%",
|
||
"itemStyle" : {
|
||
"emphasis" : {
|
||
"color" : "#6ED4DA",
|
||
"label" : {
|
||
"distance" : 10,
|
||
"show" : false,
|
||
"position" : "outer",
|
||
"rotate" : false
|
||
},
|
||
"labelLine" : {
|
||
"show" : true,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
},
|
||
"length" : 40
|
||
}
|
||
},
|
||
"normal" : {
|
||
"color" : "#6ED4DA",
|
||
"label" : {
|
||
"distance" : 10,
|
||
"show" : false,
|
||
"position" : "outer",
|
||
"rotate" : false
|
||
},
|
||
"labelLine" : {
|
||
"show" : true,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
},
|
||
"length" : 40
|
||
}
|
||
}
|
||
},
|
||
"large" : false,
|
||
"name" : "2周平均日用量"
|
||
}
|
||
],
|
||
"grid" : {
|
||
"y" : 75,
|
||
"x2" : 45,
|
||
"z" : 0,
|
||
"x" : 45,
|
||
"zlevel" : 0,
|
||
"y2" : 40
|
||
},
|
||
"xAxis" : [
|
||
{
|
||
"splitLine" : {
|
||
"show" : true,
|
||
"onGap" : false,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
}
|
||
},
|
||
"scale" : false,
|
||
"position" : "'bottom'|'left'",
|
||
"axisLabel" : {
|
||
"interval" : "auto",
|
||
"show" : true,
|
||
"clickable" : false,
|
||
"rotate" : 0,
|
||
"margin" : 8
|
||
},
|
||
"show" : true,
|
||
"z" : 0,
|
||
"type" : "category",
|
||
"data" : [
|
||
"小华1号普通A+C",
|
||
"小华2号A+C两层加硬",
|
||
"小华3号170gA+B",
|
||
"小华4号170gA+A",
|
||
"小华5号（美牛双加硬）",
|
||
"10号（Q636B）\/BE瓦",
|
||
"11号（H737B）\/BC瓦",
|
||
"12号（H737H）\/BC瓦",
|
||
"13号（H636B）\/BC瓦",
|
||
"14号（M535B）\/BC瓦",
|
||
"15号（M536B）\/BC瓦",
|
||
"16号（M636B）\/BC瓦",
|
||
"17号（M535B）\/BE瓦",
|
||
"18号（M536B）\/BE瓦",
|
||
"19号（A5B）\/单B瓦",
|
||
"1号（A535B）\/BC瓦",
|
||
"20号（Q5B）\/单B瓦",
|
||
"21号（Q6B）\/单B瓦",
|
||
"22号（5B）\/E瓦",
|
||
"23号（6B）\/E瓦",
|
||
"24号（535B）\/BE瓦",
|
||
"25号（A5B）\/E瓦",
|
||
"26号（W5C）\/E瓦",
|
||
"27号（H7H）\/单B瓦",
|
||
"28号（636A）\/BE瓦",
|
||
"29号（6A）\/E瓦",
|
||
"2号（A536B）\/BC瓦",
|
||
"30号（B53）\/单E瓦",
|
||
"31号（B63）\/单E瓦",
|
||
"32号（M33）\/单B瓦",
|
||
"33号（B3C）\/单B瓦",
|
||
"34号（M3C）\/单B瓦",
|
||
"35号（B333C）\/BC瓦",
|
||
"36号（M3333）\/BC瓦",
|
||
"37号（M333C）\/BC瓦",
|
||
"3号（A636B）\/BC瓦",
|
||
"4号（A535B）\/BE瓦",
|
||
"5号（A536B）\/BE瓦",
|
||
"6号（A636B）\/BE瓦",
|
||
"7号（Q535B）\/BC瓦",
|
||
"8号（Q536B）\/BC瓦",
|
||
"9号（Q636B）\/BC瓦",
|
||
"38号（Q6B）\/单E层",
|
||
"39号（B33）\/单B瓦",
|
||
"40号（Q536B）\/BE瓦",
|
||
"小华6号(A+C一层加硬)",
|
||
"小华7号(A+C单B瓦)",
|
||
"小华6号(120gA+C \/BE)",
|
||
"43号（536B）\/BE瓦"
|
||
],
|
||
"nameLocation" : "end",
|
||
"zlevel" : 0,
|
||
"axisLine" : {
|
||
"show" : true,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
},
|
||
"onZero" : true
|
||
},
|
||
"name" : ""
|
||
}
|
||
],
|
||
"tooltip" : {
|
||
"transitionDuration" : 0.40000000000000002,
|
||
"borderColor" : "rgba(3,3,3,1.00)",
|
||
"padding" : 5,
|
||
"axisPointer" : {
|
||
"show" : false,
|
||
"type" : "shadow"
|
||
},
|
||
"position" : "(function (p){return ['50%', p[1] - 10]} )",
|
||
"islandFormmater" : "{a} < br\/>{b} : {c}",
|
||
"backgroundColor" : "rgba(0,0,0,0.70)",
|
||
"trigger" : "axis",
|
||
"show" : true,
|
||
"z" : 8,
|
||
"showContent" : true,
|
||
"showDelay" : 20,
|
||
"enterable" : false,
|
||
"hideDelay" : 100,
|
||
"borderWidth" : 0,
|
||
"zlevel" : 1,
|
||
"borderRadius" : 4
|
||
},
|
||
"dataZoom" : {
|
||
"handleColor" : "rgba(70,130,180,0.80)",
|
||
"start" : 0,
|
||
"fillerColor" : "rgba(144,197,237,0.20)",
|
||
"dataBackgroundColor" : "rgba(14,14,14,1.00)",
|
||
"backgroundColor" : "rgba(0,0,0,0.00)",
|
||
"realtime" : false,
|
||
"show" : false,
|
||
"z" : 4,
|
||
"type" : "inside",
|
||
"minSpan" : 5,
|
||
"orient" : "horizontal",
|
||
"zlevel" : 0,
|
||
"handleSize" : 8,
|
||
"end" : 100,
|
||
"zoomLock" : false,
|
||
"showDetail" : true
|
||
},
|
||
"title" : {
|
||
"padding" : 5,
|
||
"borderColor" : "rgba(12,12,12,1.00)",
|
||
"textStyle" : {
|
||
"fontFamily" : "Arial, Verdana, sans-serif",
|
||
"fontStyle" : "normal",
|
||
"fontWeight" : "bolder",
|
||
"decoration" : "none",
|
||
"fontSize" : 17
|
||
},
|
||
"subtextStyle" : {
|
||
"fontFamily" : "Arial, Verdana, sans-serif",
|
||
"fontSize" : 12,
|
||
"fontStyle" : "normal",
|
||
"fontWeight" : "normal",
|
||
"decoration" : "none",
|
||
"color" : "rgba(10,10,10,1.00)"
|
||
},
|
||
"sublink" : "",
|
||
"x" : "left",
|
||
"backgroundColor" : "rgba(0,0,0,0.00)",
|
||
"y" : "top",
|
||
"link" : "",
|
||
"itemGap" : 5,
|
||
"show" : true,
|
||
"z" : 0,
|
||
"borderWidth" : 0,
|
||
"text" : "",
|
||
"subtext" : "",
|
||
"zlevel" : 0
|
||
},
|
||
"animation" : true,
|
||
"toolbox" : {
|
||
"padding" : 5,
|
||
"borderColor" : "rgba(12,12,12,1.00)",
|
||
"disableColor" : "rgba(13,13,13,0.00)",
|
||
"x" : "right",
|
||
"backgroundColor" : "rgba(0,0,0,0.00)",
|
||
"effectiveColor" : "rgba(255,0,0,1.00)",
|
||
"y" : "top",
|
||
"itemSize" : 16,
|
||
"itemGap" : 10,
|
||
"show" : false,
|
||
"z" : 6,
|
||
"color" : [
|
||
"rgba(30,144,255,1.00)",
|
||
"rgba(34,187,34,1.00)",
|
||
"rgba(75,0,130,1.00)",
|
||
"rgba(210,105,30,1.00)"
|
||
],
|
||
"showTitle" : true,
|
||
"borderWidth" : 0,
|
||
"feature" : {
|
||
"dataView" : {
|
||
"title" : "数据视图",
|
||
"show" : false,
|
||
"readOnly" : false,
|
||
"lang" : [
|
||
"数据视图",
|
||
"关闭",
|
||
"刷新"
|
||
]
|
||
},
|
||
"magicType" : {
|
||
"show" : false,
|
||
"title" : {
|
||
"bar" : "柱形图切换",
|
||
"chord" : "和弦图切换",
|
||
"funnel" : "漏斗图切换",
|
||
"force" : "力导向布局图切换",
|
||
"tiled" : "平铺",
|
||
"stack" : "堆积",
|
||
"pie" : "饼图切换",
|
||
"line" : "折线图切换"
|
||
}
|
||
},
|
||
"mark" : {
|
||
"show" : false,
|
||
"title" : {
|
||
"markClear" : "清空辅助线",
|
||
"mark" : "辅助线开关",
|
||
"markUndo" : "删除辅助线"
|
||
},
|
||
"lineStyle" : {
|
||
"color" : "rgba(30,144,255,1.00)",
|
||
"type" : "dashed",
|
||
"width" : 2
|
||
}
|
||
},
|
||
"restore" : {
|
||
"show" : false,
|
||
"title" : "还原"
|
||
},
|
||
"dataZoom" : {
|
||
"show" : true,
|
||
"title" : {
|
||
"dataZoom" : "区域缩放",
|
||
"dataZoomReset" : "区域缩放后退"
|
||
}
|
||
}
|
||
},
|
||
"orient" : "horizontal",
|
||
"zlevel" : 0
|
||
},
|
||
"yAxis" : [
|
||
{
|
||
"splitLine" : {
|
||
"show" : true,
|
||
"onGap" : false,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
}
|
||
},
|
||
"scale" : true,
|
||
"position" : "'bottom'|'left'",
|
||
"show" : true,
|
||
"z" : 0,
|
||
"type" : "value",
|
||
"data" : [
|
||
|
||
],
|
||
"nameLocation" : "end",
|
||
"zlevel" : 0,
|
||
"axisLine" : {
|
||
"show" : true,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
},
|
||
"onZero" : true
|
||
},
|
||
"name" : "㎡"
|
||
},
|
||
{
|
||
"splitLine" : {
|
||
"show" : true,
|
||
"onGap" : false,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
}
|
||
},
|
||
"scale" : true,
|
||
"position" : "'bottom'|'left'",
|
||
"axisLabel" : {
|
||
"formatter" : "(function (params) {if(params >= 10000000) { return (params\/ 10000000 + '千万' );} if (params >= 10000) { return (params\/ 10000 + '万' );} else {return params;}})",
|
||
"interval" : "auto",
|
||
"show" : true,
|
||
"clickable" : false,
|
||
"rotate" : 0,
|
||
"margin" : 8
|
||
},
|
||
"show" : true,
|
||
"z" : 0,
|
||
"type" : "value",
|
||
"data" : [
|
||
|
||
],
|
||
"nameLocation" : "end",
|
||
"zlevel" : 0,
|
||
"axisLine" : {
|
||
"show" : true,
|
||
"lineStyle" : {
|
||
"type" : "solid"
|
||
},
|
||
"onZero" : true
|
||
},
|
||
"name" : ""
|
||
}
|
||
],
|
||
"legend" : {
|
||
"borderColor" : "#ccc",
|
||
"textStyle" : {
|
||
"fontFamily" : "Arial, Verdana, sans-serif",
|
||
"fontSize" : 12,
|
||
"fontStyle" : "normal",
|
||
"fontWeight" : "normal",
|
||
"decoration" : "none",
|
||
"color" : "rgba(3,3,3,1.00)"
|
||
},
|
||
"x" : "center",
|
||
"y" : 29,
|
||
"itemGap" : 5,
|
||
"show" : true,
|
||
"z" : 4,
|
||
"itemWidth" : 20,
|
||
"data" : [
|
||
"51周",
|
||
"52周",
|
||
"1周",
|
||
"2周"
|
||
],
|
||
"selectedMode" : true,
|
||
"orient" : "horizontal",
|
||
"itemHeight" : 14
|
||
}
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main2', {
|
||
option: option,
|
||
// recordCanvas: true
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
<script>
|
||
require([
|
||
'echarts'
|
||
], function (echarts) {
|
||
|
||
var option = {
|
||
"title": {
|
||
"text": "option传入的title"
|
||
},
|
||
"tooltip": {
|
||
"trigger": "axis"
|
||
},
|
||
"legend": {
|
||
"data": ["邮件营销", "联盟广告"]
|
||
},
|
||
"grid": {
|
||
"containLabel": true
|
||
},
|
||
"series": [{
|
||
"type": "line",
|
||
"stack": "all",
|
||
"data": [120, 132, 101, 134, 90, 230, 210],
|
||
"name": "邮件营销"
|
||
}, {
|
||
"type": "line",
|
||
"stack": "all",
|
||
"data": [220, 182, 191, 234, 290, 330, 310],
|
||
"name": "联盟广告"
|
||
}],
|
||
"yAxis": {
|
||
"type": "category",
|
||
"data": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
|
||
},
|
||
"xAxis": {
|
||
"type": "value",
|
||
},
|
||
"toolbox": {
|
||
"feature": {
|
||
"saveAsImage": {
|
||
"type": "jpeg",
|
||
"title": "保存保存"
|
||
},
|
||
"dataZoom": {
|
||
show:true
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main3', {
|
||
option: option,
|
||
// recordCanvas: true
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
<script>
|
||
require([
|
||
'echarts'
|
||
], function (echarts) {
|
||
|
||
var option = {
|
||
"xAxis": [{
|
||
"type": "category",
|
||
"name": "COLUMN_NAME",
|
||
"gridIndex": 0
|
||
}],
|
||
"yAxis": [{
|
||
"gridIndex": 0
|
||
}],
|
||
"series": [{
|
||
"type": "bar",
|
||
"stack": "COLUMN_NAME",
|
||
"xAxisIndex": 0,
|
||
"yAxisIndex": 0,
|
||
"encode": {
|
||
"x": "COLUMN_NAME",
|
||
"y": "SUB_TYPE"
|
||
}
|
||
}, {
|
||
"type": "bar",
|
||
"stack": "COLUMN_NAME",
|
||
"xAxisIndex": 0,
|
||
"yAxisIndex": 0,
|
||
"encode": {
|
||
"x": "COLUMN_NAME",
|
||
"y": "s1"
|
||
}
|
||
}],
|
||
"brush": {
|
||
"toolbox": ["rect", "polygon", "lineX", "lineY", "clear"],
|
||
"throttleType": "debounce",
|
||
"throttleDelay": 300
|
||
},
|
||
"toolbox": {
|
||
"feature": {
|
||
"saveAsImage": {
|
||
"show": true
|
||
},
|
||
"dataZoom": {
|
||
"show": true
|
||
}
|
||
},
|
||
"show": true,
|
||
"left": "40px"
|
||
},
|
||
"axisPointer": {
|
||
"show": false
|
||
},
|
||
"tooltip": {
|
||
"show": true
|
||
},
|
||
"color": ["#44bd89", "#4db7c8", "#eaad56", "#9fbd74", "#82cda4", "#ff942b", "#17988d", "#4e6783", "#bababa", "#bed38b", "#3eadb5", "#f75700", "#8f5989"],
|
||
"dataset": {
|
||
"source": [
|
||
["COLUMN_NAME", "SUB_TYPE", "s1"],
|
||
["column_name_0", 394, 394],
|
||
["column_name_1", 426.5, 426.5],
|
||
["column_name_2", 285, 285],
|
||
["column_name_3", 404, 404],
|
||
["column_name_4", 496.53846153846155, 496],
|
||
["column_name_5", 244, 244],
|
||
["column_name_6", 543, 543],
|
||
["column_name_7", 528, 528],
|
||
["column_name_8", 393, 393],
|
||
["column_name_9", 539, 539]
|
||
],
|
||
"dimensions": ["COLUMN_NAME", "SUB_TYPE", "s1"]
|
||
},
|
||
"grid": [{
|
||
"left": "2%",
|
||
"top": "8%",
|
||
"width": "90%",
|
||
"height": "90%",
|
||
"containLabel": true
|
||
}],
|
||
"dataZoom": [{
|
||
"type": "inside",
|
||
"xAxisIndex": 0,
|
||
"disabled": true
|
||
}, {
|
||
"type": "inside",
|
||
"yAxisIndex": 0,
|
||
"disabled": true
|
||
}]
|
||
}
|
||
|
||
var chart = testHelper.create(echarts, 'main4', {
|
||
option: option,
|
||
// recordCanvas: true
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
<script>
|
||
require([
|
||
'echarts'
|
||
], function (echarts) {
|
||
|
||
var option = {
|
||
title: {
|
||
text: '折线图堆叠'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
legend: {
|
||
data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
|
||
},
|
||
dataZoom: [{
|
||
type: 'slider',
|
||
xAxisIndex: 0,
|
||
start: 0,
|
||
end: 100,
|
||
filterMode: 'filter',
|
||
},{
|
||
type: 'inside',
|
||
start: 0,
|
||
end: 100,
|
||
filterMode: 'filter',
|
||
}],
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
toolbox: {
|
||
feature: {
|
||
saveAsImage: {}
|
||
}
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
data: ['周一','周二','周三','周四','周五','周六','周日']
|
||
},
|
||
yAxis: {
|
||
type: 'value'
|
||
},
|
||
series: [
|
||
{
|
||
name:'邮件营销',
|
||
type:'line',
|
||
stack: '总量',
|
||
data:[120, 132, 101, 134, 90, 230, 210]
|
||
},
|
||
{
|
||
name:'联盟广告',
|
||
type:'line',
|
||
stack: '总量',
|
||
data:[220, 182, 191, 234, 290, 330, 310]
|
||
},
|
||
{
|
||
name:'视频广告',
|
||
type:'line',
|
||
stack: '总量',
|
||
data:[150, 232, 201, 154, 190, 330, 410]
|
||
},
|
||
{
|
||
name:'直接访问',
|
||
type:'line',
|
||
stack: '总量',
|
||
data:[320, 332, 301, 334, 390, 330, 320]
|
||
},
|
||
{
|
||
name:'搜索引擎',
|
||
type:'line',
|
||
stack: '总量',
|
||
data:[820, 932, 901, 934, 1290, 1330, 1320]
|
||
}
|
||
]
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main5', {
|
||
option: option,
|
||
// recordCanvas: true
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<script>
|
||
require([
|
||
'echarts'
|
||
], function (echarts) {
|
||
|
||
var option = {
|
||
tooltip : {
|
||
trigger: 'axis',
|
||
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
||
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||
}
|
||
},
|
||
legend: {
|
||
data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
|
||
},
|
||
grid: {
|
||
left: '3%',
|
||
right: '4%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
},
|
||
xAxis : [
|
||
{
|
||
type : 'category',
|
||
data : ['周一','周二','周三','周四','周五','周六','周日']
|
||
}
|
||
],
|
||
yAxis : [
|
||
{
|
||
type : 'value'
|
||
}
|
||
],
|
||
series : [
|
||
{
|
||
name:'邮件营销',
|
||
type:'bar',
|
||
stack: '广告',
|
||
data:[120, 132, 101, 134, 90, 230, 210]
|
||
},
|
||
{
|
||
name:'联盟广告',
|
||
type:'bar',
|
||
stack: '广告',
|
||
data:[220, 182, 191, 234, 290, 330, 310]
|
||
},
|
||
{
|
||
name:'视频广告',
|
||
type:'bar',
|
||
stack: '广告',
|
||
data:[150, 232, 201, 154, 190, 330, 410]
|
||
}],
|
||
dataZoom: [
|
||
{
|
||
show: true,
|
||
filterMode: 'filter',
|
||
}
|
||
]
|
||
};
|
||
|
||
var chart = testHelper.create(echarts, 'main6', {
|
||
option: option,
|
||
// recordCanvas: true
|
||
});
|
||
});
|
||
|
||
</script>
|
||
|
||
</body>
|
||
</html> |