map.png
如上图所示我想动态改变map上线的颜色，废话少说，先上代码,首先是引入配置文件
<script type="text/javascript" src="./bundles/require/require.js"></script>
<script src="js/echarts.js" charset="UTF-8"></script>
然后是全部代码
function getEcharts(end_obj,pointsdata,linedata){
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
require.config({
paths: {
echarts: './js'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
require(
[
'echarts',
'echarts/chart/map'
],
function (ec) {
// --- 地图 ---
var myChart2 = ec.init(document.getElementById('mapcontainer'));
myChart2.setOption({
title : {
text: '',
subtext: '',
left: 'center',
textStyle : {
color: '#fff'
}
},
tooltip : {
trigger: 'axis',
backgroundColor: 'rgba(0,0,0,.6)',
padding: 14,
textStyle:{
color:'#fff'
},
fontSize: 12,
lineHeight:20
},
dataRange: {
/*min :min,
max:max,*/
calculable : false,
//splitList控制线与点的颜色，start意思是大于等于，end是小于等于，当满足条件时可以改变颜色,这里是通过linedata与pointsdata，来改变的
splitList: [
{start: 6, color:'2a2a2a'},
{start: 4, end: 5,color:'#fa9c08'},
{start: 3, end: 3,color:'#fc0c38'},
{start: 2, end: 2,color:'#f1ff0e'},
{start: 1, end: 1,color:'#39f60e'},
{start: 0, end: 0,color:'#d0d0d0'},
],
// color: ['#ff3333','#0af08c'], 如果不加splitList，也可以通过color，但是必须得有max,与min
x: '',
show: false,
textStyle:{
color:'#fff'
}
},
layoutCenter: ['50%', '50%'],
series : [
{
name: '湖南\n\n',
type: 'map',
roam: false,
hoverable: true,
clickable:true,
mapType: '湖南',
data:end_obj,
//这是鼠标悬停的时候的数据
tooltip : {
trigger: 'item',
formatter: function (params){
var chityname = params.name;
if(end_obj!=null){
for(var i=0;i<end_obj.length;i++){
if(chityname.indexOf(end_obj[i].name)!=-1){
return(`${chityname}<br>
站点数量：${end_obj[i].count}<br>
正常站点：${end_obj[i].good}<br>
告警站点：${end_obj[i].fault}<br>`)
}
}
}else{
return chityname
}
},
},
itemStyle:{
normal:{
label:{
show:true,
textStyle: {
color: 'rgba(255,255,255,0.7)',
fontSize: 10
}
},
borderColor:'rgba(104,183,239,0.7)',
borderWidth:1,
areaStyle:{
color: 'rgba(104,183,239,0.2)'
}
},
emphasis:{
label:{
show:true,
textStyle: {
color: 'rgba(255,255,255,1)',
fontSize: 14
}
},
areaStyle:{
color:'rgba(0,0,0,0.6)'
}
}
},
markLine : {
smooth:true,
symbol: ['none', 'circle'],
symbolSize : 1,
itemStyle : {
normal: {
color:'#fff',
borderWidth:1,
borderColor:'rgba(30,144,255,0.5)'
}
},
data : [
],
},
geoCoord: {
'长沙': [112.93,28.23],
'株洲': [113.13,27.83],
'湘潭': [112.93,27.83],
'衡阳': [112.57,26.90],
'邵阳': [111.47,27.25],
'岳阳': [113.12,29.37],
'常德': [111.68,29.05],
'张家界': [110.47,29.13],
'益阳': [112.32,28.60],
'郴州': [113.02,25.78],
'永州': [111.62,26.43],
'怀化': [110.00,27.57],
'娄底': [112.00,27.73],
'湘西土家族苗族自治州': [109.73,28.32]
},
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
return 10 + 2*v
},
effect : {
show: true,
shadowBlur : 1
},
itemStyle:{
normal:{
label:{show:true}
},
emphasis: {
label:{position:'bottom'}
}
},
data : pointsdata
// 这是点的数据格式是[{name:'长沙',value:2},{name:'郴州',value:1}]
}
},
{
name: '',
type: 'map',
mapType: '湖南',
data:[],
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 2,
period: 15,
color: 'rgba(255,255,255,0.7)',
shadowBlur: 5
},
itemStyle : {
normal: {
label:{
show:false,
color: '#333333',
formatter: '{b}'
},
silent:true,
borderWidth:1,
lineStyle: {
type: 'solid',
shadowBlur: 3
},
},
emphasis: {
label:{show:false}
}
},
data : linedata,
// 这是线的数据格式是[[{name:'长沙'},{name:'郴州',value:1}],[{name:'长沙'},{name:'邵阳',value:1}]]
},
}
]
});
window.addEventListener("resize",function(){
myChart2.resize();
})
});
}
// 有时候地图点的位置混乱了，如果定位没错的话，linedata 中的{name:'长沙'}的name要和地理位置中的一致对
有时候地图点的位置混乱了，如果定位没错的话，linedata 中的{name:'长沙'}的name要和地理位置中的一致对
https://echarts.baidu.com/echarts2/doc/example/dataRange2.html
网友评论