echarts统计,简单示例
先看下效果图
看下代码
js文件可以参考官网,或者在这里下载,引入
下面是具体方法
my_demo_chart.showLoading({
text: '加载中...',effect: 'whirling'
});
var echarts_all_option = {
title: {
text: '',subtext: '<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>走势'
},tooltip: {
trigger: 'axis'
},legend: {
data: ['<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>数','<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a>消耗']
},tool<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>: {
show: true,feature: {
mark: {show: true},dataView: {show: true,readOnly: false},magicType: {show: true,type: ['line','bar']},restore: {show: true},saveAsImage: {show: true}
// myTool2: {
// show: true,// title: '自定义扩展方法',// icon: 'image://http://echarts.baidu.com/images/favicon.png',// onclick: function (){
// alert('自定义')
// }
// }
}
},dataZoom: {
show: false,start: 0,end: 100
},xAxis: [
{
type: 'category',boundaryGap: true,data: show_data[1]
},{
type: 'category',data: show_data[1]
}
],yAxis: [
{
type: 'value',scale: true,name: '用户数',boundaryGap: [0,0.5]
// boundaryGap: [0.2,0.2]
},{
type: 'value',0.5]
}
],series: [
{
name: '用户消耗',type: 'bar',xAxisIndex: 1,data: show_data[0]
},{
name: '用户数',type: 'line',data:show_data[0]
}
]
};
my_demo_chart.hideLoading();
my_demo_chart.setOption(echarts_all_option);
};
// <a href="https://www.jb51.cc/tag/huoqu/" target="_blank" class="keywords">获取</a>原始数据
$.ajax({
url:"__CONTROLLER__/getRes",async:false,dataType:'json',type:'post',success:function(msg){
var result = msg.result;
if(msg.code == 200){
for(var i = 0 ; i < result.length; i++){
date.push(result[i].date);
num.push(result[i].count);
msg[0] = num;
msg[1] = date;
refreshChart(msg);
}
}
}
});
};
// 默认加载
var default_load = (function () {
init_echarts();
})();
});
至此,一个简单的echarts的统计图就出来了
对echarts中一些参数不太理解的,大家可以参考官网 Echarts Documentation
原文链接:https://www.f2er.com/php/16430.html