浅谈Echarts3.0
来源:互联网 发布:js对字符串的操作 编辑:程序博客网 时间:2024/05/18 00:17
最近公司的项目,主要涉及的是大数据分析方面,数据可视化变成了项目的重点。前端这边需要完成将大量的数据,实现可视化。现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势。而ECharts和d3.js则是可视化的成熟框架。对于制作的图表可以说是满足你的创造力。
两者相比,D3 它被很多其他的表格插件所使用。它允许绑定任意数据到DOM,然后将数据驱动转换应用到Document中。你可以使用它用一个数组创建基本的HTML表格,或是利用它的流体过度和交互,用相似的数据创建惊人的SVG条形图。
而ECharts图表更加的适合应用,具备华丽的外衣,但很实用。
ECharts的基本模板非常简单,相对d3上手容易。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="../lib/echarts.min.js"></script></head><body> <!-- 为echars准备一个具备大小的容器dom --> <div id="main" style="width: 600px;height: 400px;"></div> <script src="../js/jquery-2.1.0.js"></script> <script> // 基于准备好的dom,初始化eChars实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title:{ text:'ECharts 入门示例' }, tooltip:{}, legend:{ data:['销量'] }, xAxis:{ data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子'] }, yAxis:{}, series:[{ name:'销量', type:'bar', data:[5,20,36,46,20] }], }; // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); </script></body></html>
1、第一步要引入<script src="../lib/echarts.min.js"></script>
2、第二步在body中添加一个dom:
<!-- 为echars准备一个具备大小的容器dom --> <div id="main" style="width: 600px;height: 400px;"></div>
3、第三步初始化一个实例echarts.init()。
4、第四步指定图表的配置项和数据。
5、第五步显示图表
// 使用刚指定的配置项和数据显示图表 myChart.setOption(option);
效果图:
Echarts主要的内容在于配置option.
官网链接:http://echarts.baidu.com/index.html
github:https://github.com/ecomfe/echarts
文档页:http://echarts.baidu.com/option.html
Echarts在github开源项目上的第一句话是:
ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.
大致翻译:
ECharts是一个免费的,功能强大的制图和可视化库。提供一个简单的方法来实现添加直观的,互动的,和高度可定制的图表,或者也可以是你的商业产品。它是用纯JavaScript和基于zrender(H5 canvas类库),一个全新的轻巧canvas库。
Echarts相当实用且方便,边看文档边学习的过程中就能出来你想要的图表!
- 浅谈Echarts3.0
- 浅谈ECharts3 柱形图使用心得
- 定制echarts3.0饼图
- Echarts3.0使用心得
- echart2.0 Vs echarts3.0
- ECharts3.0 强大的统计图
- vue中echarts3.0自适应
- 使用Echarts3.0做图表
- Echarts3.0+Ajax请求数据柱状图实例
- 可视化篇:Echarts3.0引入百度地图
- 关于echarts3.0散点图的一点封装
- echarts3.0之关系图详解
- Echarts3.0引入百度地图-简单说
- Echarts2.0和Echarts3.0添加柱状图标签值
- Echarts3.0:实现一个页面放多个Echarts图表的方法
- Echarts3.0的简单使用,动态获取数据
- Echarts3.0加载和订正气象格点数据
- Echarts3.0加载和订正气象格点数据源码
- win7(64bit)+vs2010+opencv2.4.9
- using命名空间的声明和使用
- java工厂模式
- 对指针的一个理解
- Windows快捷键
- 浅谈Echarts3.0
- Javascript url地址传参及获取参数方法(利用正则表达式)
- JAVA环境变量和TomCat服务器配置
- 简答题——栈和队列的区别
- Qt 模态对话框 非模态对话框
- 支付接口的调用
- char和int
- Android软键盘(五)如何判断软键盘是否显示
- 【Java】十款经典游戏的Java版本(开源)