漏刻有时数据可视化Echarts组件开发(18)：渐变透明柱状图和地图map结合的案例
项目需求
- echarts地图map类型；
- 圆形柱状图；
- 指定区域柱图颜色突出展示；
代码开发
构建容器
<div id="container">div>
数据格式
//散点图标准数据格式;
var scrData = [
{"name": "合肥市", "value": [117.323065, 31.886248], data: 70},
{"name": "芜湖市", "value": [118.398616, 31.354343], data: 20},
{"name": "六安市", "value": [116.50514, 31.722042], data: 50},
{"name": "安庆市", "value": [116.667096, 30.512095], data: 40},
{"name": "宿州市", "value": [117.001588, 33.646085], data: 28}
]
初始化图表
var myChart = echarts.init(document.getElementById("container"));
选项配置
var option = {
backgroundColor: '#131C38',
tooltip: {
trigger: 'item',
show: true,
textStyle: {
fontSize: 20,
color: '#fff'
},
formatter: function (params) {
//console.log(params)
if (typeof(params.data) == "undefined") {
return params.name;
} else {
return params.name + "
" + params.data.data;
}
}
},
geo: [
{
map: '安徽省',
aspectScale: 0.75,
roam: false, // 是否允许缩放
zoom: 1, // 默认显示级别
layoutSize: '95%',
layoutCenter: ['55%', '50%'],
label: {
show: false,
color: '#fff'
},
itemStyle: {
areaColor: {
type: 'linear-gradient',
x: 0,
y: 400,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: 'rgba(37,108,190,0.3)' // 0% 处的颜色
}, {
offset: 1,
color: 'rgba(15,169,195,0.3)' // 50% 处的颜色
}],
global: true // 缺省为 false
},
borderColor: '#4ecee6',
borderWidth: 1
},
emphasis: {
itemStyle: {
areaColor: '#0160AD'
},
label: {
show: true,
color: '#fff'
}
},
zlevel: -10
}
],
series: [
{
type: 'map',
map: '安徽省',
geoIndex: 0,
coordinateSystem: 'geo',
showLegendSymbol: true,
roam: true,
label: {
show: true,
textStyle: {
color: '#fff'
}
},
itemStyle: {
opacity: 1,
borderColor: '#2ab8ff',
borderWidth: 1.5,
areaColor: '#12235c'
},
zlevel: 9,
data: scrData
},
// 柱状体的主干
{
type: 'lines',
zlevel: 5,
effect: {
//show: true,
//period: 4, //箭头指向速度，值越小速度越快
//trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
//symbol: 'arrow', //箭头图标
symbolSize: 5 // 图标大小
},
lineStyle: {
width: 20, // 尾迹线条宽度
color: function (params) {
//console.log(params);
if (params.name == "合肥市") {
return '#F7AF21';
} else {
return 'rgb(22,255,255, 1)';
}
},
opacity: 0.7, // 尾迹线条透明度
curveness: 0 // 尾迹线条曲直度
},
label: {
show: false,
position: 'end',
formatter: '245'
},
silent: true,
data: getBodyData(scrData, getMax(scrData))
},
// 柱状体的顶部
{
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 5,
label: {
show: true,
formatter: function (params) {
//console.log(params)
return "产值：" + params.data.value[2];
},
position: "top"
},
symbol: 'circle',
symbolSize: [20, 10],
itemStyle: {
color: function (params) {
// console.log(params);
if (params.name == "合肥市") {
return '#F7AF21';
} else {
return 'rgb(22,255,255, 1)';
}
},
opacity: 1
},
silent: true,
data: getTopData(scrData, getMax(scrData))
},
// 柱状体的底部
{
type: 'scatter',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 4,
label: {
formatter: '{b}',
position: 'bottom',
color: '#fff',
fontSize: 12,
distance: 10,
show: false
},
symbol: 'circle',
symbolSize: [20, 10],
itemStyle: {
color: function (params) {
if (params.name == "合肥市") {
return '#F7AF21';
} else {
return 'rgb(22,255,255, 1)';
}
},
opacity: 1
},
silent: true,
data: scrData
},
// 底部外框
{
type: 'effectScatter',
coordinateSystem: 'geo',
geoIndex: 0,
zlevel: 4,
label: {
show: false
},
rippleEffect: {
scale: 3,
brushType: "fill"
},
symbol: 'circle',
symbolSize: [40, 20],
itemStyle: {
color: function (params) {
if (params.name == "合肥市") {
return '#F7AF21';
} else {
return 'rgb(22,255,255, 1)';
}
},
opacity: 1
},
silent: true,
data: scrData
}
]
}
//自适应浏览器;
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
数据格式处理的封装函数
//01.获取数组对象值的最大值;
function getMax(Arr) {
var newArr = [];
for (var i = 0; i < Arr.length; i++) {
newArr.push(Arr[i].data);
}
var maxValue = Math.max.apply(null, newArr);
return 0.9 / maxValue;
}
//02.柱状体的顶部坐标;
function getTopData(Arr, maxValue) {
var newArr = [];
for (var i = 0; i < Arr.length; i++) {
newArr.push({name:Arr[i].name,value:[Arr[i].value[0], Arr[i].value[1] + Arr[i].data * maxValue, Arr[i].data]});
}
return newArr;
}
//03.柱状体的主干;
function getBodyData(Arr, maxValue) {
var newArr = [];
for (var i = 0; i < Arr.length; i++) {
newArr.push({
name:Arr[i].name,
coords: [
[Arr[i].value[0], Arr[i].value[1]],//起点坐标
[Arr[i].value[0], Arr[i].value[1] + Arr[i].data * maxValue]//终点坐标
]
});
}
return newArr;
}
lockdatav Done!