var mock = echarts.init(document.getElementById('mock ')); //重置节点
option //canvas要展示的数据
color //柱状图柱子的颜色,折线图折线的颜色....
legend //图形的注释
xAxis,yAxis //表示X轴,Y轴
xAxis: {
type: 'category', //坐标轴类型
boundaryGap: false, //分界线
data: ['周一','周二','周三','周四','周五','周六','周日'], //坐标轴数据
axisLabel: { //坐标轴数据属性
show: true, //显示或隐藏坐标轴数据
textStyle: {
color: '#bbb' //坐标轴数据颜色
}
},
axisLine:{ //坐标轴线条属性
lineStyle:{
color:'#fff', //颜色
width:1, //粗细 这里是为了突出显示加上的,可以去掉
}
}
}
series : [
{
name:'注册增量', //数据名称
type:'line', //图形类别
stack: '总量', //堆栈***
areaStyle: {normal: {}}, //区域样式
data:[120, 132, 101, 134, 90, 230, 210], //数据
itemStyle: { //项目样式
normal: {
color: new echarts.graphic.LinearGradient( //曲线围成的面积的颜色
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(70,85,158,1)'},
{offset: 0.5, color: 'rgba(70,85,158,0.5)'},
{offset: 1, color: 'rgba(70,85,158,0)'}
]
)
}
},
lineStyle: { //线条样式
normal: {
color: "rgba(70,85,158,1)" // 线条颜色
}
},
}
]
mock .setOption(option); //绘图