如何将echats图表放入一个自定义的弹出窗口中
//弹出框用easyUI做的，柱状图用echats做的 。看看对你有用不？
<div id="div_AddView" class="easyui-window" closed="true">
<div id="column" style="width: 1000px; height: 550px;display:none ;"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
init_datagrid();//初始化表
init_window();
data=[{name:"南京",hjmj:"26",kq:"30",td:"35",gd:"20",ld:"10",cd:"10",yd:"10",jz:"10",qt:"10" },
{name:"徐州",hjmj:"21",kq:"12",td:"30",gd:"20",ld:"10",cd:"10",yd:"10",jz:"10",qt:"10" },
{name:"苏州",hjmj:"4",kq:"",td:"3",gd:"20",ld:"10",cd:"10",yd:"10",jz:"10",qt:"10" }]
var xData = [];
var datas = [];
var WEIGHT = [];
var GROSSWEIGHT = [];
for (var i = 0; i < data.length; i++) {//将json格式转换为Echarts的数组格式
xData.push(data[i].name || ",");
datas.push(data[i].hjmj || ",");
WEIGHT.push(data[i].kq || ",");
GROSSWEIGHT.push(data[i].td || ",");
}
var chart = document.getElementById('column');
var echart = echarts.init(chart);
var option = {
title: {
padding:50,
text: '江苏省登记统计数'
},
grid: {
x: 100,
y: 100,
borderWidth: 1
},
tooltip: {
trigger: 'axis'
},
legend: {
padding: 50,
data: ['在建矿山','生产矿山','废弃矿山'],
orient: 'horizontal'
},
calculable: false,
xAxis: [
{
type: 'category',
data: xData
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '在建矿山',
type: 'bar',
data: datas
},
{
name: '生产矿山',
type:'bar',
data: WEIGHT
},
{
name: '废弃矿山',
type:'bar',
data: GROSSWEIGHT
},
]
};
echart.setOption(option);
function eConsole(param) {
console.log(param);
}
echart.on("click", eConsole);
});
function init_window() {
var width = 800;
var height = 500;
var top = (document.body.clientHeight - height) / 2;
var left = (document.body.clientWidth - width) / 2;
win_add = $("#div_AddView").window({
closed: true,
width: width,
height: height,
top: top,
left: left,
// modal: true,
collapsible: false,
minimizable: false,
maximizable: false,
});
}
function AddProject() {//点击事件，点击弹出Windows框，显示柱状图
win_add.window('setTitle', '区域附件详情');
win_add.window('open');
xianshi();
}
function xianshi() {
$("#column").show();
$("#data").hide();
}
如果在创建多个图表的时候，发现只创建了一个或者部分图表，说明出现了错误，错误的原因分析如下所示：
1、jQuery.js的版本是否和highchart.js版本一直；
2、highchart.js是不是不支持初始化图表内的某些属性值，简言之就是highchart.js的版本不对。
3、放置图表的div容器不存在或者id写错。
