ECharts
@Kener-林峰 你好，想跟你请教个问题：今天做了个东西，代码如下，可是为什么第二个div内容就是不显示呢，单个的反而可以
<head runat="server">
<meta charset="utf-8">
<title>示例</title>
<script src="../lib/echarts-master/doc/example/www/js/esl.js" type="text/javascript"></script>
<script src="../lib/jquery/jquery-1.8.2.min.js" type="text/javascript"></script>
<link href="../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
<link href="../lib/ManpusUI/css/m.suggest.css" rel="stylesheet" type="text/css" />
<script src="../lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script>
<script src="../lib/js/ManpsTool.js" type="text/javascript"></script>
</head>
<body>
<!--Step:2 Prepare a dom for ECharts which (must) has size (width & hight)-->
<!--Step:2 为ECharts准备一个具备大小（宽高）的Dom-->
<div id="tab1" style="width: 98%;overflow: hidden; border: 1px solid #A3C0E8;">
<div title="折线图" style="height: 400px; width: 100%">
<div id="main" style="min-width:95%; height:400px; margin: 0 auto"></div>
</div>
<div title="组合图" style="height: 400px; width: 100%">
<div id="mainMap" style="min-width:95%; height:400px; margin: 0 auto"></div>
</div>
</div>
<script type="text/javascript">
$(function () {
//initComboBoxText();
$("#tab1").ligerTab({ onBeforeSelectTabItem: function (tabid) {
//alert('onBeforeSelectTabItem' + tabid);
}, onAfterSelectTabItem: function (tabid) {
//alert('onAfterSelectTabItem' + tabid);
}
});
mytest();
});
function mytest() {
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths: {
echarts: './js/echarts',
'echarts/chart/bar': './js/echarts-map',
'echarts/chart/line': './js/echarts-map',
'echarts/chart/map': './js/echarts-map'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line',
'echarts/chart/map',
'echarts/chart/pie',
],
function (ec) {
//--- 折柱 ---
var myChart = ec.init(document.getElementById('main'));
myChart.setOption({
tooltip: {
trigger: 'axis'
},
toolbox: {
show: true,
y: 'bottom',
feature: {
mark: true,
dataView: { readOnly: false },
magicType: ['line', 'bar'],
restore: true,
saveAsImage: true
}
},
calculable: true,
legend: {
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
},
xAxis: [
{
type: 'category',
splitLine: { show: false },
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value',
position: 'right',
splitArea: { show: true }
}
],
series: [
{
name: '直接访问',
type: 'bar',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '邮件营销',
type: 'bar',
tooltip: { trigger: 'item' },
stack: '广告',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'bar',
tooltip: { trigger: 'item' },
stack: '广告',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'bar',
tooltip: { trigger: 'item' },
stack: '广告',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '搜索引擎',
type: 'line',
data: [862, 1018, 964, 1026, 1679, 1600, 1570]
},
{
name: '搜索引擎细分',
type: 'pie',
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
center: [160, 130],
radius: [0, 50],
itemStyle: {
normal: {
labelLine: {
length: 20
}
}
},
data: [
{ value: 1048, name: '百度' },
{ value: 251, name: '谷歌' },
{ value: 147, name: '必应' },
{ value: 102, name: '其他' }
]
}
]
});
// --- 地图 ---
var myChart2 = ec.init(document.getElementById('mainMap'));
myChart2.setOption({
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [
{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode: 'multiple',
itemStyle: {
normal: { label: { show: true} },
emphasis: { label: { show: true} }
},
data: [
{ name: '广东', selected: true }
]
}
]
});
}
);
}
</script>
</body>
paths: {
echarts: './js/echarts', // 改成下面那个
'echarts/chart/bar': './js/echarts-map',
'echarts/chart/line': './js/echarts-map',
'echarts/chart/map': './js/echarts-map'
}
});