// 使用
require(
[
'echarts',
'echarts/chart/map'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
option = {
title : {
text: '区域数据分析',
subtext: '真实数据',
x:'center'
},
legend: {
orient: 'vertical',
x:'100',
y:'top',
data:['毛利率','销售额','毛利','成本'],
selected:{
'销售额':false,
'毛利':false,
'成本':false
}
},
tooltip : {
trigger: 'item',
formatter:function(params){
console.log(params);
var name=params.data.name
var res="区域 : "+name;
var series=option.series;
var seriesIndex=params.data.seriesIndex;
for(var i=0,l=seriesIndex.length;i<l;i++){
var data=series[seriesIndex[i]].data;
for(var j=0,k=data.length;j<k;j++){
if(data[j].name==name){
res+='<br/>'+series[seriesIndex[i]].name+" : "+data[j].value;
}
}
}
return res;
}
},
dataRange: {
x: '200',
y: 'top',
splitList: [
{start: 100},
{start:90, end: 99},
{start:70, end: 90},
{start:50, end: 70},
{start:40, end: 50},
{start: 20, end: 40},
{start: 1, end: 20},
{end: 0,label: '0（自定义特殊颜色）', color: 'black'}
],
color: ['#E0022B', '#E09107', '#A3E00B']
},
series : [
{
name: '毛利率',
type: 'map',
mapType: 'china',
roam: false,
mapLocation:{ x:'center'},
mapValuePrecision:3,
itemStyle:{
normal:{
label:{show:true,textStyle: {color: "rgb(249, 249, 249)" }}
},
emphasis:{label:{show:true}}
},
data:[
{
"name": "吉林",
"value": 0
},
{
"name": "黑龙江",
"value": 0
},
{
"name": "江苏",
"value": 0
},
{
"name": "浙江",
"value": 0
},
{
"name": "安徽",
"value": 0
},
{
"name": "福建",
"value": 0
},
{
"name": "江西",
"value": 0
},
{
"name": "山东",
"value": 0
},
{
"name": "河南",
"value": 0
},
{
"name": "湖北",
"value": 0
},
{
"name": "湖南",
"value": 0
},
{
"name": "广东",
"value": 0
},
{
"name": "广西",
"value": 0
},
{
"name": "海南",
"value": 0
},
{
"name": "四川",
"value": 0
},
{
"name": "贵州",
"value": 96.491228
},
{
"name": "云南",
"value": 0
},
{
"name": "陕西",
"value": 0
},
{
"name": "甘肃",
"value": 0
},
{
"name": "宁夏",
"value": 0
},
{
"name": "新疆",
"value": 0
}
]
},
{
name: '销售额',
type: 'map',
mapType: 'china',
roam: false,
mapLocation:{ x:'center'},
mapValuePrecision:3,
itemStyle:{
normal:{
label:{show:true,textStyle: {color: "rgb(249, 249, 249)" }}
},
emphasis:{label:{show:true}}
},
data:[
{
"name": "辽宁",
"value": 150
},
{
"name": "吉林",
"value": 360
},
{
"name": "黑龙江",
"value": 300
},
{
"name": "江苏",
"value": 1020
},
{
"name": "浙江",
"value": 990
},
{
"name": "安徽",
"value": 900
},
{
"name": "福建",
"value": 690
},
{
"name": "江西",
"value": 660
},
{
"name": "山东",
"value": 1260
},
{
"name": "河南",
"value": 660
},
{
"name": "湖北",
"value": 300
},
{
"name": "湖南",
"value": 720
},
{
"name": "广东",
"value": 930
},
{
"name": "广西",
"value": 60
},
{
"name": "海南",
"value": 60
},
{
"name": "四川",
"value": 300
},
{
"name": "贵州",
"value": 2280
},
{
"name": "云南",
"value": 510
},
{
"name": "陕西",
"value": 660
},
{
"name": "甘肃",
"value": 120
},
{
"name": "宁夏",
"value": 120
},
{
"name": "新疆",
"value": 120
}
]
},
{
name: '成本',
type: 'map',
mapType: 'china',
roam: false,
mapLocation:{ x:'center'},
mapValuePrecision:3,
itemStyle:{
normal:{
label:{show:true,textStyle: {color: "rgb(249, 249, 249)" }}
},
emphasis:{label:{show:true}}
},
data:[
{
"name": "辽宁",
"value": 0
},
{
"name": "吉林",
"value": 0
},
{
"name": "黑龙江",
"value": 0
},
{
"name": "江苏",
"value": 0
},
{
"name": "浙江",
"value": 0
},
{
"name": "安徽",
"value": 0
},
{
"name": "福建",
"value": 0
},
{
"name": "江西",
"value": 0
},
{
"name": "山东",
"value": 0
},
{
"name": "河南",
"value": 0
},
{
"name": "湖北",
"value": 0
},
{
"name": "湖南",
"value": 0
},
{
"name": "广东",
"value": 0
},
{
"name": "广西",
"value": 0
},
{
"name": "海南",
"value": 0
},
{
"name": "四川",
"value": 0
},
{
"name": "贵州",
"value": 80
},
{
"name": "云南",
"value": 0
},
{
"name": "陕西",
"value": 0
},
{
"name": "甘肃",
"value": 0
},
{
"name": "宁夏",
"value": 0
},
{
"name": "新疆",
"value": 0
}
]
},
{
name: '毛利',
type: 'map',
mapType: 'china',
roam: false,
mapLocation:{ x:'center'},
mapValuePrecision:3,
itemStyle:{
normal:{
label:{show:true,textStyle: {color: "rgb(249, 249, 249)" }}
},
emphasis:{label:{show:true}}
},
data:[
{
"name": "辽宁",
"value": 0
},
{
"name": "吉林",
"value": 0
},
{
"name": "黑龙江",
"value": 0
},
{
"name": "江苏",
"value": 0
},
{
"name": "浙江",
"value": 0
},
{
"name": "安徽",
"value": 0
},
{
"name": "福建",
"value": 0
},
{
"name": "江西",
"value": 0
},
{
"name": "山东",
"value": 0
},
{
"name": "河南",
"value": 0
},
{
"name": "湖北",
"value": 0
},
{
"name": "湖南",
"value": 0
},
{
"name": "广东",
"value": 0
},
{
"name": "广西",
"value": 0
},
{
"name": "海南",
"value": 0
},
{
"name": "四川",
"value": 0
},
{
"name": "贵州",
"value": 100
},
{
"name": "云南",
"value": 0
},
{
"name": "陕西",
"value": 0
},
{
"name": "甘肃",
"value": 0
},
{
"name": "宁夏",
"value": 0
},
{
"name": "新疆",
"value": 0
}
]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
问题简述 :
0.四个参数['销售额','成本','毛利','毛利率'];我只需观察销售额，和毛利率的，着色情况；
1.颜色值域，无法与图列匹配，我想让毛利率控制值域控件啊
ECharts配置项