echarts线状图

2018/03/06 14:33
阅读数 0

<div id="mycharts" ref="chartBox">
<span v-html="loading"></span>
</div>

//引入线状图
import 'echarts/lib/chart/line'
//echarts配置(挂载时导入图)
creatChartFun(){
this.myChart = echarts.init(this.$refs.chartBox);
let option = {
tooltip: {
trigger: 'axis',
axisPointer:{lineStyle:{color:'rgb(239, 243, 250)'},},
backgroundColor:'#fff',
textStyle:{color:'#999', fontSize:12,},
extraCssText: 'box-shadow: 0 2px 10px #ccc;'
},
legend: {
data:this.lineName.name,
top:"30",
selectedMode: 'single'
},
grid: {
left: '3%',
right: '3%',
bottom: '2%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: this.getDateList(30),
interval:6,
axisLine:{show:false, lineStyle: {color: 'rgb(153, 153, 153)'}},
axisTick:{lineStyle:{color:'rgb(239, 243, 250)'}},
},
yAxis: {
type: 'value',
splitLine:{show: false},
axisLine:{show:false , lineStyle:{color:'gray',}},
axisTick:{show:false}
},
series:this.datas.lineData
};
this.myChart.setOption(option,true);
},
/**
* 获取前一个月时间
* @param range 获取多少天,默认30
* @returns {Array} 过去一个月的天数
*/
getDateList(range){
range = range ? range : 30;
var list = [];
for(let i = range-1; i >= 0; i--){
var dd = new Date(new Date()-24*60*60*1000*i);
var m = dd.getMonth()+1;//获取当前月份的日期
var d = dd.getDate();
if(m<10){
m = '0'+m;
}else{
m = m.toString();
}
if(d < 10 ){
d = '0'+d;
}else{
d = d.toString();
}
list.push(m+d);
}
return list;
},
datas:[
{
title:"扫码次数", //名字
total:"31925", //总数
yesterday:"2000", //昨天的数据
today:"5000", //今天的数据
type:0, //数据类型 0 普通的 1 百分比 2 时间(秒)
},{
title:"访客",
total:"5512",
yesterday:"200",
today:"200",
type:0,
},{
title:"参与人数",
total:"325",
yesterday:"70",
today:"100",
type:0,
},{
title:"发放人数",
total:"60",
yesterday:"20",
today:"14",
type:0,
},{
title:"奖励金额",
total:"22",
yesterday:"5",
today:"1",
type:0,
},{
title:"奖励积分",
total:"22",
yesterday:"5",
today:"1",
type:0,
}
], //昨日今天比较数据
lineData: [
{
name:'扫码次数',
type:'line',
showSymbol:false,
smooth: true,
data:[120, 132, 101, 134, 90, 230,150, 232, 820, 932, 901, 934, 1290, 1330, 1320,201, 154, 190, 330, 410, 210,220, 182, 191, 234, 290, 330, 310,320, 332, 301, 334, 390, 330, 320]
},
{
name:'访客',
type:'line',
showSymbol:false,
smooth: true,
data:[150, 232, 201, 154, 190, 330, 410,220, 182,820, 932, 901, 934, 1290, 1330, 1320, 191, 234, 290, 330, 310,320, 332, 301, 334, 390, 330, 320]
},
{
name:'参与',
type:'line',
showSymbol:false,
smooth: true,
data:[150, 232,820, 932, 901, 934, 1290, 1330, 1320, 201,120, 132, 101, 134, 90, 230,150, 154, 190, 330, 410,320, 332, 301, 334, 390, 330, 320]
},
{
name:'金额',
type:'line',
showSymbol:false,
smooth: true,
data:[320, 332, 301, 334, 390, 330, 150, 232,820, 932, 901, 934, 1290,320,120, 132, 101, 134, 90, 230,150,820, 932, 901, 934, 1290, 1330, 1320]
},
],
computed:{
//数据名称
lineName(){
let obj = {
name:[],
num:[]
};
for(let i in this.datas.lineData){
obj.name.push(this.datas.lineData[i].name)
let num = 0;
for(let j = 0; j < this.datas.lineData[i].data.length; j++){
num += this.datas.lineData[i].data[j]*1
}
obj.num.push(num)
}
return obj;
}
},




 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部