echarts散點圖整理
引入js
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript" src="ecStat.min.js"></script>
<script>
var chart = document.getElementById('column');
var echart = echarts.init(chart);
var data = [[1, 4862.4], [2, 5294.7], [3, 5934.5], [4, 7171.0], [5, 8964.4], [6, 10202.2], [7, 11962.5], [8, 14928.3], [9, 16909.2], [10, 18547.9], [11, 21617.8], [12, 26638.1], [13, 34634.4], [14, 46759.4], [15, 58478.1], [16, 67884.6], [17, 74462.6], [18, 79395.7]];
var myRegression = ecStat.regression('exponential', data);
myRegression.points.sort(function(a, b) {
return a[0] - b[0];
});
var option = {
title: {
text: '主標題',
subtext: '副標題',
sublink: 'https://github.com/ecomfe/echarts-stat',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
xAxis: {
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
splitNumber: 2
},
yAxis: {
type: 'value',
name: "地鐵",
axisLabel: {
show: false
},
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
series: [
{
name: 'scatter',
type: 'scatter',
symbolSize: function(value, param) {
if (value[0] == 1) {
return 10;
} else if (value[0] == 10) {
return 20;
} else if (value[0] == 3) {
return 15;
} else if (value[0] == 18) {
return 10;
}
},
label: {
emphasis: {
show: true,
position: 'left',
textStyle: {
color: 'blue',
fontSize: 16
}
}
},
itemStyle: {
normal: {
color: function(params) {
var colorList = ['#C1232B', '#B5C334', '#FCCE10'];
// return colorList[params.dataIndex]
if (params.dataIndex === 2) {
return colorList[2]
} else {
return colorList[1]
}
}
}
},
data: data
}]
};
echart.setOption(option);
</script>