1 设置图形距周边 的距离 使用 grid属性
grid: {
top: '1%',
left: '0%',
right: '5%',
bottom: '7%',
containLabel: true
},
2 设置图例的是名字和图标使用legend
legend: {
data: [{
name: '注册用户数',
icon: 'line'
}, {
name: '积分扫码率',
icon: 'line'
}, {
name: '积分消耗率',
icon: 'line'
}, {
name: "年复购率",
icon: 'line'
}]
},
3 设置x轴,y轴的坐标轴的刻度(去除)和坐标名称的位置
xAxis: {
type: 'value',
name: "用户数",
nameTextStyle:{fontSize:10},// 设置文字字体大小
nameLocation: 'center', // 设置x轴 的坐标名称的位置
nameGap: '23', / / x坐标轴名称距离x轴的距离，位置不对可以配合grid来调节
axisLabel: {
formatter: function (value) {
return value / 10000 >= 1 ? (value / 10000 + '万') : value // 过滤x轴坐标的刻度
},
rotate: 0,
// interval:4 //x轴文字倾斜
},
splitLine: {
show: false //去掉网格线
},
axisTick: {
show: false // 去除轴线的刻度
},
axisLine: {
lineStyle: {
color: '#666', // 字体颜色
width: 0 //这里是坐标轴的宽度,为0就是不显示
}
},
},
4 图形的设置data
series: [{
type: 'bar',
data: user_data,
barWidth: '40%',// 设置bar的大小
silent: true,
itemStyle: {
normal: {
color: "#65C166",
label: {
show: true, //开启显示
position: 'insideLeft', //在上方显示 // 图形文字在那显示
textStyle: { //数值样式
color: '#157056',
fontSize: 12
}
}
}
},
}
]
5 折线图变成圆滑，去除点
{
name: '积分扫码率',
type: 'line',
symbol: "none", //去掉圆点
smooth:true, //让曲线变平滑的
yAxisIndex: 1, // 这个注意，官网上的例子只有两条折线，自己加多一个折线 ，这个属性要加上去，否则数据都为0.
itemStyle: {
normal: {
label: {
show: false,
position: 'top',
textStyle: {
color: '#ffa630'
}
},
color: "#ffa630"
}
},
data: scanPointRate
},
6 屏幕改变的时候，自适应
window.onresize = function () {
trendChart.resize();
userChart.resize();
}