唯品秀博客
  • 温馨提示:唯品秀个人博客2016/11/16正式上线了!
  • 博客不定时更新、修复bug,若无法正常访问浏览,请稍后再试
  • 欢迎各位前端伙伴注册登录会员,共同分享前端技巧
  • 2018/04/24日最近更新:优化主导航高亮显示配置
首页 > 前端开发 > Javascript > 图表库–ECharts/Highcharts

图表库–ECharts/Highcharts

2017年04月16日 作者: 管理员 3050次浏览 条评论

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

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

支付宝
微信

上一篇:

下一篇:

前端简介

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

风云英雄

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,却获得了斯坦福、哈佛等许多常青藤名校课程的结业证……他们的同学不局限在一国一校,而是遍及全球……加入他们,成为一名互联网学习者!

站点统计

  • 文章: 128 篇
  • 分类: 13 个
  • 标签: 218 个
  • 运行: 554天
  • 访问:6,587,558次
  • 更新: 2018年6月22日
服务热线:
 182XXXX8470

 QQ在线交流

点击这里给我发消息
点击这里给我发消息

 旺旺客服