echarts

echarts

Enterprise Charts，商业级数据图表,一个纯Javascript的图表库。

echart支持支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表。

同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。

1-echarts模块引入

echarts-optimizer为echarts专用的合并压缩工具，我们可以只引入我们用到的模块。以下是echarts-optimizer生成的单文件目录结构。

• dist（文件夹） : 经过合并、压缩的单文件
  
  • echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
  • chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载
  • line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
  • scatter.js : 散点图
  • k.js : K线图
  • pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
  • radar.js : 雷达图
  • map.js : 地图
  • force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
  • chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
  • funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
  • gauge.js : 仪表盘
  • eventRiver.js : 事件河流图
  • treemap.js : 矩阵树图
  • venn.js : 韦恩图
• source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试

 require([                'echarts',                'echarts/chart/line',            ])

为了防止使用echarts对象时还没有引入完成，可以将执行echart的函数设置为require的第二个参数，作为引用完成echarts对象的回调函数。

2-使用引用的echarts对象，初始化chart对象

chart = echarts.init(document.getElementById('main'));

3-使用chart.setOption设定图表样式

以下列折线图表设置为例

chart.setOption({toolbox: {    show : true,    //是否显示工具栏组件。    feature : {        dataZoom: {show: true}, //显示区域缩放组件        restore: {show: true}   //配置项还原    }},animationDurationUpdate: 4000,//动画持续时间xAxis: [    //直角坐标系X轴配置    {        type: 'category',//设置数据为类目轴，适用于离散的类目数据        data: ['a', 'b', 'c', 'd']    }],yAxis: [    //直角坐标系y轴配置    {        type: 'value' //数值轴，适用于连续数据。    }],series: [    {        type:'line',    //设置图标折线图        data: [            200, 100, 500, 300        ]    }]});

本来想把所有属性都总结一遍，后来看了文档才发现属性实在太多了…碰到不会的来查吧,这个中文的文档写的很详细。配置文档

此文中的完整demo在这里

更多demo点击这里,fork自echarts的github项目，一共226个demo。

END