zoukankan      html  css  js  c++  java
  • ECharts的简单使用

    ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
    ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。

    一、 echarts下载

    下载页:http://echarts.baidu.com/download.html
    图片

    二、使用三步走

    1. 在页面中指定一个div并指定宽高:<div style="100%;height:500px;" id="map_charts"></div>
    2. 页面中引用js<script type="text/javascript" src="echarts.min.js"></script>
    3. 页面加载完毕后调用代码初始化 option参数配置见文档:http://echarts.baidu.com/option.html
    	 var myChart = echarts.init(document.getElementById('map_charts'));//一个div只能有一个实例
         var option={}//..图表的配置
         myChart.setOption(option);
    

    关于地图图表

    需要引用中国区域的js或者使用json初始化地图
    下载中国/世界地图的js或者json 文档:http://echarts.baidu.com/download-map.html 文档底部有js和json的使用示例
    图片
    JavaScript 引入示例

    <script src="echarts.js"></script>
    <script src="map/js/china.js"></script>
    <script>
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
    </script>
    

    JSON 引入示例

    $.get('map/json/china.json', function (chinaJson) {
        echarts.registerMap('china', chinaJson);
        var chart = echarts.init(document.getElementById('main'));
        chart.setOption({
            series: [{
                type: 'map',
                map: 'china'
            }]
        });
    });
    

    效果预览

    demo地址:http://runjs.cn/detail/gkxnlkgy

  • 相关阅读:
    3、Less-计算
    2、Less-混合
    1、Less-初见
    5、反射-动态代理
    4、反射-类的构造器:Constrctor
    3、反射-Field
    2、反射-Method&父类
    1、反射-Class&ClassLoader
    5、URLConnection(3)
    Linux进程状态查询
  • 原文地址:https://www.cnblogs.com/morang/p/7359614.html
Copyright © 2011-2022 走看看