在Android中webview加载多个echart图表慢echarts category配置项内容和展示
在一个webview加载9个echart图表，非常慢 将近10s 我已经把所有文件都放在本地了 没涉及到网络，是由于什么原因呢？
配置项如下
<!DOCTYPE html>
<html style="height:100%">
<head>
<meta charset="utf-8">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
.modal .modal-dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
}
</style>
</head>
<body style="height:100%; background-color:#404a59;">
<table width="100%" height="100%" border="0">
<tr height="33%">
<td width="33%">
<div id="main6" style="width: 100%;height:100%;">
</div>
</td>
<td width="33%">
<div id="main7" style="width: 100%;height:100%;">
</div>
</td>
<td width="33%">
<div id="main8" style="width: 100%;height:100%;">
</div>
</td>
</tr>
<tr height="33%">
<td width="33%">
<div id="main3" style="width: 100%;height:100%;">
</div>
</td>
<td width="33%">
<div id="main4" style="width: 100%;height:100%;">
</div>
</td>
<td width="33%">
<div id="main5" style="width: 100%;height:100%;">
</div>
</td>
</tr>
<tr height="33%">
<td width="33%">
<div id="main" style="width: 100%;height:100%;">
</div>
</td>
<td width="33%">
<div id="main1" style="width: 100%;height:100%;">
</div>
</td>
<td width="33%">
<div id="main2" style="width: 100%;height:100%;">
</div>
</td>
</tr>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document" style="width: 1000px; height:650px;">
<div class="modal-content" style="text-align:center; background:#161627; ">
<div id="modal1" class="modal-body" style="width: 900px; height:600px; margin: auto;"></div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
</table>
<script type="text/javascript">
var totalData =
["bubble","bar","pie","bubble","radar","bar","radar","pie","bar","radar","pie","bar"]
var totalType = eval(totalData);
var data31 = [
['06:00', 70 ,7 ],
['06:40', 2 ,1 ],
['07:00', 38 ,3 ],
['07:20', 290 ,12 ],
['07:40', 154 ,17 ],
['08:00', 70 ,12 ],
['08:20', 446 ,34 ],
['08:40', 590 ,80 ],
['09:00', 1434 ,135 ],
['09:20', 2530 ,253 ],
['09:40', 2324 ,208 ],
['10:00', 2284 ,255 ],
['10:20', 5298 ,373 ],
['10:40', 5212 ,371 ],
['11:00', 4920 ,341 ],
['11:20', 3108 ,362 ],
['11:40', 3272 ,355 ],
['12:00', 3638 ,278 ],
['12:20', 3126 ,273 ],
['12:40', 2138 ,238 ],
['13:00', 4054 ,317 ],
['13:20', 4194 ,312 ],
['13:40', 2736 ,272 ],
['14:00', 3230 ,374 ],
['14:20', 3706 ,393 ],
['14:40', 14876 ,359 ],
['15:00', 4614 ,442 ],
['15:20', 5860 ,519 ],
['15:40', 6966 ,637 ],
['16:00', 6130 ,578 ],
['16:20', 8598 ,691 ],
['16:40', 7548 ,669 ],
['17:00', 8794 ,730 ],
['17:20', 10840 ,925 ],
['17:40', 11724 ,940 ],
['18:00', 12810 ,869 ],
['18:20', 13730 ,1092],
['18:40', 14680 ,1203],
['19:00', 17146 ,1296],
['19:20', 27664 ,2207],
['19:40', 55242 ,4575],
['20:00', 73624 ,6628],
['20:20', 24 ,2 ]
];
var data32 = [
['06:00',24,3],
['06:20',8,2],
['06:40',158,12],
['07:00',254,22],
['07:20',478,51],
['07:40',882,89],
['08:00',1598,193],
['08:20',4744,314],
['08:40',5056,492],
['09:00',8126,763],
['09:20',15334,1608],
['09:40',19012,1854],
['10:00',29874,2355],
['10:20',31880,2863],
['10:40',30158,2796],
['11:00',28192,2645],
['11:20',33488,3008],
['11:40',31422,2849],
['12:00',31012,2745],
['12:20',31320,3054],
['12:40',31188,2773],
['13:00',26502,2415],
['13:20',33620,2724],
['13:40',32902,2419],
['14:00',32502,2627],
['14:20',35742,3212],
['14:40',39032,3489],
['15:00',41132,3512],
['15:20',54918,4349],
['15:40',53140,4763],
['16:00',56648,5163],
['16:20',79206,6347],
['16:40',83684,7089],
['17:00',87356,7605],
['17:20',115840,9578],
['17:40',116004,10320],
['18:00',137854,11379],
['18:20',151834,12573],
['18:40',136518,11750],
['19:00',144222,11645],
['19:20',177774,14952],
['19:40',210182,16842],
['20:00',214542,16435]
];
var data33 = [
['08:00',272,49],
['08:20',1024,191],
['08:40',2414,344],
['09:00',10688,1630],
['09:20',33848,3503],
['09:40',38084,4473],
['10:00',52110,6451],
['10:20',85198,9220],
['10:40',99632,10425],
['11:00',103730,10438],
['11:20',126320,11829],
['11:40',111926,10442],
['12:00',107972,9936],
['12:20',119010,11352],
['12:40',127654,11264],
['13:00',131562,10883],
['13:20',156374,12707],
['13:40',146688,12264],
['14:00',135062,11733],
['14:20',159352,14107],
['14:40',159298,13409],
['15:00',162330,14214],
['15:20',202412,16997],
['15:40',193234,16248],
['16:00',177280,15044],
['16:20',192694,16730],
['16:40',175682,15469],
['17:00',155638,14097],
['17:20',180468,16366],
['17:40',173814,15113],
['18:00',163672,14076],
['18:20',187274,15490],
['18:40',169618,14331],
['19:00',139474,12930],
['19:20',167184,15982],
['19:40',167350,15018],
['20:00',157832,14942],
['20:20',184264,17588],
['20:40',185806,17028],
['21:00',165972,15075],
['21:20',188646,14623],
['21:40',154732,11850],
['22:00',135536,10203],
['22:20',137924,9313],
['22:40',134306,7701],
['23:00',100402,5735]
];
var schema3 = [
{name: '时间', index: 0, text: '时间'},
{name: '销量', index: 1, text: '销量'},
{name: '注数', index: 2, text: '注数'}
];
var itemStyle3 = {
normal: {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
};
var data1 = [
[55,9,56,18,6,1],
[25,11,21,34,9,2],
[56,7,63,14,5,3],
[33,7,29,16,6,4],
[42,24,44,40,16,5],
[82,58,90,68,33,6],
[74,49,77,48,27,7],
[78,55,80,59,29,8],
[267,216,280,108,64,9],
[185,127,216,61,27,10],
[39,19,38,31,15,11],
[41,11,40,21,7,12],
[64,38,74,46,22,13],
[108,79,120,75,41,14],
[108,63,116,44,26,15],
[33,6,29,13,5,16],
[94,66,110,62,31,17],
[186,142,192,93,79,18],
[57,31,54,32,14,19],
[22,8,17,23,10,20],
[39,15,36,29,13,21],
[94,69,114,73,39,22],
[99,73,110,76,48,23],
[31,12,30,32,16,24],
[42,27,43,22,25],
[154,117,157,92,58,26],
[234,185,230,123,69,27],
[160,120,186,91,50,28],
[134,96,165,83,41,29],
[52,24,60,50,21,30],
[46,5,49,10,6,31]
];
var data2 = [
[26,27,1.163,27,13,1],
[85,71,1.195,60,8,2],
[78,74,1.363,37,7,3],
[21,36,0.634,40,9,4],
[41,46,0.915,81,13,5],
[56,69,1.067,92,16,6],
[64,28,0.924,51,2,7],
[55,74,1.236,75,26,8],
[76,113,1.237,114,27,9],
[91,1.041,56,40,10],
[84,0.964,25,11,11],
[64,0.862,58,23,12],
[70,1.198,65,36,13],
[77,2.549,64,16,14],
[109,0.996,74,29,15],
[73,0.905,51,34,16],
[54,0.592,53,12,17],
[51,0.811,65,19,18],
[91,1.374,43,18,19],
[73,2.787,44,19,20],
[73,76,0.717,31,20,21],
[84,140,2.238,68,18,22],
[93,104,1.165,53,7,23],
[99,227,3.97,55,15,24],
[146,139,1.094,40,17,25],
[113,137,1.481,48,15,26],
[81,62,1.619,26,3,27],
[56,68,1.336,37,9,28],
[82,174,3.29,0,13,29],
[106,188,3.628,101,16,30],
[118,0,1.383,76,11,31]
];
var data3 = [
[91,45,125,0.82,34,1],
[65,27,78,0.86,45,2],
[83,60,84,1.09,73,3],
[109,81,121,1.28,68,4],
[106,77,114,1.07,55,5],
[109,81,121,1.28,68,6],
[106,77,114,1.07,55,7],
[89,65,78,0.86,51,8],
[53,33,47,0.64,50,9],
[80,55,80,1.01,75,10],
[117,81,124,1.03,45,11],
[99,71,142,1.1,62,12],
[95,69,130,1.28,74,13],
[116,87,131,1.47,84,14],
[108,80,121,1.3,85,15],
[134,83,167,1.16,57,16],
[79,43,107,1.05,59,17],
[71,46,89,0.86,64,18],
[97,71,113,1.17,88,19],
[84,57,91,0.85,55,20],
[87,63,101,0.9,56,21],
[104,77,119,1.09,73,22],
[87,62,100,1,72,23],
[168,128,172,1.49,97,24],
[65,45,51,0.74,39,25],
[39,24,38,0.61,47,26],
[39,24,39,0.59,50,27],
[93,68,96,1.05,79,28],
[188,143,197,1.66,99,29],
[174,131,174,1.55,108,30],
[187,143,201,1.39,89,31]
];
var lineStyle = {
normal: {
width: 1,
opacity: 0.5
}
};
var myChart = echarts.init(document.getElementById('main'));
var myChart1 = echarts.init(document.getElementById('main1'));
var myChart2 = echarts.init(document.getElementById('main2'));
var myChart3 = echarts.init(document.getElementById('main3'));
var myChart4 = echarts.init(document.getElementById('main4'));
var myChart5 = echarts.init(document.getElementById('main5'));
var myChart6 = echarts.init(document.getElementById('main6'));
var myChart7 = echarts.init(document.getElementById('main7'));
var myChart8 = echarts.init(document.getElementById('main8'));
var myCanvans = [
myChart,
myChart1,
myChart2,
myChart3,
myChart4,
myChart5,
myChart6,
myChart7,
myChart8
];
createChart(totalData, myCanvans)
var modalChart;
var option;
var option1;
var option2;
var option3
function bubbleChart(mychart){
mychart.setOption(option1 = {
title: {
text: '市场信息',
left: 'center',
textStyle: {
color: '#eee'
}
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
myTool1: {
show: true,
title: 'Show',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
if (modalChart!=null) {
modalChart.dispose();
}
modalChart = echarts.init(document.getElementById('modal1'));
modalChart.setOption(option1);
$("#myModal").modal('show');
}
},
myTool2: {
show: true,
title: 'Hide',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
if (modalChart!=null) {
modalChart.dispose();
}
$("#myModal").modal('hide');
}
}
},
iconStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#7092BE' // 0% 处的颜色
}, {
offset: 1, color: '#7092BE' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
},
color: [
'#63BB67', '#D48265', '#1C6CCF'
],
legend: {
top:'bottom',
left: 'right',
orient: 'vertical',
data: ['3D', '双色球', '快乐十分'],
textStyle: {
color: '#fff',
fontSize: 16
}
},
grid: {
x: '10%',
x2: 150,
y: '18%',
y2: '10%'
},
tooltip: {
padding: 10,
backgroundColor: '#222',
borderColor: '#777',
borderWidth: 1,
formatter: function (obj) {
var value = obj.value;
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+ obj.seriesName + ' ' + value[0]
+ '</div>'
+ schema3[1].text + '：' + value[1] + '<br>'
+ schema3[2].text + '：' + value[2] + '<br>';
}
},
xAxis: {
type: 'category',
data: ['05:00', '05:20', '05:40', '06:00', '06:20', '06:40', '07:00', '07:20', '07:40', '08:00'
, '08:20', '08:40', '09:00', '09:20', '09:40', '10:00', '10:20', '10:40', '11:00'
, '11:20', '11:40', '12:00', '12:20', '12:40', '13:00', '13:20', '13:40', '14:00'
, '14:20', '14:40', '15:00', '15:20', '15:40', '16:00', '16:20', '16:40', '17:00'
, '17:20', '17:40', '18:00', '18:20', '18:40', '19:00', '19:20', '19:40', '20:00'
, '20:20', '20:40', '21:00', '21:20', '21:40', '22:00', '22:20', '22:40', '23:00'
],
name: '时间',
nameGap: 16,
nameTextStyle: {
color: '#fff',
fontSize: 14
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#eee'
}
}
},
yAxis: {
type: 'value',
name: '销量',
nameLocation: 'end',
nameGap: 20,
nameTextStyle: {
color: '#fff',
fontSize: 16
},
axisLine: {
lineStyle: {
color: '#eee'
}
},
splitLine: {
show: false
}
},
visualMap: [
{
left: 'right',
top: '10%',
dimension: 2,
min: 0,
max: 50000,
itemWidth: 30,
itemHeight: 120,
calculable: true,
precision: 0.1,
text: ['圆形大小：注数'],
textGap: 30,
textStyle: {
color: '#fff'
},
inRange: {
symbolSize: [10, 70]
},
outOfRange: {
symbolSize: [10, 70],
color: ['rgba(255,255,255,.2)']
},
controller: {
inRange: {
color: ['#749F83']
},
outOfRange: {
color: ['#444']
}
}
}
],
series: [
{
name: '3D',
type: 'scatter',
itemStyle: itemStyle3,
data: data31
},
{
name: '双色球',
type: 'scatter',
itemStyle: itemStyle3,
data: data32
},
{
name: '快乐十分',
type: 'scatter',
itemStyle: itemStyle3,
data: data33
}
]
});
}
function radarChart(mychart) {
mychart.setOption(option = {
title: {
text: '投注金额对比分析',
left: 'center',
textStyle: {
color: '#eee'
}
},
legend: {
bottom: 5,
data: ['双色球', '3D', '快乐十分'],
itemGap: 20,
textStyle: {
color: '#fff',
fontSize: 14
},
selectedMode: 'single'
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
myTool1: {
show: true,
title: 'Show',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
if (modalChart!=null) {
modalChart.dispose();
}
modalChart = echarts.init(document.getElementById('modal1'));
modalChart.setOption(option);
$("#myModal").modal('show');
}
},
myTool2: {
show: true,
title: 'Hide',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
if (modalChart!=null) {
modalChart.dispose();
}
$("#myModal").modal('hide');
}
}
},
iconStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#7092BE' // 0% 处的颜色
}, {
offset: 1, color: '#7092BE' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
},
radar: {
indicator: [
{name: '2', max: 300},
{name: '2-10', max: 250},
{name: '10-50', max: 300},
{name: '50-100', max: 250},
{name: '>100', max: 200}
],
shape: 'circle',
splitNumber: 5,
name: {
textStyle: {
color: 'rgb(238, 197, 102)'
}
},
splitLine: {
lineStyle: {
color: [
'rgba(238, 197, 102, 0.1)', 'rgba(238, 197, 102, 0.2)',
'rgba(238, 197, 102, 0.4)', 'rgba(238, 197, 102, 0.6)',
'rgba(238, 197, 102, 0.8)', 'rgba(238, 197, 102, 1)'
].reverse()
}
},
splitArea: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(238, 197, 102, 0.5)'
}
}
},
series: [
{
name: '双色球',
type: 'radar',
lineStyle: lineStyle,
data: data1,
symbol: 'none',
itemStyle: {
normal: {
color: '#B3E4A1'
}
},
areaStyle: {
normal: {
opacity: 0.1
}
}
},
{
name: '3D',
type: 'radar',
lineStyle: lineStyle,
data: data2,
symbol: 'none',
itemStyle: {
normal: {
color: '#F9713C'
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
},
{
name: '快乐十分',
type: 'radar',
lineStyle: lineStyle,
data: data3,
symbol: 'none',
itemStyle: {
normal: {
color: 'rgb(238, 197, 102)'
}
},
areaStyle: {
normal: {
opacity: 0.05
}
}
}
]
});
}
function pieChart(mychart) {
mychart.setOption(option2 = {
title: {
text: 'KPI',
left: 'center',
textStyle: {
color: '#eee'
}
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:['站点总数','达标站点'],
textStyle: {
color: '#fff',
fontSize: 16
}
},
color: [
'#D48265', '#91C7AE'
],
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
myTool1: {
show: true,
title: 'Show',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
if (modalChart!=null) {
modalChart.dispose();
}
modalChart = echarts.init(document.getElementById('modal1'));
modalChart.setOption(option2);
$("#myModal").modal('show');
}
},
myTool2: {
show: true,
title: 'Hide',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
if (modalChart!=null) {
modalChart.dispose();
}
$("#myModal").modal('hide');
}
}
},
iconStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#7092BE' // 0% 处的颜色
}, {
offset: 1, color: '#7092BE' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
},
series: [
{
name:'KPI',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:60, name:'站点总数'},
{value:40, name:'达标站点'}
]
}
]
});
}
// function lineChart(mychart) {
// mychart.setOption(option = {
// backgroundColor: '#404a59',
// tooltip : {
// trigger: 'axis',
// axisPointer: {
// type: 'cross',
// label: {
// backgroundColor: '#6a7985'
// }
// }
// },
// legend: {
// data: lineLegend,
// textStyle: {
// color: '#fff',
// fontSize: 16
// }
// },
// grid: {
// left: '3%',
// right: '4%',
// bottom: '3%',
// containLabel: true
// },
// xAxis : [
// {
// type : 'category',
// boundaryGap : false,
// data : weekXAxis
// }
// ],
// yAxis : [
// {
// type : 'value'
// }
// ],
// series : [
// {
// name:'邮件营销',
// type:'line',
// stack: '总量',
// areaStyle: {normal: {}},
// data:[120, 132, 101, 134, 90, 230, 210]
// },
// {
// name:'联盟广告',
// type:'line',
// stack: '总量',
// areaStyle: {normal: {}},
// data:[220, 182, 191, 234, 290, 330, 310]
// },
// {
// name:'视频广告',
// type:'line',
// stack: '总量',
// areaStyle: {normal: {}},
// data:[150, 232, 201, 154, 190, 330, 410]
// },
// {
// name:'直接访问',
// type:'line',
// stack: '总量',
// areaStyle: {normal: {}},
// data:[320, 332, 301, 334, 390, 330, 320]
// },
// {
// name:'搜索引擎',
// type:'line',
// stack: '总量',
// label: {
// normal: {
// show: true,
// position: 'top'
// }
// },
// areaStyle: {normal: {}},
// data:[820, 932, 901, 934, 1290, 1330, 1320]
// }
// ]
// });
// }
function barChart(mychart) {
mychart.setOption(option3 = {
title: {
text: '销量统计图',
left: 'center',
textStyle: {
color: '#eee'
}
},
tooltip : {
trigger: 'axis',
axisPointer : { // ظ�뗡ָʾǷ��ظ�뗡����ԐЧ
type : 'shadow'
}
},
legend: {
y: 'bottom',
data:['双色球','快乐十分','3D','七乐彩','时时彩','即开票'],
textStyle: {
color: '#fff',
fontSize: 16
}
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
myTool1: {
show: true,
title: 'Show',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
if (modalChart!=null) {
modalChart.dispose();
}
modalChart = echarts.init(document.getElementById('modal1'));
modalChart.setOption(option3);
$("#myModal").modal('show');
}
},
myTool2: {
show: true,
title: 'Hide',
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
onclick: function (){
if (modalChart!=null) {
modalChart.dispose();
}
$("#myModal").modal('hide');
}
}
},
iconStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#7092BE' // 0% 处的颜色
}, {
offset: 1, color: '#7092BE' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
}
}
}
},
color: [
'#749F83', '#2067C1','#D48265', '#91C7AE', '#61A0A8', '#2F4554'
],
grid: {
left: '3%',
right: '4%',
bottom: '8%',
containLabel: true
},
xAxis : [
{
type : 'category',
axisLine: {
lineStyle: {
color: '#eee'
}
},
data : ['一月','二月','三月','四月','五月','六月']
}
],
yAxis : [
{
type : 'value',
axisLine: {
lineStyle: {
color: '#eee'
}
}
}
],
series : [
{
name:'双色球',
type:'bar',
stack: 'now',
data:[4100, 6000, 5300, 5600, 5800, 6200]
},
{
name:'快乐十分',
type:'bar',
stack: 'now',
data:[16100, 24000, 20300, 20600, 20800, 24200]
},
{
name:'3D',
type:'bar',
stack: 'now',
data:[1200, 1300, 1100, 1500, 1200, 1300]
},
{
name:'七乐彩',
type:'bar',
stack: 'now',
data:[80, 90, 61, 56, 70, 90]
},
{
name:'时时彩',
type:'bar',
stack: 'now',
data:[5, 6, 4, 3, 5, 7]
},
{
name:'即开票',
type:'bar',
stack: 'now',
data:[1500, 2000, 1600, 1700, 1800, 1900],
},
{
name:'双色球',
type:'bar',
stack: 'last',
data:[4000, 5900, 5200, 5500, 5700, 6000]
},
{
name:'快乐十分',
type:'bar',
stack: 'last',
data:[15100, 23500, 20000, 19000, 20100, 21200]
},
{
name:'3D',
type:'bar',
stack: 'last',
data:[1100, 1200, 1000, 1400, 1100, 1200]
},
{
name:'七乐彩',
type:'bar',
stack: 'last',
data:[86, 92, 66, 56, 78, 92]
},
{
name:'时时彩',
type:'bar',
stack: 'last',
data:[14, 16, 14, 13, 15, 17]
},
{
name:'即开票',
type:'bar',
stack: 'last',
data:[1500, 2000, 1600, 1700, 1800, 1900],
}
]
});
}
function createChart(chartKind, dataArray){
for (var i = 0; i < chartKind.length; i++) {
switch (chartKind[i]) {
case 'radar':
doChart('radar', dataArray[i])
break;
case 'pie':
doChart('pie', dataArray[i])
break;
case 'bar':
doChart('bar', dataArray[i])
break;
case 'bubble':
doChart('bubble', dataArray[i])
break;
default:
}
}
}
function doChart(chartKind, mychart){
switch (chartKind) {
case 'radar':
radarChart(mychart)
break;
case 'pie':
pieChart(mychart)
break;
case 'bar':
barChart(mychart)
break;
case 'bubble':
bubbleChart(mychart)
break;
default:
}
}
</script>
</body>
</html>
截图如下
