Echart获取后台数据渲染到map,bar

本文介绍了在数据处理中遇到的问题,如何使用Echart代替Highchart来渲染中国地图,同时探讨了Highchart的异步加载数据在地图上的显示。由于Highmaps与Highcharts的冲突,选择了Echart进行地图展示,并简要提及前端静态数据的处理。
摘要由CSDN通过智能技术生成

1一些小感受

这几天一直在学习数据处理的方法,之前小老大用到的数据处理框架是使用highchart图表库,所以本来想使用highchart渲染生成中国地图,上网找了一些资料,highchart的中国实现了,只是需要用到的highmaps.js与之前使用的highcharts.js相冲突,不能够同时使用,

2.highchart异步加载数据显示在map

a静态数据

<script type="text/javascript">

        $(document).ready(function () {

            var options = {

                chart: {

                },

                mapNavigation: {

                    enabled: true

                },

                title: {

                    text: '地图'

                },

                subtitle: {

                    text: '临时数据'

                },

                series: [{

                    name:'省份',

                    mapData: Highcharts.maps['countries/cn/custom/cn-all-sar-taiwan'],

                    joinBy:'hc-key',

                    data: [{

                        'hc-key': 'cn-zj',

                        value:22

                    }, {

                        'hc-key': 'cn-sx',

                        value:50

                    }],

                    dataLabels: {

                        enabled: true,

                        crop: false,

                        overflow: 'none',                      

                    }

                }],

                credits: {

                    text: '大学霸',

                    href: 'http://daxueba.net'

                }

            };

            $('#container').highcharts('Map',options);

        });

    </script>

b.异步数据(后台提交到前台的数据要按照map里面的数据显示
data: [{

                        'hc-key': 'cn-zj',

                        value:22

                    }, {

                        'hc-key': 'cn-sx',

                        value:50

                    }],
)这样的格式

<style type="text/css">
#container {
	width: 500px;
	height: 500px;
	/* 	border: 1px solid #000; */
	padding: 0px;
	margin: 10px;
}
</s
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

家有小辉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值