echart饼图和折线图实例
require.config({
paths: {
echarts: 'js/echart'
}
});
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/pie'
],
displayOption
);
var lineChart;
var pieChart;
function displayOption (ec) {
lineChart = ec.init(document.getElementById('line'));
pieChart = ec.init(document.getElementById('pie'));
var lineChartOtion= {};
//饼图获得数据
var Option= {}
lineChart.setOption(lineChartOtion);
pieChart.setOption(Option);
getChartOption();//aja后台交互获得数据
}
function displayOption1 (ec) {
lineChart = ec.init(document.getElementById('line'));
pieChart = ec.init(document.getElementById('pie'));
var lineChartOtion= {};
//饼图获得数据
var Option= {}
lineChart.setOption(lineChartOtion);
pieChart.setOption(Option);
getChartOption1();//aja后台交互获得数据
}
//向图表里面加数据
function drawChart(legendlines,xAxis,seriesline,legendpie,series1,series2){
lineChart.setOption({
backgroundColor: {
color: null
},
title: {
text: '流量流向趋势',
textStyle: {
fontSize: 18,
fontFamily:'微软雅黑',
fontWeight:'normal',
color: "black",
},
x:50
},
legend: {
orient: 'vertical',
x: '83%',
y: '15%',
textStyle: {
fontSize: 14,
fontFamily:'Roboto-Light',
color: '#36383c'
},
data:legendlines
},
grid: {
width: '68%',
height: '70%',
borderColor:'#f4f4f4',
borderWidth:2
},
tooltip: {
show: true,
formatter: "{a}
{b} : {c}"
},
toolbox: {
show: true,
feature : {
saveAsImage : {show: true}
}
},
xAxis: [
{
type: 'category',
boundaryGap: true,
axisTick: {
show: true,
},
splitLine:{
show:true,
lineStyle:{
color: ['#f4f4f4'],
width: 2,
type: 'solid'
}
},
data:xAxis
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}'
},
splitLine:{
show:true,
lineStyle:{
color: ['#f4f4f4'],
width: 2,
type: 'solid'
}
},
splitArea : {
show : true,
areaStyle:{
color: [
'rgba(200,200,200,0.1)',
'rgba(250,250,250,0.2)'
]
}
}
}
],
series:seriesline
});
pieChart.setOption({
backgroundColor: {
color: null
},
title: {
text: '流量流向分布',
textStyle: {
fontSize: 18,
fontFamily:'微软雅黑',
fontWeight:'normal',
color: '#36383c'
},
x:50
},
tooltip: {
show: true,
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: '3%',
y: '15%',
data:legendpie
},
toolbox: {
show: true,
feature: {
saveAsImage: {show: true}
}
},
series:[{
name: '访问来源',
type: 'pie',
center: ['58%', '50%'],
radius: '40%',
itemStyle: {
normal: {
label: {
position: 'inner',
formatter: function (params) {
return (params.percent - 0).toFixed(0) + '%'
}
},
labelLine: {
show: false
}
},
emphasis: {
label: {
show: true,
formatter: "{b}\n{d}%"
}
}
},
data:series1
},
{
name: '访问来源',
type: 'pie',
center: ['58%', '50%'],
radius: ['55%', '75%'],
data:series2
}]
});
}
//动态绘制图表
function ChangeChart(){
var line = data.lineChart;
var pie=data.pieChart;
//折线图表
//折线图表的类目
var legendlines=[];
for(var i=1;i
name:line[i].name,
icon:'circle'})
}
//折线图表的横轴
var xAxis=data.lineChart[0].value;
//折线图表的系列
var seriesline = [];
for (var i = 1; i < line.length; i++) {
seriesline.push({
name: line[i].name,
type: 'line',
smooth:'true',
symbol:'emptyCircle',
symbolSize : 3,
data: line[i].value
});
}
//饼图表
//饼图类目
var legendpie = [];
$.each(pie, function (i, o) {
legendpie.push(o.name);
});
//饼图系列1
var series1=[];
$.each(pie, function (i, o) {
if(o.name=='网内'||o.name=='网外' ){
series1.push({
name: o.name,
value: o.value
});
}
});
//饼图系列2
var series2=[];
$.each(pie, function (i, o) {
if(o.name!='网内'&&o.name!='网外' ){
if(o.name=='陕西移动'){
series2.push({ name: o.name,
type:"pie",
value: o.value,
itemStyle : {
normal : {
color : (function (){
var zrColor = require('zrender/tool/color');
return zrColor.getRadialGradient(
300, 200, 110, 300, 200, 140,
[[0, 'rgba(255,255,0,1)'],[1, 'rgba(30,144,250,1)']]
)
})()
}
}
})
}else{
series2.push({
name: o.name,
value: o.value
});
}
}
});
drawChart(legendlines,xAxis,seriesline,legendpie,series1,series2);
}
//第一次加载
function getChartOption()
{
ChangeChart();
}
//根据条件查找重新加载图表
function getChartOption1(){
search()
var page=data.page;
var pagesize=page.pagesize;
var total=page.totalNum;
$("#pageToolbar").Paging({pagesize:pagesize,count:total,toolbar:true});
ChangeChart();
drawTable(1);
}
//判断日期的格式当粒度为天时
//根据查询条件图表动态改变值
function check(){
var regexp = /^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])(\-)([0][1-9]|[1][0-2])(\-)([0-2][1-9]|[3][0-1])$/g;
var ym1 = /^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])(\-)([0][1-9]|[1][0-2])$/g;
var ym2 = /^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])(\-)([0][1-9]|[1][0-2])$/g;
var yym1 = /^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])(\-)([0][1-9]|[1-4][0-9]|[5][0-2])/g
var ld=$("#TimeDate").val();
var start=$("#Times").val();
var end=$("#Times1").val();
var regexp2 = /^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])(\-)([0][1-9]|[1][0-2])(\-)([0-2][1-9]|[3][0-1])$/g;
var yym2 = /^([1][7-9][0-9][0-9]|[2][0][0-9][0-9])(\-)([0][1-9]|[1-4][0-9]|[5][0-2])/g
var year,mouth,day,week;
var year1,mouth1,day1,week1;
var str="结束时间必须大于等于开始时间";
var format="开始日期格式错误";
var format1="结束日期格式错误";
if(ld=="2"){
if(!regexp.test(start)){
alert(format);
return false;
}
if(!regexp2.test(end)){
alert(format1);
return false;
}
//都符合日期格式后执行下面的
year=start.substr(0,4);
mouth=start.substr(5,2);
day=start.substr(8,2);
year1=end.substr(0,4);
mouth1=end.substr(5,2);
day1=end.substr(8,2);
if(year>year1){
alert(str);
return false;
}else if(mouth>mouth1){
alert(str);
return false;
}else if(day>day1){
alert(str);
return false;
}
}else if(ld=="3"){
var yy=start.substr(0,7);
var ee=end.substr(0,7);
alert(yy+"==="+ee);
if(!yym1.test(yy)){
alert(format);
return false;
}
if(!yym2.test(ee)){
alert(format1);
return false;
}
year=start.substr(0,4);
week=start.substr(5,2);
year1=end.substr(0,4);
week1=end.substr(5,2);
if(year>year1){
alert(str);
return false;
}else if(week>week1){
alert(str);
return false;
}
}else if(ld=="4"){
if(!ym1.test(start)){
alert(format);
return false;
}
if(!ym2.test(end)){
alert(format1);
return false;
}
year=start.substr(0,4);
mouth=start.substr(5,2);
year1=end.substr(0,4);
mouth1=end.substr(5,2);
if(year>year1){
alert(str);
return false;
}else if(mouth>mouth1){
alert(str);
return false;
}
}
$("#pie").html("");
$("#line").html("");
$("#tab-thead").html("");
$("#tab-tbody").html("");
$("#pageToolbar").html("");
require(
[
'echarts',
'echarts/chart/line',
'echarts/chart/pie'
],
displayOption1
);
return true;
};
//点击图表变色
function changeColor(obj){
obj.style. border="1px solid #379cf8";
}
function outcolor(obj){
obj.style. border="";
}