最近做的项目里面用的都是echarts,第一次用这个东西,感觉还是很不错的,今天搞好有点时间,就记录一下吧
1.用的时候引入jQuery.js
2.需要的js
以下是ECharts的下载链接,需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender,当然对于大部分图表而言不需要ZRender的,但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现,建议大家在下载ECharts时同时也要下载ZRender。
ECharts下载地址: http://echarts.baidu.com/
ZRender下载地址:http://ecomfe.github.io/zrender/index.html
用这个应该也可以的:
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
3.
<div id="echart" style="width:100%;height:500px">
</div>
4.
var myChart = echarts.init(document.getElementById('echart'), 'macarons');
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器,坐标轴触发有效
type : 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '50%',
data:[10, 52, 200, 334, 390, 330, 220]
}
]
};
myChart.setOption(option);
这是柱状图和折线图请求数据:
load();
function load(){
$.ajax({
type:"post",
async:true,
url:"/serve_application/getData",
dataType:"json",
success:function(result){
optionOne.xAxis[0].data=result.xAxisData;
optionOne.series[0].data=result.adReqArray;
myChartOne.hideLoading();
myChartOne.clear();
myChartOne.setOption(optionOne);
},
error : function(errorMsg) {
alert("图表请求数据失败!");
myChartOne.hideLoading();
}
});
}
后台返回来的json数据填充图表即可。
再来看看饼图请求数据:
load();
function load(){
$.ajax({
type:"post",
async:true,
url:"/serve_count_visit_Http/getData",
dataType:"json",
success:function(result){
var arraypie = [];
for(var i=0;i<result.length ;i++){
var mappie ={};
mappie.name = result.namehaha[i];
mappie.value = result.valuehaha[i];
arraypie[i]=mappie;
}
myChartPie.hideLoading();
myChartPie.setOption({
legend: {
data: result.namehaha
},
series:[{
// 根据名字对应到相应的系列
name: '访问来源',
type: 'pie',
data: arraypie
}],
});
},
error:function(){
alert("图表请求数据失败!");
myChartPie.hideLoading();
}
});
}
可以调整他的纵坐标的单位
yAxis : [
{
type : 'value',
//axisLabel : {
// formatter: '{value} sec'
//}
axisLabel : {
formatter: function(v){
var vs= parseInt(v);
vs=vs/(1024*1024*1024);
return vs.toFixed(2)+'G'
}
}
}
],
默认无数据是有气泡的 怎么办呢 ,可以给他默认值,也可以如下:
noDataLoadingOption :{
text: '暂无数据',
effect:'bubble',
effectOption : {
effect: {
n: 0 //气泡个数为0
}
},
textStyle: {
fontSize: 32,
fontWeight: 'bold'
}
}
好了,就先记录到这吧!