关注前端开发
关注用户体验

图表库ECharts的使用

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

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

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

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

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

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

4、 图表的配置项和数据

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请查看官网文档。

赞(58)
未经允许不得转载:大前端 » 图表库ECharts的使用
分享到: 更多 (0)

评论 18

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #17

    It’s amazing designed for me to have a site, which is valuable designed
    for my experience. thanks admin

  2. #16

    I think this is among the most important information for me. And i’m glad reading your article. But want to remark on few general things, The web site style is wonderful, the articles is really nice : D. Good job, cheers

    Shery Conedy1个月前 (05-13)回复
  3. #15

    most cosmetics today are made up of artificial products that can harm the skin, there are still few natural cosmetics on the market-

    Nonton Anime1个月前 (05-10)回复
  4. #14

    I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post…cool desktop

    Nadia Relford2个月前 (04-08)回复
  5. #13

    hi!,I like your writing so a lot! share we communicate far more about your article on AOL? I need a specialist on this area to solve my problem. May be that’s you! Looking forward to see you.

    my singing monsters3个月前 (03-28)回复
  6. #12

    Finicky post, finicky site, I give rise to bookmarked your blog, it truly is acceptable responsibility this. Say thanks.

    Fredric Scaman3个月前 (03-11)回复
  7. #11

    mark

    solfKwolf11个月前 (07-26)回复
  8. #10

    官网照搬个实例过来真的好吗?要你何用

    zsz1年前 (2018-06-19)回复
  9. #9

    最近在用echarts

    ss1年前 (2018-04-06)回复
  10. #8

    GZ1年前 (2018-03-26)回复
  11. #7

    daanjia.com lanvbo.com

    7592年前 (2017-07-17)回复
  12. #6

    daanjia.com lanvbo.com

    972年前 (2017-07-16)回复
  13. #5

    可以随便评论?

    576772年前 (2017-07-11)回复
  14. #4

    辣女啵

    112年前 (2017-07-11)回复
  15. #3

    1

    mcy2年前 (2017-07-06)回复
  16. #2

    进来

    562年前 (2017-05-13)回复
  17. #1

    评论支持图片吗

    您输入的好像不是QQ号码2年前 (2017-03-29)回复
    • ww

      ff2年前 (2017-07-05)回复

themebetter 国内更好的WordPress主题服务商

立即前往