唯品秀前端博客
当前位置: 前端开发 > JavaScript > 图表库–ECharts/Highcharts

图表库–ECharts/Highcharts

2017-04-16 分类:JavaScript 作者:管理员 阅读(6630)

ECharts是一个兼容绝大部分浏览器,可流畅运行在PC和移动设备上的纯 Javascript 的图表库。ECharts 提供了折线图,柱状图,散点图,饼图,K线图,盒形图等常规图,还有可视化的地图、热力图、线图,、可视化的关系图等。多样的图表、丰富绚丽的视觉效果、流畅的交互,用来做数据统计分析是再好不过了,类似还有Highcharts,官网地址:https://www.hcharts.cn/demo/highcharts#line。

1、引入echarts.js

1
<script src="./echarts.js"></script>

2、准备容器(一般是一个具有高宽的div元素)

1
2
3
4
5
#chart-one{
width:400px;
 height:300px;
}
<div id="chart-one"></div>

3、始化 echarts 实例(创建一个 ECharts 实例,返回 echartsInstance,不能再单个容器上初始化多个 ECharts 实例。)

1
var chart_one = echarts.init(document.getElementById('chart-one'));

4、 图表的配置项和数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var option = {
    //标题组件
    title: {
        text: '班级人数'
    },
    //图例组件,可点击图例控制哪些系列不显示
    legend: {
        data:['销量']
    },
    //直角坐标系 grid 中的 x 轴
    xAxis: {
        data: ["1班","2班","3班","4班","5班","6班"]
    },
    //直角坐标系 grid 中的 y 轴
    yAxis: {},
    series: [{ name: '人数', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] };
   
    // 显示图表
    chart_one.setOption(option);

效果:

这里只是一个示例,更多api请查看官网文档。

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
0

谢谢你请我吃鸡腿*^_^*

支付宝
微信

上一篇:

下一篇:

共有 102 条评论 - 图表库–ECharts/Highcharts

  1. 超级管理员 未知操作系统 未知浏览器

    貌似都怎么了?

  2. 无敌小蚯蚓 未知操作系统 未知浏览器

    你又解决了我很多问题,把他们的作品都给弄上来了,哈哈,但是看完以后,除了你的和摧残星辰的,别的……貌似都未[/流汗]

  3. 无敌小蚯蚓 未知操作系统 未知浏览器

    是否有一种求带飞的感觉……

  4. 无敌小蚯蚓 未知操作系统 未知浏览器

    我来了,哈哈

  5. 追求新感觉 未知操作系统 未知浏览器

    该评论已删除

  6. 叫我小白 未知操作系统 未知浏览器

    国产越来越有匠人精神。

  7. 五月Amber 未知操作系统 未知浏览器

    该评论已删除

  8. 大尾巴没大姨妈 未知操作系统 未知浏览器

    果然很强大,联网速度怎么样?

  9. 清朝辛弃疾 未知操作系统 未知浏览器

    走过路过,千万别错过,有钱的捧个钱场,没钱得捧个人场!

  10. 梦里看见你一 未知操作系统 未知浏览器

    该评论已删除

  11. 路过花开岁月 未知操作系统 未知浏览器

    看样子好似不错!

  12. 水輕云澹 未知操作系统 未知浏览器

    支持!!!

  13. 那个人说我累了 未知操作系统 未知浏览器

    生产很少休息,要是社会责任稽核,肯定过不了。

  14. 蝶舞沧海 未知操作系统 未知浏览器

    该评论已删除

  15. 没事卖个萌 未知操作系统 未知浏览器

    比垃圾小米好多了

  16. 陌晓缺 未知操作系统 未知浏览器

    这这这~~~~太牛逼了

  17. 喜欢你有道理 未知操作系统 未知浏览器

    关注这家伙好久啦

  18. 南方恒星 未知操作系统 未知浏览器

    没得去现场,只能网上围观了

  19. 幸运小以 未知操作系统 未知浏览器

    该评论已删除

  20. 李春广壹 未知操作系统 未知浏览器

    真机效果用起来怎么样,小编

  21. 卡拉不OK 未知操作系统 未知浏览器

    该评论已删除

  22. 小悦庚心 未知操作系统 未知浏览器

    国产手机就是吊 配置超级豪华

  23. 罗妹仔 未知操作系统 未知浏览器

    该评论已删除

  24. 开心快乐小笨熊 未知操作系统 未知浏览器

    是我的问题吗,感觉每款都差不多

  25. 清风飞扬射手座 未知操作系统 未知浏览器

    看了好多发布会

  26. 穿着裤衩奔跑 未知操作系统 未知浏览器

    该评论已删除

  27. 半简年华需留意 未知操作系统 未知浏览器

    我喜欢他的配置还有外观的呢

  28. 紫晶雪颖 未知操作系统 未知浏览器

    真心很爱大神,因为它改变我太多。绝对业界良心,中国良心

  29. 安小奈queen 未知操作系统 未知浏览器

    哎,不知道真机怎样,支持一下先

  30. liangzaizai1 未知操作系统 未知浏览器

    大神正式发布自己的旗舰产品铂顿

  31. 情用劇毒 未知操作系统 未知浏览器

    喜欢的国产品牌,前排支持

  32. 琴梦无痕 未知操作系统 未知浏览器

    场地布置的好现代哦!

  33. 90后帝皇老子 未知操作系统 未知浏览器

    冲出亚洲,走向全世界

  34. 当梦背离现实 未知操作系统 未知浏览器

    该评论已删除

  35. 四弦梁小天 未知操作系统 未知浏览器

    大神手机好啊!

  36. 手表不坏 未知操作系统 未知浏览器

    太震撼了,眼前一亮!本殿喜欢

  37. 让爱奔跑 未知操作系统 未知浏览器

    赞一个~

  38. 小丸子没有章鱼 未知操作系统 未知浏览器

    幸福总是很突然,支持大神

  39. 小黑的春天是我 未知操作系统 未知浏览器

    屏幕已经出来了

  40. 路见平891208 未知操作系统 未知浏览器

    出手机这么快,我的手机一直在贬值

  41. 四爷1023 未知操作系统 未知浏览器

    国产继续努力加油!

  42. 邪恶Y7 未知操作系统 未知浏览器

    这样的智能手机强大功能所带来的多样化选择也为我们的生活增添魅力!

  43. 泥嘴滴 未知操作系统 未知浏览器

    喜欢的手机,围观下

  44. 日耀长安城 未知操作系统 未知浏览器

    喜欢的一款国产手机,给个支持吧

  45. 莫道再见 未知操作系统 未知浏览器

    吃货只看到酒店

  46. 帅气你淡哥 未知操作系统 未知浏览器

    创新很重要

  47. 雒冰冰7 未知操作系统 未知浏览器

    该评论已删除

  48. 包子VS饼子 未知操作系统 未知浏览器

    想换机器不知道选那个好了

  49. 那妞很美hope 未知操作系统 未知浏览器

    大爱大神,期待真机

  50. 紫晓卿筝 未知操作系统 未知浏览器

    每款新品都期待,但是不一定买的说

  51. 刘新飞6 未知操作系统 未知浏览器

    喜欢这风格! 酷!

  52. 寂寞的嶪子 未知操作系统 未知浏览器

    现在手机更新太快,更不上

  53. 只爱金泰妍 未知操作系统 未知浏览器

    价格还算可以

  54. 触电进行时 未知操作系统 未知浏览器

    期待大神新作

  55. 想起恋你 未知操作系统 未知浏览器

    盲目迷信洋品牌的人观念也落伍了,而且要多花冤枉钱。还是国产好

  56. 没分寸小姐 未知操作系统 未知浏览器

    现场好美啊

  57. 凯迪和拉克 未知操作系统 未知浏览器

    看着貌似很不错

  58. 门口看美女 未知操作系统 未知浏览器

    价格还不错,国产就是实惠

  59. 贝加幸福 未知操作系统 未知浏览器

    这款旗舰不错!

  60. 牛牛冬瓜 未知操作系统 未知浏览器

    期待真机

  61. 种马控 未知操作系统 未知浏览器

    真机图,知道什么时候可以摸到真机

  62. 零点反恐 未知操作系统 未知浏览器

    大神厉害!

  63. 嗷嗷1205 未知操作系统 未知浏览器

    大神是良心企业

  64. 黛空城旧梦 未知操作系统 未知浏览器

    小编好给力啊,期待期待

  65. 手表不坏 未知操作系统 未知浏览器

    穷等人家买不起,支持国产!

  66. 千万的爱 未知操作系统 未知浏览器

    该评论已删除

  67. HoganZhang 未知操作系统 未知浏览器

    不错的配置,希望价格别太高,肯定销量无敌

  68. 锦瑟强子 未知操作系统 未知浏览器

    国产称霸啊!

  69. 南柯碎梦 未知操作系统 未知浏览器

    国产新机月月有,带着板凳常常看

  70. 讉忘简莫 未知操作系统 未知浏览器

    一分价格一分货,绝对是物有所值

  71. 刘新飞6 未知操作系统 未知浏览器

    好有想买的冲动!

  72. 紫晓卿筝 未知操作系统 未知浏览器

    产品的创新才能推动科技的应用

  73. cinderella 未知操作系统 未知浏览器

    大神长得都差不多啊

  74. 章恩旗 未知操作系统 未知浏览器

    该评论已删除

  75. 淡淡雨然 未知操作系统 未知浏览器

    支持国货

  76. 你不行换人 未知操作系统 未知浏览器

    该评论已删除

  77. 绚烂爱暗色 未知操作系统 未知浏览器

    该评论已删除

  78. 洋小小小妞 未知操作系统 未知浏览器

    国产称霸啊

  79. 爱你成夢 未知操作系统 未知浏览器

    该评论已删除

  80. 乔升JOE 未知操作系统 未知浏览器

    不错啊,愿国产手机越走越好

  81. 星宿阁 未知操作系统 未知浏览器

    不错啊,愿国产手机越走越好

  82. 緈鍢曾路过 未知操作系统 未知浏览器

    好期待啊

  83. 遗落_笑声 未知操作系统 未知浏览器

    国货当自强。

  84. 亥菁木 未知操作系统 未知浏览器

    超级赞!超级喜欢,很多创新的技术

  85. 黑狐丹奴 未知操作系统 未知浏览器

    该评论已删除

  86. 海里的一片蓝 未知操作系统 未知浏览器

    真心不错 超喜欢!

  87. 蓳小篸_ 未知操作系统 未知浏览器

    高端大气上档次,有木有?

  88. 花花去哪呀 未知操作系统 未知浏览器

    该评论已删除

  89. 清纯小年代 未知操作系统 未知浏览器

    这配置,这身形,太牛了

  90. 旗木瑾烟 未知操作系统 未知浏览器

    大神又有发布会,很不错的说

  91. 说一点点 未知操作系统 未知浏览器

    该评论已删除

  92. 阳光雨珊 未知操作系统 未知浏览器

    外观质感非常不错

  93. 果然爱杨桃 未知操作系统 未知浏览器

    我也是煤油,支持

  94. 酉阳先锋 未知操作系统 未知浏览器

    好手机,快到我袋里来

  95. 颓废我的颓废 未知操作系统 未知浏览器

    该评论已删除

  96. 腾云驾雾1212 未知操作系统 未知浏览器

    不知道真机到底怎么样

  97. 抱歉nl吥配 未知操作系统 未知浏览器

    那么多应用感觉都没用的

  98. 摩羯蒲公英 未知操作系统 未知浏览器

    国内手机主要解决发热问题! 我现在用的国产手机大多是这个问题

  99. 旺仔饼干 未知操作系统 未知浏览器

    喜欢的手机,会继续支持

  100. 琥珀之约 未知操作系统 未知浏览器

    回归正常分辨率了

  101. 爷爷 未知操作系统 未知浏览器

    你大爷的不错你大爷的不错你大爷的不错你大爷的不错你大爷的不错

    1. 超级管理员 未知操作系统 未知浏览器

      @爷爷嗯,不错,你大爷

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 219 篇
  • 草稿数目: 0 篇
  • 分类数目: 14 个
  • 独立页面: 6 个
  • 评论总数: 827 条
  • 链接总数: 13 个
  • 标签总数: 405 个
  • 建站时间: 943 天
  • 注册用户: 1257 人
  • 访问总量: 8871744 次
  • 最近更新: 2019年7月15日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线