唯品秀前端博客
当前位置: 前端开发 > JavaScript >

图表库–ECharts/Highchart基本使用及其参数注解

作者：管理员 2017-04-16 11:01:25 分类：JavaScript 阅读（16925） 90

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

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
2
var chart1 = echarts.init(document.getElementById('chart-one'));
var chart2 = echarts.init($('#chart-one')[0]); // jq选择器

4、 图表的配置项和数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
var option = {
          // 标题
          title: {
            text: '漏斗1',
            x: 'center',
            show: false,
            textStyle: {
              color: '#333',
              fontSize: 18,
              fontWeight: 'normal'
            }
          },
         // 工具提示
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          //图例组件，可点击图例控制哪些系列不显示
          legend: {
            data: ['销量']
          },
          //设置图表相对盒子距离
          grid: {
            show: true,
            top: '20px',
            left: '35px',
            right: '10px',
            bottom: '25px',
            fontSize: '10px'
            // borderColor:'red'
          },
          //直角坐标系 grid 中的 x 轴
          xAxis: {
            axisLine: { show: false },
            axisTick: {
              show: false
            },
            splitLine: {
              // 是否展示网格线
              show: false
            },
            //data: ["1班","2班","3班","4班","5班","6班"] // X轴
            // data: data.map(item => {
            //   return item.type || item.hour;
            // }) // X轴
          },
          //直角坐标系 grid 中的 y 轴
          yAxis: {
            type: 'value',
            scale: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              // 是否展示网格线
              show: true,
              //配置网格线颜色
              lineStyle: {
                color: ['#eee'],
                width: 1,
                type: 'solid'
              }
            },
            splitArea: {
              show: false
            },
            //去掉斑马网格
            axisLabel: {
              formatter: function(val, ind) {
                // ind代表y坐标从下往上的坐标，如下：初始化默认值都为0
                return ind == 0
                  ? 0
                  : val >= 100000
                  ? (val / 1000).toLocaleString('en-US') + 'k'
                  : val; //对y轴值进行修饰，添加单位等等
              }
            }
          },
          series: [
            {
              // 折线图线条颜色
              itemStyle: {
                normal: {
                  color: '#67A7E8',
                  lineStyle: {
                    color: '#67A7E8'
                  }
                }
              },
              name: '人数',
              // type: 'bar', // bar：矩形，line：折线图
              data: [5, 20, 36, 10, 10, 20], // Y轴
              type: 'bar', // bar：矩形，line：折线图
              barMinHeight: 20, // 最小高度
              barWidth: 30, //柱图宽度
              barMaxWidth: 50 //最大宽度
              //data: data.map(item = >{
              // return item.click || item.active_days || item.avgonlinietime;
              //})
            }
          ]
        }

    // 显示图表
    chart_one.setOption(option);

效果：

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

本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(0) 打赏
标签：

上一篇：

下一篇：

相关推荐

共 90 条评论关于"图表库–ECharts/Highchart基本使用及其参数注解"

表情

最新评论

  1. 我哩脑壳要爆炸
    Windows 10 Firefox 47.0

    谢谢您的分享！

    58.251.121.72 2022-01-10 17:04 回复
  2. 无敌小蚯蚓
    未知操作系统 未知浏览器

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

    河北省保定市 2017-06-04 10:34 回复
  3. 无敌小蚯蚓
    未知操作系统 未知浏览器

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

    河北省保定市 2017-06-04 10:31 回复
  4. 无敌小蚯蚓
    未知操作系统 未知浏览器

    我来了，哈哈

    河北省保定市 2017-06-04 10:30 回复
  5. 梦里看见你一
    未知操作系统 未知浏览器

    该评论已删除

    河南省汝州市 2017-05-30 04:40 回复
  6. 路过花开岁月
    未知操作系统 未知浏览器

    看样子好似不错！

    湖南省天元区 2017-05-30 04:17 回复
  7. 水輕云澹
    未知操作系统 未知浏览器

    支持！！！

    广东省珠海市 2017-05-30 04:02 回复
  8. 李春广壹
    未知操作系统 未知浏览器

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

    贵州省市辖区 2017-05-30 02:40 回复
  9. 卡拉不OK
    未知操作系统 未知浏览器

    该评论已删除

    四川省旌阳区 2017-05-30 02:26 回复
  10. 小悦庚心
    未知操作系统 未知浏览器

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

    河南省濮阳县 2017-05-30 02:26 回复
  11. 罗妹仔
    未知操作系统 未知浏览器

    该评论已删除

    广西壮族自治区钦北区 2017-05-30 02:21 回复
  12. 开心快乐小笨熊
    未知操作系统 未知浏览器

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

    河北省峰峰矿区 2017-05-30 02:20 回复
  13. 清风飞扬射手座
    未知操作系统 未知浏览器

    看了好多发布会

    广东省化州市 2017-05-30 02:13 回复
  14. 穿着裤衩奔跑
    未知操作系统 未知浏览器

    该评论已删除

    福建省漳州市 2017-05-30 02:11 回复
  15. 半简年华需留意
    未知操作系统 未知浏览器

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

    广东省市辖区 2017-05-30 01:41 回复
  16. 紫晶雪颖
    未知操作系统 未知浏览器

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

    河北省复兴区 2017-05-30 01:37 回复
  17. 安小奈queen
    未知操作系统 未知浏览器

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

    2017-05-30 01:33 回复
  18. liangzaizai1
    未知操作系统 未知浏览器

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

    湖南省蓝山县 2017-05-30 01:31 回复
  19. 情用劇毒
    未知操作系统 未知浏览器

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

    黑龙江省龙江县 2017-05-30 01:25 回复
  20. 琴梦无痕
    未知操作系统 未知浏览器

    场地布置的好现代哦！

    陕西省新城区 2017-05-30 01:05 回复
  21. 90后帝皇老子
    未知操作系统 未知浏览器

    冲出亚洲，走向全世界

    广东省市辖区 2017-05-30 00:39 回复
  22. 当梦背离现实
    未知操作系统 未知浏览器

    该评论已删除

    海南省省直辖县级行政区划 2017-05-30 00:20 回复
  23. 四弦梁小天
    未知操作系统 未知浏览器

    大神手机好啊！

    湖南省炎陵县 2017-05-30 00:06 回复
  24. 手表不坏
    未知操作系统 未知浏览器

    太震撼了，眼前一亮！本殿喜欢

    广西壮族自治区武宣县 2017-05-29 23:43 回复
  25. 让爱奔跑
    未知操作系统 未知浏览器

    赞一个~

    江苏省太仓市 2017-05-29 23:29 回复
  26. 小丸子没有章鱼
    未知操作系统 未知浏览器

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

    河南省襄城县 2017-05-29 23:22 回复
  27. 小黑的春天是我
    未知操作系统 未知浏览器

    屏幕已经出来了

    江苏省句容市 2017-05-29 22:59 回复
  28. 路见平891208
    未知操作系统 未知浏览器

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

    吉林省朝阳区 2017-05-29 22:52 回复
  29. 四爷1023
    未知操作系统 未知浏览器

    国产继续努力加油!

    四川省马边彝族自治县 2017-05-29 22:46 回复
  30. 邪恶Y7
    未知操作系统 未知浏览器

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

    2017-05-29 22:04 回复
  31. 泥嘴滴
    未知操作系统 未知浏览器

    喜欢的手机，围观下

    江苏省仪征市 2017-05-29 21:47 回复
  32. 日耀长安城
    未知操作系统 未知浏览器

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

    云南省彝良县 2017-05-29 21:44 回复
  33. 莫道再见
    未知操作系统 未知浏览器

    吃货只看到酒店

    四川省郫县 2017-05-29 21:26 回复
  34. 帅气你淡哥
    未知操作系统 未知浏览器

    创新很重要

    河北省广平县 2017-05-29 21:22 回复
  35. 雒冰冰7
    未知操作系统 未知浏览器

    该评论已删除

    河南省汝阳县 2017-05-29 21:11 回复
  36. 包子VS饼子
    未知操作系统 未知浏览器

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

    2017-05-29 20:56 回复
  37. 那妞很美hope
    未知操作系统 未知浏览器

    大爱大神，期待真机

    广西壮族自治区长洲区 2017-05-29 19:54 回复
  38. 紫晓卿筝
    未知操作系统 未知浏览器

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

    浙江省金华市 2017-05-29 19:40 回复
  39. 刘新飞6
    未知操作系统 未知浏览器

    喜欢这风格！ 酷！

    新疆维吾尔自治区新和县 2017-05-29 19:23 回复
  40. 寂寞的嶪子
    未知操作系统 未知浏览器

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

    河北省长安区 2017-05-29 19:13 回复
  41. 只爱金泰妍
    未知操作系统 未知浏览器

    价格还算可以

    河南省邓州市 2017-05-29 18:42 回复
  42. 触电进行时
    未知操作系统 未知浏览器

    期待大神新作

    贵州省长顺县 2017-05-29 18:38 回复
  43. 想起恋你
    未知操作系统 未知浏览器

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

    广东省韶关市 2017-05-29 17:25 回复
  44. 没分寸小姐
    未知操作系统 未知浏览器

    现场好美啊

    山东省枣庄市 2017-05-29 17:08 回复
  45. 凯迪和拉克
    未知操作系统 未知浏览器

    看着貌似很不错

    广西壮族自治区苍梧县 2017-05-29 16:56 回复
  46. 门口看美女
    未知操作系统 未知浏览器

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

    河北省张家口市 2017-05-29 16:22 回复
  47. 贝加幸福
    未知操作系统 未知浏览器

    这款旗舰不错！

    新疆维吾尔自治区莎车县 2017-05-29 15:50 回复
  48. 牛牛冬瓜
    未知操作系统 未知浏览器

    期待真机

    2017-05-29 15:45 回复
  49. 种马控
    未知操作系统 未知浏览器

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

    湖北省京山县 2017-05-29 15:11 回复
  50. 零点反恐
    未知操作系统 未知浏览器

    大神厉害!

    四川省汉源县 2017-05-29 15:09 回复
  51. 嗷嗷1205
    未知操作系统 未知浏览器

    大神是良心企业

    海南省定安县 2017-05-29 14:26 回复
  52. 黛空城旧梦
    未知操作系统 未知浏览器

    小编好给力啊，期待期待

    福建省涵江区 2017-05-29 14:22 回复
  53. 手表不坏
    未知操作系统 未知浏览器

    穷等人家买不起，支持国产！

    广西壮族自治区岑溪市 2017-05-29 14:20 回复
  54. 千万的爱
    未知操作系统 未知浏览器

    该评论已删除

    江苏省苏州市 2017-05-29 14:11 回复
  55. HoganZhang
    未知操作系统 未知浏览器

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

    河北省永清县 2017-05-29 13:21 回复
  56. 锦瑟强子
    未知操作系统 未知浏览器

    国产称霸啊！

    黑龙江省穆棱市 2017-05-29 13:17 回复
  57. 南柯碎梦
    未知操作系统 未知浏览器

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

    贵州省赫章县 2017-05-29 13:03 回复
  58. 讉忘简莫
    未知操作系统 未知浏览器

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

    河南省淮阳县 2017-05-29 13:01 回复
  59. 刘新飞6
    未知操作系统 未知浏览器

    好有想买的冲动！

    江西省青山湖区 2017-05-29 12:54 回复
  60. 紫晓卿筝
    未知操作系统 未知浏览器

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

    山东省市中区 2017-05-29 12:32 回复
  61. cinderella
    未知操作系统 未知浏览器

    大神长得都差不多啊

    湖南省芷江侗族自治县 2017-05-29 12:21 回复
  62. 章恩旗
    未知操作系统 未知浏览器

    该评论已删除

    河南省市辖区 2017-05-29 11:50 回复
  63. 淡淡雨然
    未知操作系统 未知浏览器

    支持国货

    陕西省神木县 2017-05-29 11:49 回复
  64. 你不行换人
    未知操作系统 未知浏览器

    该评论已删除

    四川省丹棱县 2017-05-29 11:49 回复
  65. 绚烂爱暗色
    未知操作系统 未知浏览器

    该评论已删除

    甘肃省静宁县 2017-05-29 11:42 回复
  66. 洋小小小妞
    未知操作系统 未知浏览器

    国产称霸啊

    四川省什邡市 2017-05-29 11:41 回复
  67. 爱你成夢
    未知操作系统 未知浏览器

    该评论已删除

    河南省嵩县 2017-05-29 11:27 回复
  68. 乔升JOE
    未知操作系统 未知浏览器

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

    山东省郯城县 2017-05-29 11:20 回复
  69. 星宿阁
    未知操作系统 未知浏览器

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

    2017-05-29 11:20 回复
  70. 緈鍢曾路过
    未知操作系统 未知浏览器

    好期待啊

    内蒙古自治区阿拉善左旗 2017-05-29 11:20 回复
  71. 遗落_笑声
    未知操作系统 未知浏览器

    国货当自强。

    广西壮族自治区河池市 2017-05-29 11:16 回复
  72. 亥菁木
    未知操作系统 未知浏览器

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

    山西省蒲县 2017-05-29 11:13 回复
  73. 黑狐丹奴
    未知操作系统 未知浏览器

    该评论已删除

    海南省屯昌县 2017-05-29 11:12 回复
  74. 海里的一片蓝
    未知操作系统 未知浏览器

    真心不错 超喜欢!

    山西省平鲁区 2017-05-29 10:43 回复
  75. 蓳小篸_
    未知操作系统 未知浏览器

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

    广西壮族自治区市辖区 2017-05-29 10:30 回复
  76. 花花去哪呀
    未知操作系统 未知浏览器

    该评论已删除

    江苏省响水县 2017-05-29 10:19 回复
  77. 清纯小年代
    未知操作系统 未知浏览器

    这配置，这身形，太牛了

    内蒙古自治区 2017-05-29 10:07 回复
  78. 旗木瑾烟
    未知操作系统 未知浏览器

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

    山东省东明县 2017-05-29 09:50 回复
  79. 说一点点
    未知操作系统 未知浏览器

    该评论已删除

    四川省平昌县 2017-05-29 09:07 回复
  80. 阳光雨珊
    未知操作系统 未知浏览器

    外观质感非常不错

    陕西省榆林市 2017-05-29 09:01 回复
  81. 果然爱杨桃
    未知操作系统 未知浏览器

    我也是煤油，支持

    江苏省海门市 2017-05-29 08:57 回复
  82. 酉阳先锋
    未知操作系统 未知浏览器

    好手机，快到我袋里来

    甘肃省东乡族自治县 2017-05-29 08:54 回复
  83. 颓废我的颓废
    未知操作系统 未知浏览器

    该评论已删除

    陕西省佛坪县 2017-05-29 08:41 回复
  84. 腾云驾雾1212
    未知操作系统 未知浏览器

    不知道真机到底怎么样

    湖北省鹤峰县 2017-05-29 08:15 回复
  85. 抱歉nl吥配
    未知操作系统 未知浏览器

    那么多应用感觉都没用的

    湖北省嘉鱼县 2017-05-29 08:13 回复
  86. 摩羯蒲公英
    未知操作系统 未知浏览器

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

    陕西省南郑县 2017-05-29 07:45 回复
  87. 旺仔饼干
    未知操作系统 未知浏览器

    喜欢的手机，会继续支持

    甘肃省市辖区 2017-05-29 06:48 回复
  88. 琥珀之约
    未知操作系统 未知浏览器

    回归正常分辨率了

    安徽省裕安区 2017-05-29 06:40 回复
  89. 爷爷
    未知操作系统 未知浏览器

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

    171.214.129.32 2017-04-30 12:57 回复
    1. 超级管理员
      未知操作系统 未知浏览器

      @爷爷嗯，不错，你大爷

      112.64.216.85 2017-04-30 12:59 回复
    90. 暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏