1.散点图中找最优记录
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style/style.css">
<script src="js/echarts.common.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 620px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var data = [[],[]];
var showVal = [[3, 200099, "顺丰"], [2, 500039, "腾讯"], [5, 188669, "中科"], [4, 900009, "华为"], [3, 333339, "阿里"], [4, 233339, "万达"], [2, 433339, "中信"], [7, 388889, "中科"], [6, 388889, "kkk"], [4, 233359, 'lekd']];
showVal = showVal.sort(function (a, b) {
if (a[0] == b[0]) {
return a[1]>b[1]
}
return a[0] < b[0]
});
var schema = [
{ name: 'money', index: 0, text: '金额' },
{ name: 'selUser', index: 1, text: '选择中标人' }
];
for (var i = 0; i < showVal.length; i++) {
var a= [];
if (showVal[0][1] == showVal[i][1]) {
if (showVal[0][0] == showVal[i][0]) {
data[0].push(showVal[i]);
} else {
data[1].push(showVal[i]);
}
} else {
data[1].push(showVal[i]);
}
}
option = {
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#fff'
}, {
offset: 1,
color: '#fff'
}]),
title: {
left :'35%',
text: '寻找纸板插入物, 纸板供应商',
textStyle:{
color: '#354052',
fontSize:16
}
},
//系列标记
legend: {
y: 'bottom',
data: ['投标', '最佳出价'],
itemGap:40,
},
//提示框的事例
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">'
+ value[2]
+ '</div>'
+ schema[0].text + '：' + value[1] + '<br>'
+ '选择中标人<br>'
}
},
//x坐标的设置
xAxis: {
name: '供应商评分',
nameTextStyle: {
color: '#7F8FA4',
fontSize: 12
},
axisLine: {
lineStyle: {
color: '#979797'
}
},
splitLine: {
lineStyle: {
color: '#D8D8D8',
type: 'dashed',
}
}
},
//y坐标的设置
yAxis: {
name: '投标金额',
//坐标轴名称
nameTextStyle: {
color: '#7F8FA4',
fontSize: 12
},
//坐标轴的设置
axisLine: {
lineStyle: {
color: '#979797'
}
},
//坐标轴的分割线
splitLine: {
lineStyle: {
color: '#D8D8D8',
type: 'dashed',
}
},
scale: true
},
series: [{
name: '最佳出价',
data: data[0],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[1]) / 5e2 * 10;
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(255,128,5,0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: '#FF8005 '
}, {
offset: 1,
color: '#FF8005'
}])
}
}, markLine: {
silent: true,
lineStyle: {
normal: {
type: 'solid',
}
},
data: [{
yAxis: data[1][7][1]
}],
label: {
normal: {
formatter:'机会金额'
}
} }
}, {
name: '投标',
data: data[1],
type: 'scatter',
symbolSize: function (data) {
return Math.sqrt(data[1]) / 5e2 * 10;
},
itemStyle: {
normal: {
shadowBlur: 10,
shadowColor: 'rgba(55,178,72,0.5)',
shadowOffsetY: 5,
color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
offset: 0,
color: '#37B248'
}, {
offset: 1,
color: '#37B248'
}])
}
}, }]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
2地图中的特殊标记
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style/style.css">
<script src="js/echarts.common.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
function randomData() {
return Math.round(Math.random() * 1000);
}
var pricePoint = [[121.15, 31.89], [109.781327, 39.608266], [120.38, 37.35], [122.207216, 29.985295], [123.97, 47.33], [120.13, 33.38], [118.87, 42.28], [102.188043, 38.520089]];
var geoCoordMap = {
'海门': [121.15, 31.89],
'鄂尔多斯': [109.781327, 39.608266],
'招远': [120.38, 37.35],
'舟山': [122.207216, 29.985295],
'齐齐哈尔': [123.97, 47.33],
'盐城': [120.13, 33.38],
'赤峰': [118.87, 42.28],
"金昌": [102.188043, 38.520089],
};
var geoData = [
{ name: "海门", value: 9 },
{ name: "鄂尔多斯", value: 12 },
{ name: "招远", value: 12 },
{ name: "舟山", value: 12 },
{ name: "齐齐哈尔", value: 14 },
{ name: "盐城", value: 15 },
{ name: "赤峰", value: 16 },
{ name: "金昌", value: 19 }
]
//获取唯一识别的值
var selName = geoCoordMap.金昌.toString();
var convertData = function (data, geoCoord1) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoord1[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
var setTip = function (data) {
var res = [];
if(data&&data.length>0){
for(var i=0;i<data.length;i++){
res.push({
coord: data[i],
label: {
normal: { show: false }
},
symbol: data[i].toString() != selName ? 'image://image/page.png' : 'image://image/page1.png',
})
}
}
return res
}
option = {
backgroundColor: '#fff',
title: {
text: '全国主要城市空气质量',
x: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value[2];
}
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#E7E7E7',
borderColor: '#fff'
},
emphasis: {
//鼠标移上去的属性
areaColor: '#E7E7E7'
}
}
},
series: [
{
name: 'pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(geoData, geoCoordMap),
//将默认的显示隐藏掉
symbolSize: 0,
//自定义标示点
markPoint: {
data: setTip(pricePoint),
//设置图片的偏移
// symbolOffset: ['-5%', '-5%'],
//设置图片的宽高
symbolSize: [15,20],
},
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>