eCharts-散点图 配置说明

// 实例化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: "2018年广州市空气首要污染物天数占比",
subtext: "",
x: '16', textStyle: {fontWeight: 'normal'}
},
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
},
tooltip: {
padding: 10,
backgroundColor: '#222',
borderColor: '#777',
borderWidth: 1,
formatter: function (obj) {
var value = obj.value;
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
+ obj.seriesName + ' ' + value[0] + '日：'
+ value[2]
+ '</div>'
+ value[1] + '<br>';
}
},
xAxis: {
type: 'value',
name: '时间',
nameTextStyle: {
color: '#6d9269',
fontSize: 14
},
nameGap: 16,
max: 23,
splitLine: {        // 竖线
show: false
}
},
yAxis: {
type: 'value',
name: '单位：吨',
nameLocation: 'end',
nameGap: 20,
nameTextStyle: {
color: '#6d9269',
fontSize: 16
},
axisTick: {         // 轴的刻度
show: false
},
axisLine: {         // 轴线
show: false
}
},
series: [
{
name: '北京',
type: 'scatter',
itemStyle: {
normal: {
color: '#6d9269',      //散点的颜色
}
},
data: [
[1, randomNum(4, 0), "优"],
[2, randomNum(4, 0), "优"],
[3, randomNum(4, 0), "优"],
[4, randomNum(4, 0), "优"],
[5, randomNum(4, 0), "优"],
[6, randomNum(4, 0), "优"],
[7, randomNum(4, 0), "优"],
[8, randomNum(4, 0), "优"],
[9, randomNum(4, 0), "优"],
[10, randomNum(4, 0), "优"],
[11, randomNum(4, 0), "优"],
[12, randomNum(4, 0), "优"],
[13, randomNum(4, 0), "优"],
[14, randomNum(4, 0), "优"],
[15, randomNum(4, 0), "优"],
[16, randomNum(4, 0), "优"],
[17, randomNum(4, 0), "优"],
[18, randomNum(4, 0), "优"],
[19, randomNum(4, 0), "优"],
[20, randomNum(4, 0), "优"],
[21, randomNum(4, 0), "优"],
[22, randomNum(4, 0), "优"],
[23, randomNum(4, 0), "优"]
]
}
]
}

var echartId = 'lineChart-01';
initEchart(echartId, option);