最近在做一個體檢的項目，有數據分析的模塊，用到了echarts這個插件，記錄一下下咯！
1.引入js
<script src="/public/dist/js/echarts.js"></script>2.在dom中插入chart
<div id="pie">
<div id="pieChart" style="width:650px;height:300px;"</div>
</div>3.初始化chart
var myChartNum = echarts.init(document.getElementById("num"));4.初始化配置
option = {
title : {
text: '某地區蒸發量和降水量',
subtext: '純屬虛構'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['蒸發量','降水量']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸發量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降水量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};5.填充chart
myChartNum.setOption(option);項目中具體的例子：
//統計圖
$(function () {
var medical_id = 1;
var starttime = '';
var endtime = '';
var corporate = '';
dataAjax(medical_id,starttime,endtime,corporate);
function dataAjax(medical_id,starttime,endtime,corporate){
$.ajax({
url: "/analyze/data",
type: "post",
data:{
medical_id:medical_id,
starttime:starttime,
endtime:endtime,
corporate:corporate
},
dataType: "json",
success: function(msg) {
//status=0:刷新頁面 status=1：選擇時間 status=2：選擇時間和公司
var jsons = msg;
var status = jsons.status;
if(status == 0){
$('.bar').hide();
$('.pie').show();
setPie(jsons);
}else if(status == 1){
$('.bar').show();
$('.pie').show();
setNum(jsons);
setPie(jsons);
}else if(status == 2){
$('.bar').show();
$('.pie').hide();
setNum(jsons);
}else{
$('.bar').hide();
$('.pie').hide();
$('.errorBox').hide().fadeIn(500);
}
}
});
}
function setNum(jsons) {
// function GetDateStr(AddDayCount) {
// var dd = new Date();
// dd.setDate(dd.getDate()+AddDayCount);//獲取AddDayCount天后的日期
// var y = dd.getFullYear();
// var m = dd.getMonth()+1;//獲取當前月份的日期
// var d = dd.getDate();
// return m+"月"+d+"日";
// }
//柱狀圖
var myChartNum = echarts.init(document.getElementById("num"));
option = {
title : {
text: jsons.datas.bardatas.dateTitle[0]+jsons.datas.bardatas.firmTitle[0]+'體檢人數'
},
color:
['#1790CF','#1BB2D8']
,
tooltip : {
trigger: 'axis'
},
grid: { //直角座標系內繪圖網格,
bottom: '3%',
left:'2%',
containLabel: true//防止文字過多溢出
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : function () {
var data = [];
for (var i in jsons.datas.bardatas.date) {
data.push(jsons.datas.bardatas.date[i])
}
// data = data.reverse();
return data
}()
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'人數',
type:'bar',
data: function () {
var data = [];
for (var i in jsons.datas.bardatas.value) {
data.push(jsons.datas.bardatas.value[i])
}
// data = data.reverse();
return data
}()
}
]
};
myChartNum.setOption(option);
};
var pieChart;
function setPie(jsons){
//餅圖
if (pieChart != null && pieChart != "" && pieChart != undefined) {
pieChart.dispose();
}
pieChart = echarts.init(document.getElementById("pieChart"));
pieOption = {
title : {
text: '公司構成圖',
// subtext: '純屬虛構',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
legend: {
orient : 'vertical',
x : 'left',
data:[]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
// max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'體檢來源',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[]
}
]
};
var arrayName = [];
var arrayValue = [];
for (var i in jsons.datas.piedatas) {
arrayName.push(jsons.datas.piedatas[i].name);
};
for (var i in jsons.datas.piedatas) {
arrayValue.push(jsons.datas.piedatas[i]);
};
pieOption.legend.data = arrayName;
pieOption.series[0].data = arrayValue;
pieChart.setOption(pieOption);
}
//選擇時間
$(".widget-main").on("change","#starttime,#endtime",function () {
var starttime = $('#starttime').val();
var endtime = $('#endtime').val();
if($('#endtime').val()!=''){
if(endtime<=starttime){
alert('結束時間不可低於開始時間！');
$(this).val('');
$(this).focus();
}else{
var medical_id = 1;
var corporate = '';
dataAjax(medical_id,starttime,endtime,corporate);
}
}
});
//選擇時間和公司
$(".widget-main").on("change","#corporate",function () {
var starttime = $('#starttime').val();
var endtime = $('#endtime').val();
var corporate = $('#corporate').val();
if($('#endtime').val()!=''){
if(endtime<=starttime){
alert('結束時間不可低於開始時間！');
$('#endtime').val('');
$('#endtime').focus();
}else if(corporate !=''){
var medical_id = 1;
dataAjax(medical_id,starttime,endtime,corporate);
}
}
});
});