| <!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/esl.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> |
