echarts地图论文

echarts地图论文

问:如何用echarts做地图的数据展现
  1. 答:ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。
    ECharts (Enterprise Charts 商业产品图表库)
    提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图(区域图)、柱状图(条状图)、散点图(气泡图)、饼图(环形图)、K线图、地图、力导向布局图以及和弦图,同时支持任意维度的堆积和多图表混合展现。
问:谁用过echarts地图
  1. 答:看了echarts的demo以及网上大家使用echarts的经验。我使用的是大家都的模块化单文件引入。
    首先要去echarts和zrender上需要的文件
    然后将下来的文件放在你项目的目录下,我将文件都放在我项目的js目录下。需要注意的是导入的zrender文件夹名不要改变,zrender和echarts在同一个目录下面。
    在项目中引用相关文件。我想要用echarts画地图,引用了map.js。引用地图的paths设置比较特殊,如图中我写的是 'echarts/chart/map': '../../Scripts/js/echarts/map',后面写的是map在项目中的实际路径,引用别的图表如pie则其目录只要和 'echarts': '../../Scripts/js/echarts'后面的目录同即可。
    引用相关的文件后可能还会出现很多的小问题,主要去看看js文件目录是否正确。
    扩展地图插件的时候或者有别的需求需要引入config文件时,要注意一定要将引用的代码放在function(ec){}中,这样就不会报[MODULE_MISS]"echarts/config" is not exists!错了
    调试完成后,就可以见到你想要看到的图片啦
问:如何用echarts动态在地图上标识点
  1. 答:ECharts可以很方便的在网页上绘制地图,图表,并且可以提供下载图像,放大,缩小,拖动等功能,今天主要说一下它的地图类型(type:'map')是如何实现的.
    首先在ECharts地图的坐标需要我们存储在一个geoCoord属性里,它是一个JS的字典对象,由键/值对组成,键表示点的名称,值则表达它的坐标,由经纬度组成,它是一个数组,如[136.00,32.00]它就表示了一个坐标.
    地图类型的图表需要关注的元素
    title:标题,显示这个地图所表示的名称
    title: {
    text: '清大云点亮中国',
    subtext: 'Tsingda.Cloud',
    sublink: '',
    x: 'center',
    y: 'top',
    textStyle: {
    color: '#fff'
    }
    }
    toolbox:工具栏,显示一些显示的工具,放大,缩小,查看数据集,下载图像等
    toolbox: {
    show: true,
    feature: {
    mark: { show: true },
    dataView: { show: true, readOnly: false },
    restore: { show: true },
    saveAsImage: { show: true }
    }
    }
echarts地图论文
下载Doc文档

猜你喜欢