echarts柱状图问题

0 投票

柱状图有没有例子,官网的示例数据是随机,我不会改,或者帮忙写一下数据写入那里,这个是我同学帮忙改的,数据随机的能出来,自己的数据写不进去

@{
    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>

6月 12 分类:  63次浏览 | 用户: asd123456 (1 分)

1个回答

0 投票

echarts的参数设置请参考echarts的帮助文档https://echarts.baidu.com/api.html#echarts,柱状图echarts官方有范例https://echarts.baidu.com/examples/#chart-type-bar

6月 12 用户: 于浩 名扬四海 (4,171 分)
没找到呀,示例里也都是写死的数据
...