原文：http://blog.csdn.net/whqet/article/details/42703973

简介

ECharts，缩写来自Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，业界给予了很多赞誉，这里不多说，需要了解详情的同学参见官网。我简略看了下，最贴切的地方在于本地化支持，比如对于中国地图的支持。

案例欣赏

-----------------------
--------------------------------------------------------------
        ===案例一简单条形图===案例二 条形、折线图混搭===
--------------------------------------------------------------
----------------------

具体实现

简单条形图

先来一个最简单的案例，实现一个条形图，代码我放在codepen哟，大家可以移步预览效果先。

预先准备好具有宽和高的网页元素，我们将用它绘制数据表。

  1. <div id="main" style="width:600px;height:400px"></div>

然后我们导入Echarts类库，做好准备。

  1. <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

然后就是重头戏，我们来绘制数据表，首先配置路径，接着使用Echarts开始绘图。

  1. // 路径配置
  2. require.config({
  3. paths: {
  4. echarts: 'http://echarts.baidu.com/build/dist'
  5. }
  6. });
  7. // 使用
  8. require(
  9. [
  10. 'echarts',
  11. 'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
  12. ],
  13. function (ec) {
  14. // 基于准备好的dom，初始化echarts图表
  15. var myChart = ec.init(document.getElementById('main'));
  16. //设置数据
  17. var option = {
  18. };
  19. // 为echarts对象加载数据
  20. myChart.setOption(option);
  21. }
  22. );

重点是option里的设置，设置坐标轴、设置数据。

  1. var option = {
  2. //设置坐标轴
  3. xAxis : [
  4. {
  5. type : 'category',
  6. data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]
  7. }
  8. ],
  9. yAxis : [
  10. {
  11. type : 'value'
  12. }
  13. ],
  14. //设置数据
  15. series : [
  16. {
  17. "name":"销量",
  18. "type":"bar",
  19. "data":[5, 20, 40, 10, 24, 20,24,32],
  20. }
  21. ]
  22. };

我们可以设置图标标题、图例、提示等，代码如下，效果如下图所示。

  1. var option = {
  2. //设置标题
  3. title:{
  4. text:'销量图',
  5. subtext:'纯属捏造，如有雷同，人品爆发。'
  6. },
  7. //设置提示
  8. tooltip: {
  9. show: true
  10. },
  11. //设置图例
  12. legend: {
  13. data:['销量']
  14. },
  15. //设置坐标轴
  16. xAxis : [
  17. {
  18. type : 'category',
  19. data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]
  20. }
  21. ],
  22. yAxis : [
  23. {
  24. type : 'value'
  25. }
  26. ],
  27. //设置数据
  28. series : [
  29. {
  30. "name":"销量",
  31. "type":"bar",
  32. "data":[5, 20, 40, 10, 24, 20,24,32],
  33. }
  34. ]
  35. };

======================ok，华丽的分割线，之后我来点复杂的==========================

条形图折线图混搭

加点料，来电混搭，直线图加上条形图，同时画平均线、提示最大最小值，同样代码放在codepen，移步预览效果先。

当我们需要混搭的时候，首先需要在require里加载需要使用的图库，然后在series里填写折线图的数据就可以了。代码如下，因为注释已经写得很清楚了，就不在啰嗦了，大家直接研究代码。

  1. // 路径配置
  2. require.config({
  3. paths: {
  4. echarts: 'http://echarts.baidu.com/build/dist'
  5. }
  6. });
  7. // 使用
  8. require(
  9. [
  10. 'echarts',
  11. 'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
  12. 'echarts/chart/line'
  13. ],
  14. function (ec) {
  15. // 基于准备好的dom，初始化echarts图表
  16. var myChart = ec.init(document.getElementById('main'));
  17. //设置数据
  18. var option = {
  19. //设置标题
  20. title:{
  21. text:'销量图',
  22. subtext:'纯属捏造，如有雷同，人品爆发。'
  23. },
  24. //设置提示
  25. tooltip: {
  26. show: true
  27. },
  28. //设置图例
  29. legend: {
  30. data:['销量']
  31. },
  32. //设置坐标轴
  33. xAxis : [
  34. {
  35. type : 'category',
  36. data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"]
  37. }
  38. ],
  39. yAxis : [
  40. {
  41. type : 'value'
  42. }
  43. ],
  44. //设置数据
  45. series : [
  46. //条形图
  47. {
  48. "name":"销量",
  49. "type":"bar",
  50. "data":[5, 20, 38, 10, 24, 20,24,32]
  51. },
  52. //折线图
  53. {
  54. "name":"销量",
  55. "type":"line",
  56. "data":[5, 20, 38, 10, 24, 20,24,32],
  57. //绘制平均线
  58. markLine : {
  59. data : [
  60. {type : 'average', name: '平均值'}
  61. ]
  62. },
  63. //绘制最高最低点
  64. markPoint : {
  65. data : [
  66. {type : 'max', name: '最大值'},
  67. {type : 'min', name: '最小值'}
  68. ]
  69. }
  70. }
  71. ]
  72. };
  73. // 为echarts对象加载数据
  74. myChart.setOption(option);
  75. }
  76. );

最新文章

  1. Xtrabackup原理及使用innobackupex进行MySQL数据库备份恢复
  2. TCP/UDP端口列表
  3. 10个经典的C语言面试基础算法及代码
  4. 实验12：Problem F: 求平均年龄
  5. 明明已经执行Log.i，偏偏打不出日志
  6. Shell教程2-变量
  7. C++学习笔记之字符函数库cctype
  8. python 获取文件大小，创建时间和访问时间
  9. CODEVS 3657 括号序列
  10. java与.net比较学习系列(6) 数组
  11. 命名空间 - PHP手册笔记
  12. 实用的android颜色配置表（亮瞎尼的双眼）
  13. Python 学习笔记2
  14. Phpstorm 与 服务器 同步 代码
  15. Centos7下关于系统用户密码规则-运维笔记
  16. 图片3D旋转
  17. 转：mysql where group by having
  18. delphi 调用 c++builder
  19. e796. 设置JSlider的方向
  20. 20155301 2016-2017-2 《Java程序设计》第9周学习总结

热门文章

  1. Windows下使用Visual Studio Code搭建Go语言环境
  2. EF4.1之基础（实现Code First）
  3. 阿里云服务器mysql修改编码问题
  4. Visual Studio 2013 各版本注册码
  5. 查看python selenium的api
  6. 使用CSS时间打点的Loading效果的教程
  7. bzoj 1024 暴力深搜
  8. UVA 10002 Center of Masses
  9. 【BZOJ】【1048】【HAOI2007】分割矩阵
  10. 聊一聊js中的null、undefined与NaN