百度echarts的使用

我们做网站/应用的时候,很多需要数据统计报表,现在给大家推荐一个百度的报表控件,效果不错,兼容ie8+以上等主流浏览器。


百度echarts的使用

工具/原料

  • echarts开发包

方法/步骤

  1. 1

    我们下载好开发包后就可以开始了,第一步引入开发包,和需要的主题文件(可定义自己的主体文件),并定义好页面布局。2.0以后上的版本,需要把开发包放到body下,否则ie低版本会出现属性未找到的错误,导致图标初始化失败。

  2. 百度echarts的使用

  • 2

    第二步,普通初始化图表,通过调用开发包方法,有两种初始化方式,

    1.var myChart = echarts.init(document.getElementById("echart"));

    2.var myChart=require('echarts').init(document.getElementById("echart"));

    一般建议使用第一种方法进行初始化操作。

    百度echarts的使用

  • 3

  • 第三步,设置option属性,来给图表设置数据,option是数组元素,tooltip:提示框,legend图例,calculable可设置是否拖拽,series设置数据(data类型也为数组类型),我们开始先随机初始化几条模拟数据,

  • 4

    1.             到这一步,就完成了,图表初始化的步骤,效果如下图所示。然后大家是不是想我们可以改变下图标的样式?答案是可以
                的,2.0版本为我们留了设置主题的方法,可设置setThem()对图表样式进行修改
  • 百度echarts的使用2


  • 5

    我们来看看,主题怎么设置吧,设置色板,设置主题颜色,不一一介绍了,请大家看下面代码:

  • 百度echarts的使用
    百度echarts的使用
    百度echarts的使用
    百度echarts的使用

  • 2



    5

    6

    通过上面主题的添加我们就完成了对样式的修改,当然最后大家记嘚设置myChart.setTheme(theme);

注意事项

  • 引入源文件要放到body下避免ie8下图例不出来
百度echarts的使用

百度echarts的使用

百度echarts的使用

百度echarts的使用
百度echarts的使用
百度echarts的使用

百度echarts的使用
百度echarts的使用

百度echarts的使用
百度echarts的使用

百度echarts的使用
百度echarts的使用
百度echarts的使用
百度echarts的使用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值