最近被叫去写数据后台的页面,嗯,我是一个java开发,还是偏数据方向,但是,不能让cto和师傅失望,ok,但是会写的慢一点。(说这句话的时候我已经给后台写了7个页面,包括接口和sql)。
其实echarts对前端来说挺简单的,我主要写给那些和我一样非前端的,如有错误,可以提,不接受批评,谢谢。
这里写代码片
var lineChartDataOne = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
legend: {
data:['整体销售率','供应商销售率','整体收入','供应商收入'],
x: 'right'
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
dataZoom: [
// { //是否显示下方拖拉条
// show: true,
// realtime: true,
// start: 65,
// end: 85
// }
// ,
{
type: 'inside',
realtime: true,
start: 0,
end: 100
}
],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: []
}
],
yAxis: [
{ //两个y轴,同理两个x轴也一样
name: '销售率(%)',
type: 'value',
max: null
},
{
name: '收入(元)',
//nameLocation: 'start',
max: null,
type: 'value',
inverse: false //起始点
}
],
series: [
{
name: '整体销售率',
type: 'line',
//stack: '总量', //折线是否带下方阴影
//areaStyle: {normal: {}},
data: []
},
{
name: '供应商销售率',
type: 'line',
//stack: '总量',
//areaStyle: {normal: {}},
data: []
},
{
name: '整体收入',
type: 'line',
yAxisIndex:1,
//stack: '总量',
smooth:true,
//areaStyle: {normal: {}},
data: []
},
{
name: '供应商收入',
type: 'line',
yAxisIndex:1,
// stack: '总量',
smooth:true,
//areaStyle: {normal: {}},
data: []
}
]
},
聪明的小伙伴看代码就能看懂了把,如果不懂就问我或者去echarts官网的配置项里全局搜索。
之后的效果是这样的:
(改天去公司截图—-汗)
欢迎关注我的微博@住街对面的查理,我的生活很有趣,你要不要来看一看。