唯品秀前端博客

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

    谢谢您的分享!

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

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

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

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

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

    我来了,哈哈

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

    该评论已删除

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

    看样子好似不错!

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

    支持!!!

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

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

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

    该评论已删除

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

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

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

    该评论已删除

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

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

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

    看了好多发布会

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

    该评论已删除

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

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

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

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

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

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

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

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

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

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

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

    场地布置的好现代哦!

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

    冲出亚洲,走向全世界

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

    该评论已删除

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

    大神手机好啊!

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

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

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

    赞一个~

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

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

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

    屏幕已经出来了

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

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

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

    国产继续努力加油!

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

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

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

    喜欢的手机,围观下

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

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

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

    吃货只看到酒店

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

    创新很重要

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

    该评论已删除

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

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

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

    大爱大神,期待真机

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

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

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

    喜欢这风格! 酷!

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

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

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

    价格还算可以

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

    期待大神新作

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

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

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

    现场好美啊

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

    看着貌似很不错

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

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

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

    这款旗舰不错!

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

    期待真机

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

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

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

    大神厉害!

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

    大神是良心企业

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

    小编好给力啊,期待期待

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

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

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

    该评论已删除

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

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

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

    国产称霸啊!

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

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

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

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

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

    好有想买的冲动!

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

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

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

    大神长得都差不多啊

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

    该评论已删除

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

    支持国货

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

    该评论已删除

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

    该评论已删除

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

    国产称霸啊

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

    该评论已删除

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

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

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

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

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

    好期待啊

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

    国货当自强。

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

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

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

    该评论已删除

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

    真心不错 超喜欢!

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

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

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

    该评论已删除

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

    这配置,这身形,太牛了

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

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

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

    该评论已删除

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

    外观质感非常不错

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

    我也是煤油,支持

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

    好手机,快到我袋里来

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

    该评论已删除

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

    不知道真机到底怎么样

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

    那么多应用感觉都没用的

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

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

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

    喜欢的手机,会继续支持

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

    回归正常分辨率了

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

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

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

      @爷爷嗯,不错,你大爷

  90. 暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏