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