//动态更新图表设置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.
}