Rumah hujung hadapan web tutorial js ExtJs整合的Echarts

ExtJs整合的Echarts

Mar 17, 2018 pm 01:29 PM
echarts extjs javascript

这次给大家带来ExtJs整合的Echarts,使用ExtJs整合Echarts的注意事项有哪些,下面就是实战案例,一起来看一下。

由于Echarts不提供表格功能,想要实现上图下表,需要自己增加一个table标签。

ExtJs整合Echarts

从Echarts官网下载js文件通过import引用 新建一个页面,通过竖直放置的两个p排版,上方预留给Echarts,下方预留给table标签

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

initPanel : function() {

 if (this.panel) {

  return

 }

  

 var panel = new Ext.Panel({

  id : 'echart',

  html :   '<p id="mainEchart" style="height:50%;border:1px solid #ccc;padding:10px;"></p>'

        '<p id="mainTable" style="position:relative;text-align:center;padding:10px;">'

        +'<label for="mainTable"><h1>档案调用次数表</h1></label>'

        +'<table id="content-table" border="1" style="width:100%;text-align:center;">'

        '<tr><th>月份</th><th>调用次数</th></tr>',

  buttonAlign : 'center',

  autoScroll : true,//允许滚动

  bodyStyle : 'overflow-x:hidden; overflow-y:scroll'

  //开启竖直滚动条,关闭水平滚动条

 });

  

 this.panel = panel;

 return this.panel; 

}

Salin selepas log masuk

Echarts初始化和数据加载

官方声明一次性只能生成一个echarts,定义相关的样式,并且从后台查询数据提供给echarts

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

initData : function(id, personName, year) {

 this.id = id;

 var p = document.getElementById("mainEchart");

 var myChart = echarts.init(p);

 // myChart.showLoading({

 // text: "图表数据正在努力加载..."

 // });

 this.myChart = myChart;

 // 初始化数据

 var data = [];

 var yearStr = "";

 var flag = false;

 var monthData = [];

  

 var res = QueryData();//调用数据查询,涉及项目名,略

  

 for (var i = 0; i < res.json.body.length; i++) {

  var map = res.json.body[i];

  monthData.push(map.MM);//月份

  data.push(map.DYCS);//调用次数

 }

 var options = {

  arg : {

   id : this.id

  },

  noDataLoadingOption : {

   text : '暂无数据',

   effect : 'bubble',

   effectOption : {

    effect : {

     n : 0

    }

   }

  },

  title : {

   text : personName + "的档案调用情况",

   x : 'west'

  },

  tooltip : {

   trigger : 'axis'

  },

  legend : {

   data : ['调用次数']

  },

  toolbox : {

   show : true,

   feature : {

    mark : {

     show : true

    },

    dataView : {

    //重写dataView

    //在切换视图的时候能够以<table>的形式显示

     show : true,

     readOnly : true,

     optionToContent : function(opt) {

      var axisData = opt.xAxis[0].data;

      var series = opt.series;

      var table = '<table style="width:100%;text-align:center" border="1"><tbody><tr>'

        '<td>时间</td>'

        '<td>'

        + series[0].name + '</td>'

        // + '<td>'

        // + series[1].name

        // + '</td>'

        '</tr>';

      for (var i = 0, l = axisData.length; i < l; i++) {

       table += '<tr>' '<td>' + axisData[i]

         '</td>' '<td>'

         + series[0].data[i] + '</td>'

         // + '<td>' + series[1].data[i]

         // + '</td>'

         '</tr>';

      }

      table += '</tbody></table>';

      return table;

     }

    },

    magicType : {

     show : true,

     type : ['line''bar']

    },

    restore : {

     show : true

    },

    saveAsImage : {

     show : true

    }

   }

  },

  calculable : true,

  xAxis : [{

     type : 'category',

     data : monthData

    }],

  yAxis : [{

     type : 'value',

     splitArea : {

      show : true

     }

    }],

  series : [{

   name : '调用次数',

   type : 'bar',

   barWidth : 35,

   data : data,

   itemStyle : {//修改柱状图的颜色并在顶部显示数值

    normal : {

     color : '#3575a8'

     label : {

      show : true,

      position : 'top',

      formatter : '{c}'//'{b}\n{c}'

     }

    }

   }

  }]

 };

 myChart.setOption(options, true);

 myChart.on('click'function eConsole(param) {

   });

 this.tableData(personName, monthData, data)

 //表格的加载

}

Salin selepas log masuk

表格数据的赋值

表格部分就是简单的html赋值,没什么好多讲的,注意拼接完后刷新一下html即可。 代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

tableData : function(personName, monthData, data) {

 // 表格部分

 var html = '<p id="mainTable" style="position:relative;text-align:center;padding:10px;">'

   +'<label for="mainTable"><h1>'

   + personName

   '档案调用情况表</h1></label>'

   +'<table id="content-table" border="1" style="width: 100%;text-align: center;">'

   '<tr style="height: 30px;text-align:center;"><th>月份</th><th>调用次数</th></tr>';

 // if(monthData.length != data.length)

 // throw new Error("数据条数不对,请检查!");

 for (var i = 0; i < data.length; i++) {

  html += '<tr style="height: 30px;text-align: center;">'

     +'<td id="data-month-'+i+'">'

     + monthData[i]

     '</td><td id="data-value-'+i+'">'

     + data[i]

     '</td></tr>'

 }

 html += '</table></p>';

 document.getElementById('mainTable').innerHTML = html;

}

Salin selepas log masuk

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

javascript模块加载器是怎么运行的

怎样实现微信web端后退强制刷新

Atas ialah kandungan terperinci ExtJs整合的Echarts. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Langkah-langkah untuk melukis papan pemuka menggunakan antara muka ECharts dan Python Langkah-langkah untuk melukis papan pemuka menggunakan antara muka ECharts dan Python Dec 18, 2023 am 08:40 AM

Langkah-langkah untuk melukis papan pemuka menggunakan antara muka ECharts dan Python

Cara menggunakan antara muka php dan ECharts untuk menjana carta statistik visual Cara menggunakan antara muka php dan ECharts untuk menjana carta statistik visual Dec 18, 2023 am 11:39 AM

Cara menggunakan antara muka php dan ECharts untuk menjana carta statistik visual

Cara menggunakan peta haba peta untuk memaparkan haba bandar dalam ECharts Cara menggunakan peta haba peta untuk memaparkan haba bandar dalam ECharts Dec 18, 2023 pm 04:00 PM

Cara menggunakan peta haba peta untuk memaparkan haba bandar dalam ECharts

Cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts Cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts Dec 18, 2023 am 08:52 AM

Cara menggunakan carta kalendar untuk memaparkan data masa dalam ECharts

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP

Cara menggunakan antara muka ECharts dan php untuk menjana carta statistik Cara menggunakan antara muka ECharts dan php untuk menjana carta statistik Dec 18, 2023 pm 01:47 PM

Cara menggunakan antara muka ECharts dan php untuk menjana carta statistik

Carta berbilang paksi ECharts: cara memaparkan data berbilang dimensi Carta berbilang paksi ECharts: cara memaparkan data berbilang dimensi Dec 18, 2023 pm 06:39 PM

Carta berbilang paksi ECharts: cara memaparkan data berbilang dimensi

Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Jan 05, 2024 pm 01:37 PM

Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah

See all articles