| <!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> |