资讯专栏INFORMATION COLUMN

extjs-扩展:百度echarts引入

kid143 / 2944人阅读

摘要:本节介绍如何将百度的引入项目,官网先上个图,看一下效果图片描述思路正常情况下是以一个作为渲染容器的,而且这个必须指定高度初始化。

</>复制代码

  1. 本节介绍如何将百度的echarts引入extjs项目,echarts官网
先上个图,看一下效果

图片描述

思路

echarts正常情况下是以一个div作为渲染容器的,而且这个div必须指定高度初始化。在extjs里,适合干这件事的组件,就是panel面板了。可以在面板boxready事件中将echarts渲染到对应dom节点。

封装一个echart扩展:app/luter/ux/EchartsPanel.js

</>复制代码

  1. Ext.define("luter.ux.EchartsPanel", {
  2. extend: "Ext.panel.Panel",
  3. alias: "widget.echartspanel",
  4. liquidLayout: true,
  5. cls: "chart-body",
  6. initComponent: function () {
  7. var me = this;
  8. if (!me.height) {
  9. showFailMesg({
  10. msg: "请正确配置图表参数:height"
  11. })
  12. }
  13. if (!me.option) {
  14. showFailMesg({
  15. msg: "请正确配置图表参数:option"
  16. })
  17. }
  18. me.on("boxready", function () {//boxready后,获取到panel的dom元素,把echarts渲染上去。
  19. me.echarts = echarts.init(me.getEl().dom);
  20. if (me.option) {
  21. me.echarts.setOption(me.option);
  22. }
  23. });
  24. me.callParent();
  25. //同时绑定panel的resize事件,对charts图进行大小适配
  26. me.on("resize", function (ta, width, height, ow, oh, e) {
  27. me.echarts.resize(ow - 10, oh - 5);
  28. });
  29. }
  30. });
例子:

</>复制代码

  1. {
  2. xtype: "echartspanel",
  3. height: 300,//初始化高度
  4. option: {//charts的配置,来自百度echarts官网例子,具体参考百度官方的说明,
  5. title: {
  6. x: "right",
  7. text: "用户来源类型",
  8. subtext: "纯属虚构"
  9. },
  10. tooltip: {
  11. trigger: "item",
  12. formatter: "{a}
    {b}: {c} ({d}%)"
  13. },
  14. legend: {
  15. orient: "vertical",
  16. x: "left",
  17. data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
  18. },
  19. series: [
  20. {
  21. name: "访问来源",
  22. type: "pie",
  23. radius: ["50%", "70%"],
  24. avoidLabelOverlap: false,
  25. label: {
  26. normal: {
  27. show: false,
  28. position: "center"
  29. },
  30. emphasis: {
  31. show: true,
  32. textStyle: {
  33. fontSize: "30",
  34. fontWeight: "bold"
  35. }
  36. }
  37. },
  38. labelLine: {
  39. normal: {
  40. show: false
  41. }
  42. },
  43. data: [
  44. {value: 335, name: "直接访问"},
  45. {value: 310, name: "邮件营销"},
  46. {value: 234, name: "联盟广告"},
  47. {value: 135, name: "视频广告"},
  48. {value: 1548, name: "搜索引擎"}
  49. ]
  50. }
  51. ]
  52. }
  53. }```
最后,记得在app.html里面引入echarts的js文件,如下:

阅读需要支付1元查看
<