// 实例化eChart图表
function initEchart( idName, option ) {
var myEchart = echarts.init( document.getElementById( idName ) );
myEchart.setOption( option );
}
// 随机数生成
function randomNum( digitNumber, holdNumber ) {
var random = Math.random();
random = Math.pow( 10, digitNumber ) * random;
random = random.toFixed(holdNumber);
return random;
}
var option = {
title: {
text: "XX市历年空气质量优良天数比例",
subtext: "",
x: '16', textStyle: {fontWeight: 'normal'}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
toolbox: {
orient: 'horizontal',
feature: {
magicType: {
type: ['line', 'bar']
},
restore: {show: true},
saveAsImage: {show: true}
},
bottom: 15,
right: 20
},
grid: { // 上下左右边距
top: "20%",
bottom: "10%",
left: "8%",
right: "8%",
containLabel: true
},
xAxis: {
type: 'category',
name: "年份",
nameTextStyle: {
color: '#6d9269'
},
data: ["2012", "2013", "2014", "2015", "2016", "2017"], // X轴分布类型
splitLine: { // 竖线
show: false
}
},
yAxis: {
type: 'value',
name: "优良天数占比(单位:%)",
nameTextStyle: {
color: '#6d9269'
},
axisTick: { // 轴的刻度
show: false
},
axisLine: { // 轴线
show: false
}
},
series: [{
name: "优良天数",
type: "line",
data: [randomNum(2, 2), randomNum(2, 2), randomNum(2, 2), randomNum(2, 2), randomNum(2, 2), randomNum(2, 2)], // Y轴对应类型的数值
symbolSize: 6, //拐点圆的大小
itemStyle: {
normal: {
color: '#6d9269', //拐点圆的颜色
lineStyle: {
color: '#6d9269' //折线线条颜色
}
}
}
}]
}
var echartId = 'lineChart-07';
initEchart(echartId, option);