echarts.js 一个页面如何加载多个表 我想加载两个饼图 为什么只出来一...
发布网友
发布时间：2022-04-24 01:08
共3个回答
热心网友
时间：2022-04-20 02:03
<body>
<input type="button" value="TestEcharts" onclick="showLine()" /><br />
<input type="button" value="RadarEcharts" onclick="showRadar()" />
<div id="stackbar" align="center"
style="height: 260px; width: 30%; line-height: 260px; border: 1px solid blue; padding-left: -80px;">[可视化数据图例1...]</div>
<div id="radarbar" align="center"
style="height: 260px; width: 30%; line-height: 260px; border: 1px solid green; margin-top: 10px;">[可视化数据图例2...]</div>
分开初始化，.init(div);
function showLine() {
var echartBar = echarts.init(document.getElementById("stackbar"));
var option1 = {
title:{
text:'test',
subtext:'折线图测试',
x:'center',
y:'top',
textAlign:'center'
},
legend:{
data:['ThisWeek', 'LastWeek', 'FutureWeek'],
x: 'center',
y: 'bottom'
},
tooltip:{
//show: true, 默认添加tip即显示
trigger: 'item',
axisPointer:{
show: true,
type : 'cross',
lineStyle: {
type : 'dashed',
width : 1
}
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel:{
textStyle:{
fontSize: 8
}
}
},
yAxis: {
type: 'value',
axisLabel:{
textStyle:{
fontSize: 5
}
}
},
series: [{
name: 'ThisWeek',
type: 'line',
//xAxisIndex: 1,
data: [820, 932, 901, 934, 1290, 1330, 1320]
},
{
name: 'LastWeek',
type: 'line',
data: [920, 832, 801, 834, 1090, 1130, 1120]
},
{
name: 'FutureWeek',
type: 'bar',
data: [520, 432, 401, 434, 690, 730, 720]
}
]
};
echartBar.hideLoading();
echartBar.setOption(option1);
}
也可以写在一个js函数中，如：
var echartBar = echarts.init(document.getElementById("stackbar"));
echartBar.showLoading();
var echartPie = echarts.init(document.getElementById("pie"));
echartPie.showLoading();
$.ajax({
url: "getFVIData.do",
type: 'GET',
cache: false,
dataType: 'json',
success: function (data) {
var option1 = { ......
热心网友
时间：2022-04-20 03:21
echarts是一个很有用，很炫，也很强大的插件，这里用模块化的方法来实现同一个页面引用多个不同图表。
1、找打文件，下载到本机。
2、把文件名改为echarts（也可以不用改，我是方便自己用才改的），然后放到自己项目里的js文件里（这里也可以和js平级，看自已的喜好）。
3、在html文件里用script引用echarts文件，html里引用成功后，打开js文件或script标签配置文件路径：注意这个路径要和刚刚引入的echarts文件路径一致，目录到js文件上一级就可以了。
4、这里就是我们根据自己需要用的图表进加载相应的文件就是你要什么图就是加载什么图，比如饼图就是pie,柱状图就是bar，地图就是map等。
5、注意这个步骤：两个红框框起来的是自己写的方法的引用，传的参数 ec 就是代表我们在实例化echarts.init() 时 的 "echarts"。
6、我们把每个图表都用一个方法表示，就是每个图表的具体设置。
7、最后全放入刚刚的那个“McChart”方法里
8、最终显示效果
热心网友
时间：2022-04-20 04:56
思路是：1.定义两个div，每个div有一个id，两个id不可以相同
<div id="a" style="width:300px;height:200px"></div>
<div id="b" style="width:300px;height:200px"></div>
2.初始化实例
var myChartOne = echarts.init(document.getElementById('a'));
var myChartTwo = echarts.init(document.getElementById('b'));
3.配置各自的图表数据
var myChartOneOption = { //这里是myChartOne配置项与数据}；
var myChartTwoOption = { //这里是myChartTwo 配置项与数据};
4.使用各自的配置项显示数据，记得要对应上
myChartOne.setOption(myChartOneOption );
myChartTwo.setOption(myChartTwoOption );
这样就可以显示出来两个了，不过记得给两个div定义高宽，还有引用echarts.js
