1,引用
<script src="/assets/global/plugins/echarts/echarts.js" type="text/javascript"></script>
<script src="/assets/global/plugins/echarts/vintage.js" type="text/javascript"></script>
2,初始化
var myChart_c;
var dataBT;
var dataX;
var dataY;
myChart_c = echarts.init(document.getElementById('main_c'), 'vintage');
var option = {
title: {
text: "优惠券购买统计报表——暂无数据",
x: 'center',
top: 'middle'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
legend: {
data: ['']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [
]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
]
};
myChart_c.setOption(option);
3,读取数据
从后台读取数据。数据格式返回为
{
"m": [
1,
2
],
"c": [
0,
29
],
"forbt": [
{
"name": "2月",
"value": 29
}
]
}
myChart_c.hideLoading();
myChart_c.showLoading();
setTimeout(initBuyPriv, 1000);
$.ajax({
url: url,
dataType: "json",
async: true,
data: {
"year": cyear,
"month": cmonth,
"cmonth": $("#ddlmonth_c").val(),
"parkName": $("#parkSelect_c").val(),
"sumtype": $("#ddlsumtype_c").val()
},
success: function (msg) {
// msg = JSON.parse(msg);
if (msg) {
var tempmonth = $("#ddlmonth_c").val();
dataBT = msg.forbt;
dataX = msg.m;
dataY = msg.c;
showBarNew();
}
}
});
4,showBarNew生成柱状图表
var option = {
title: {
text: "test",
x: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
},
formatter: function (params, ticket, callback) {
if (params[0].name == "平均值" || params[0].name == "最大值" || params[0].name == "最小值") {
return "";
}
else {
return '时间:' + params[0].name + tooltiptitle + '<br/>记录数:' + params[0].value + '' + tempDw + '';
}
}
},
toolbox:{
show: true,
itemSize: 20,
feature: {
magicType: { show: true, type: ['line'], title: { line: '折线图' } },
restore: { show: false },
myTool1: {
show: true,
title: '饼图',
icon: 'image://http://cloud.lebopark.com/images/pie.png',
onclick: function () {
showPie();//切换饼图
}
},
myTool2: {
show: true,
title: '柱状图',
icon: 'image://http://cloud.lebopark.com/images/bar.png',
iconStyle: { width: 100 },
onclick: function () {
showBarNew();//切换柱状图
}
}
}
},
calculable: true,
legend: {
orient: 'horizontal',
align: 'left',
data: "",
left: '20%',
top: 'bottom'
},
xAxis: [
{
type: 'category',
name: "h1",
data: ""
}
],
yAxis: [
{
type: 'value',
name: "ci",
}
],
grid: {
x: 120,
y: 150
},
series: [
{
name: "",
type: 'bar',
data: dataY,
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(120, 36, 50, 0.5)',
shadowOffsetY: 5
}
},
markPoint: {
data: [
{
type: 'max',
name: '最大值',
symbolSize: function (value, params) {
return calsymsize(value);
}
},
{
type: 'min', name: '最小值', symbolSize: function (value, params) {
return calsymsize(value);//动态改变平均值水滴的大小
}
}
]
},
//系列中的数据标线内容
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
}
]
};
myChart_c.off("click");
myChart_c.setOption(option, true);
myChart_c.hideLoading();
5,showPie()。切换饼图
var option = {
title: {
text: "",
x: 'center'
},
tooltip: tooltip,
legend: {
orient: 'vertical',
align: 'left',
data: [],
left: '20%',
top: '20%'
},
toolbox: {
show: true,
itemSize: 20,
feature: {
magicType: { show: false, type: ['line'], title: ["折线图"] },
restore: { show: false },
myTool1: {
show: true,
title: '饼图',
icon: 'image://http://cloud.lebopark.com/images/pie.png',
onclick: function () {
showPie();
}
},
myTool2: {
show: true,
title: '柱状图',
icon: 'image://http://cloud.lebopark.com/images/bar.png',
onclick: function () {
showBarNew();
}
}
}
},
series: [
{
name: '访问来源',
type: 'pie',
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(25, 100, 150, 0.5)',
shadowOffsetY: 5,
color: '#61A0A8'
}
},
roseType: 'angle',
radius: '55%',
data: dataBT
}
]
};
myChart_c.off("click");
myChart_c.setOption(option, true);
myChart_c.hideLoading();
7,function calsymsize(value) {
var symbol = [50, 50];
switch (value.toString().length) {
case 4:
symbol = [60, 50];
break;
case 5:
symbol = [70, 50];
break;
case 6:
symbol = [80, 50];
break;
case 7:
symbol = [85, 50];
break;
case 8:
symbol = [95, 50];
break;
case 9:
symbol = [110, 70];
break;
case 10:
symbol = [120, 80];
break;
case 11:
symbol = [125, 80];
break;
default:
symbol = [50, 50];
break;
}
return symbol;
}