柱状图有没有例子，官网的示例数据是随机，我不会改，或者帮忙写一下数据写入那里，这个是我同学帮忙改的，数据随机的能出来，自己的数据写不进去
@{
ViewBag.Title = "能耗查询";
}
@using System.Configuration;
<div id="page-content" class="home-page">
<div class="container">
<div class="row" style="border:1px solid #dddddd;">
<div id="map" style="margin:0 auto;width: 100%;height: 600px">
</div>
</div>
</div>
</div>
<link href="~/bootstrap3/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/bootstrap3/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/css/map.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/bootstrap3/js/bootstrap.min.js"></script>
<script src="~/Map/js/include-web.js"></script>
<script include="echarts,bootstrap-css" src="~/Map/dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
var map, resultLayer, url = "@ConfigurationManager.ConnectionStrings["base_url"].ConnectionString";
var dataUrl = "http://localhost:8090/iserver/services/data-Map_Campus/rest/data";
map = L.map('map', {
preferCanvas: true,
crs: L.CRS.NonEarthCRS({
bounds: L.bounds([506077.42, 4340213.02], [508570.72, 4342564.64]),
origin: L.point(506077.42, 4342564.64)
}),
center: [4341388.83, 508524.07],
maxzoom: 5,
zoom: 1
});
L.supermap.tiledMapLayer(url).addTo(map);
option = {
legend: {
data: ['消耗电量', '电量'],
align: 'left'
},
toolbox: {
feature: {
magicType: {
type: ['stack', 'tiled']
},
saveAsImage: {
pixelRatio: 2
}
}
},
tooltip: {},
xAxis: {
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
silent: false,
splitLine: {
show: false
}
},
yAxis: {},
series: [{
name: 'bar',
type: 'bar',
animationDelay: function (idx) {
return idx * 10;
}
}, {
name: 'bar2',
type: 'bar',
animationDelay: function (idx) {
return idx * 10 + 100;
}
}],
animationEasing: 'elasticOut',
animationDelayUpdate: function (idx) {
return idx * 5;
}
};
var div = L.DomUtil.create('div');
var chart = echarts.init(div, '', {
width: 600,
height: 250
});
chart.setOption(option);
var control = L.control({ position: 'bottomright' });
control.onAdd = function (map) {
return chart.getDom();
};
control.addTo(map);
query();
function query() {
clearLayer();
initThemeLayer();
//-----------------------------------------------------------------------------
function initThemeLayer() {
themeLayer = L.supermap.rangeThemeLayer("ThemeLayer", {
// 开启 hover 高亮效果
isHoverAble: true,
opacity: 0.4
}).addTo(map);
themeLayer.style = new SuperMap.ThemeStyle({
shadowBlur: 6,//阴影模糊度
shadowColor: "#000000",//阴影颜色
fillColor: "#FFFF00"//填充颜色
});
// hover 高亮样式
themeLayer.highlightStyle = new SuperMap.ThemeStyle({
stroke: true,//是否描边
strokeWidth: 4,//边宽度
strokeColor: 'blue',//边界颜色
fillColor: "#FFD306",//填充颜色
fillOpacity: 1//透明度
});
// 用于单值专题图的属性字段名称
themeLayer.themeField = "SMID";
// 风格数组，设定值对应的样式
themeLayer.styleGroups = [{
start: 0,
end: 50,
style: {
color: '#00EC00'
}
}, {
start: 50,
end: 100,
style: {
color: '#00DB00'
}
}, {
start: 100,
end: 200,
style: {
color: '#00BB00'
}
}, {
start: 200,
end: 300,
style: {
color: '#00A600'
}
}
];
themeLayer.on('mouseover', highLightLayer);
addThemeFeatures();
}
function addThemeFeatures() {
var getFeatureBySQLParams = new SuperMap.GetFeaturesBySQLParameters({
queryParameter: new SuperMap.FilterParameter({
name: "building@Campus",
attributeFilter: "SMID >=0"
}),
toIndex: 1000,
fromIndex: 0,
datasetNames: ["Campus:building"]
});
L.supermap.featureService(dataUrl)
.getFeaturesBySQL(getFeatureBySQLParams, processComplete, SuperMap.DataFormat.ISERVER);
}
function processComplete(serviceResult) {
var result = serviceResult.result;
if (result && result.features) {
themeLayer.addFeatures(result.features);
}
//显示信息
//initInfoView();
}
function highLightLayer(e) {
if (e.target && e.target.refDataID) {
var fea = themeLayer.getFeatureById(e.target.refDataID);
if (fea) {
var city = fea.attributes.BUILDINGNA;
var data1 = [];
var data2 = [];
for (var i = 0; i < 12; i++) {
var data = Math.random().toFixed(2);
data1.push(data);
data2.push(data * (Math.random() + 1.5));
}
chart.setOption({
title: {
text: city,
subtext: '单位：千瓦'
},
series: [
{
name: '消耗电量',
data: data1
}
//,
//{
// name: '电量',
// data: data2
//}
]
});
}
} else if (infoView) {
infoView.remove();
}
}
//-----------------------------------------------------------------------------
}
function clearLayer() {
if (resultLayer) {
resultLayer.removeFrom(map);
}
}
L.DomEvent
.on(div, 'mouseover', function () {
map.dragging.disable();
map.scrollWheelZoom.disable();
map.doubleClickZoom.disable();
})
.on(div, 'mouseout', function () {
map.dragging.enable();
map.scrollWheelZoom.enable();
map.doubleClickZoom.enable();
})
</script>
