UDN-企业互联网技术人气社区

板块导航

浏览  : 870
回复  : 10

[原生js] 图表库ECharts的使用

[复制链接]
bobby的头像 楼主
发表于 2018-7-13 16:48:00 | 显示全部楼层 |阅读模式

echart2.jpg


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

1、引入echarts.js

2、准备容器(一般是一个具有高宽的div元素)
  1. <font face="微软雅黑">
  2. #chart-one{
  3. width:400px;
  4. height:300px;
  5. }

  6. </font>
复制代码


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

  1. <font face="微软雅黑">var chart_one = echarts.init(document.getElementById('chart-one'));</font>
复制代码


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

效果:





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

echart2.jpg
QQ%E6%88%AA%E5%9B%BE20170319225657.png
发表于 2018-7-13 16:48:33 | 显示全部楼层
js太强大了,好多工作前端都可以做了…
使用道具 举报

回复

发表于 2018-7-14 14:08:56 | 显示全部楼层
js是要逆天的节奏js虽然不错,但是天生也是有缺陷,局限性。。。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部