Echarts插件使用
Echarts插件使用
1、插件引用
2、html代码
/**
* 默认参数
*/
defaultOption: {
xdata:['8-23','8-24','8-25','8-26','8-27','8-28'], //x轴日期
},
1、线状图
1、插件引用
2、html代码
近七日马鞍山景点订单门票数概览
近七日马鞍山线路订单数概览
昨日销售总金额（元）
/**
* 默认参数
*/
defaultOption: {
xdata:['8-23','8-24','8-25','8-26','8-27','8-28'], //x轴日期
},
1、线状图
/**
* 景点echarts线状图
* @returns
*/
scenicChart:function(ydataRoute){
var worldMapContainer = document.getElementById('ticketSale');
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = window.innerWidth-50+'px';
//worldMapContainer.style.height = window.innerHeight+'px';
};
//设置容器高宽
resizeWorldMapContainer();
/*初始化景点门票数echarts实例*/
var scenicChart = echarts.init(worldMapContainer);
var option = {
color: ['#E47A3D'],
tooltip : {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : main.defaultOption.xdata,
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'门票销量',
symbol:'none', //这句就是去掉点的
type:'line',
smooth:true, //这句就是让曲线变平滑的
stack: '总量',
areaStyle: {normal: {}},
data:ydataRoute
}
]
};
// 使用刚指定的配置项和数据显示图表。
scenicChart.setOption(option);
//用于使chart自适应高度和宽度
window.onresize = function () {
//重置容器高宽
resizeWorldMapContainer();
scenicChart.resize();
};
}, /**
* 线路echart图标
*/
routeChart:function(ydataRoute){
var routeChartContainer = document.getElementById('passengerFlow');
//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
/*var resizeRouteChartContainer = function () {
routeChartContainer.style.width = window.innerWidth-900+'px';
//worldMapContainer.style.height = window.innerHeight+'px';
};*/
//设置容器高宽
//resizeRouteChartContainer();
/*初始化线路订单数echarts实例*/
var routeChart = echarts.init(routeChartContainer);
var option = {
color: ['#68B3C8'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : main.defaultOption.xdata,
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'客流量',
type:'bar',
barWidth: '60%',
data: ydataRoute,
label: {
normal: {
show: true,
position: 'top'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
routeChart.setOption(option);
//用于使chart自适应高度和宽度
/*window.onresize = function () {
//重置容器高宽
resizeRouteChartContainer();
routeChart.resize();
};*/
}, /**
* 初始化饼状图图标
* @returns
*/
initEcharts:function(allData){
/*酒店、景点、线路的饼状图*/
var myChart = echarts.init(document.getElementById('totalNum'));
// 指定图表的配置项和数据
option = {
tooltip: {
trigger: 'item',
},
series: [
{
type:'pie',
radius : '60%',
center: ['50%', '60%'],
avoidLabelOverlap: false,
color:['#68B3C8','#EB5E28','#F3BB45'],
label: {
normal: {
//position: 'inner',
show: true,
textStyle: {
fontSize: '16',
}
},
emphasis: {
show: true,
textStyle: {
fontSize: '16',
}
}
},
labelLine: {
normal: {
//show:false
smooth: 0.2,
length: 20,
length2: 20
}
},
animation:false,
itemStyle:{
normal:{
label:{
show: true,
formatter: '{b} : ({c})'
},
//labelLine :{show:true}
}
} ,
data:allData,
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},