echart百度图表使用方法

最近几个项目都是有关图表,在国内echart和国外highchart比较,还是比较倾向于使用echart做可视化,echart是完全开源,配置项文档非常详细。

创建html文档,设置好DOM,给节点设置width和height

步骤1

引入echart.min.js文件

步骤2

配置echarts和折线图

步骤3

(1)require.config是用来设置echarts的配置文件,配置好本地echarts文件路径。(2)关于第二个require,这里是用来设置要表。除了第一个‘echarts’必要引用外,还要引用所需要显示的图。例如,我们这个表用到的是柱状图,所以要引用bar,那么如果我们要引用折线图,那么就要引用line了,依次类推,具体可以看官方文档。

对获取得到的id进行echarts初始化

步骤4

重点是option里的设置,设置坐标轴、设置数据。

步骤5

数据显示有断开,在series中label加上formatter方法

步骤6

y轴上的超过1000,显示千。在axisLabel中增加formatter方法

步骤7

最终可视化

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 用到的组件 1、通过CocoaPods安装 2、第三方类库安装 3、第三方服务 友盟社会化分享组件 友盟用户反馈 ...
    SunnyLeong阅读 14,688评论 1 180
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,908评论 18 139
  • 随着H7N9的流行,我又重新开始了一波畏惧死亡的心理历程。关于畏惧死亡,我有一系列心酸的故事。 记得当...
    lettory阅读 514评论 1 1
  • 再大的热情,也熬不过时间的冲刷。 不知道是何时,一直维持现状的那根弦就断了,并且一断不可收拾,断得支离破碎,想捡也...
    天火仙人阅读 1,272评论 2 5
  • 转自:http://www.cnblogs.com/haippy/archive/2012/07/05/25772...
    晴天哥_王志阅读 753评论 0 0