1 is provided with distance from the periphery of the graphic using the grid properties
grid: {
top: '1%',
left: '0%',
right: '5%',
bottom: '7%',
containLabel: true
},
2 is the name of the legend and icon using the legend
legend: {
data: [{
name: 'number of registered users'
icon: 'line'
}, {
name: 'sweep rate integration',
icon: 'line'
}, {
name: 'Integral consumption'
icon: 'line'
}, {
name: "year after purchase rate"
icon: 'line'
}]
},
3 is provided an x-axis position, y-axis scale of the coordinate axis (removing) the name and the coordinates
xAxis: {
type: 'value',
name: "number of users"
nameTextStyle: {fontSize: 10}, // set the font size of text
nameLocation: 'center', // set the position of the x-axis coordinate of the name
nameGap: '23', / / x-coordinate axis names of the distance from the x-axis, with the position of the grid can not be adjusted
axisLabel: {
formatter: function (value) {
return value / 10000> = 1 (value / 10000 + 'Wan'):? value // x coordinate scale filter
},
rotate: 0,
// interval: 4 // x axis inclined text
},
splitLine: {
show: false // remove the grid lines
},
axisTick: {
show: false // scale removal axis
},
axisLine: {
lineStyle: {
color: '# 666', // Font Color
width: 0 // This is the width of the axis, that is not displayed is 0
}
},
},
4 data pattern is provided
series: [{
type: 'bar',
data: user_data,
barWidth: '40% ', // set the size of the bar
silent: true,
itemStyle: {
normal: {
color: "#65C166",
label: {
show: true, // enable the display
position: 'insideLeft', // // display above the graphics that appear in the text
textStyle: {// value style
color: '#157056',
fontSize: 12
}
}
}
},
}
]
5 becomes smooth line graph, the point is removed
{
name: 'sweep rate integration',
type: 'line',
symbol: "none", // remove the dots
smooth: true, // so that the smoothed curve
yAxisIndex: 1, // this note, the official website of example only two folds, Cadogan own a line, add this property to go, otherwise the data are 0.
itemStyle: {
normal: {
label: {
show: false,
position: 'top',
textStyle: {
color: '#ffa630'
}
},
color: "#ffa630"
}
},
data: scanPointRate
},
6 When the screen changes, adaptive
window.onresize = function () {
trendChart.resize();
userChart.resize();
}