大数据可视化工具 （3） Echarts

//动态更新图表设置y轴刻度追加单位
function updateChart() {
<span style="white-space:pre">	</span>var option = myChart.getOption();
//动态设置y轴刻度追加单位
<span style="white-space:pre">	</span>option.yAxis[0].axisLabel = {
<span style="white-space:pre">		</span>formatter: function (value) {
<span style="white-space:pre">			</span>return value + "%";
<span style="white-space:pre">			</span>}
<span style="white-space:pre">		</span>};
<span style="white-space:pre">	</span>myChart.setOption(option);
}

异步加载数据

js:

require(

[

'echarts',

'echarts/chart/line'

],

drawChart

);

var myChart;

function drawChart(ec){

//折柱

myChart=ec.init(document.getElementById('       '));//id名

myChart.showLoading({

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

});

//定义图表option

var option={

title:{

text: " 通过ajax获取数据呈现图表示例";

},

tooltip:{

trigger:'axis';

},

legend:{

data:[]

},

toolbox:{

show:true;

feature:{

mark:false;

}

},

calculable:ture,

xAxis:[

{

type:'category',

data:[]

}

],

yAxis:[

{

type:'vale',

solitAera:{show:true}

}

],

series:[]

};

//通过Ajax获取数据

$.ajax({

type:"post",

async:false,//同步执行

url:"    "//url

dataType:"json",

success:function(result){

if(result){

//将返回的category和series对象赋值给options对象内的category和series

55. //因为xAxis是一个数组 这里需要是xAxis[i]的形式

}

}

})

}

r myChart;

02.  

03. //创建ECharts图表方法

04. function DrawEChart(ec) {

05. //--- 折柱 ---

06. myChart = ec.init(document.getElementById('main'));

07. //图表显示提示信息

08. myChart.showLoading({

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

10. });

11. //定义图表options

12. var options = {

13. title: {

14. text: "通过Ajax获取数据呈现图标示例",

15. subtext: "www.stepday.com",

16. sublink: "http://www.stepday.com/myblog/?Echarts"

17. },

18. tooltip: {

19. trigger: 'axis'

20. },

21. legend: {

22. data: []

23. },

24. toolbox: {

25. show: true,

26. feature: {

27. mark: false

28. }

29. },

30. calculable: true,

31. xAxis: [

32. {

33. type: 'category',

34. data: []

35. }

36. ],

37. yAxis: [

38. {

39. type: 'value',

40. splitArea: { show: true }

41. }

42. ],

43. series: []

44. };

45.  

46. //通过Ajax获取数据

47. $.ajax({

48. type: "post",

49. async: false, //同步执行

50. url: "/Ajax/GetChartData.aspx?type=getData&count=12",

51. dataType: "json", //返回数据形式为json

52. success: function (result) {

53. if (result) {                       

54. //将返回的category和series对象赋值给options对象内的category和series

55. //因为xAxis是一个数组 这里需要是xAxis[i]的形式

56. options.xAxis[0].data = result.category;

57. options.series = result.series;

58. options.legend.data = result.legend;

59. myChart.hideLoading();

60. myChart.setOption(options);

61. }

62. },

63. error: function (errorMsg) {

64. alert("不好意思，大爷，图表请求数据失败啦!");

65. }

66. });

67. }