大数据可视化工具 (3) Echarts

时间:2023-01-23 03:46:05
//动态更新图表设置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",
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. }