ECharts

来自Wiki.Citydatum
跳转至: 导航搜索
TODO
提示:欢迎帮助我们进一步提升文章质量,当前重点任务包括:
  • 章节补充:使用方法、应用案例章节的内容;
  • 图片补充:用ECharts绘制示例图表、采用ECharts技术的网站截屏;
  • 内容优化:功能特性章节的简化与提炼,补充来源引用与更多阅读链接;


ECharts是一个使用JavaScript实现的开源可视化库,可以运行在PC和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的矢量图形库ZRender,主要用于数据可视化,可制作高度个性化定制交互式动态图表,由百度公司出品。

概况

发展历程

  • ECharts缩写来自Enterprise Charts,商业级数据图表,它最初是为了满足公司商业体系里各种业务系统的报表需求;
  • 2012年初,在凤巢数据平台项目中,当时的凤巢前端技术负责人Kener-林峰尝试使用Canvas去做图表,写了一个全新的轻量级Canvas类库ZRender,可以说是ECharts的原型。

功能特性

ECharts官方示例

应用

城市规划与研究领域的应用案例

上手

基本操作流程

1. 创建一个空白HTML文件

2. 引用ECharts.js文件下载Echarts,并放置在当前目录中的js子目录下)

<script type="text/javascript" src="js/echarts.js"></script>

3. 准备放置图表的容器

<div id="chartmain" style="width:600px; height: 400px;"></div>

4. 设置参数,初始化图表

ECharts柱状图示例:北上广深常住人口数(2016)
<script type="text/javascript">
    //指定图标的配置和数据
    var option = {
        title: {text: 'ECharts 柱状图示例:北上广深常住人口数(2016)'},
        tooltip: {},
        legend: {data:['用户来源']},
        xAxis: {data:["北京","上海","广州","深圳"]},
        yAxis: {},
        series: [{
            name:'常住人口(万人)', 
            type:'bar',
            data:[2173,2420,1404,1191]
        }]
    };
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));
    //使用制定的配置项和数据显示图表
    myChart.setOption(option);
</script>

更多阅读