var myChart = ec.init(document.getElementById('main'));
let option = {
tooltip: {
trigger: 'item',
},
dataRange: {//The color block in the lower left corner. start: start value of the range; end: end value of the range; label: legend name; color: custom color value
x: 'left',
y: 'bottom',
show:false,
splitList: [
// Here, different colors are displayed according to the value in the data below
{start: 10, label: 'custom here', color: '#FFB956'},
{start: 8, end: 10, label: 'custom height here', color: '#E66C1B'},
{start: 5, end: 8, label: 'Customizing here', color: '#F19610'},
{start: 3, end: 5, label: 'custom low here', color: '#8A00E1'},
{start:0, end: 3,label: 'custom here', color: '#403C6F'}
]
},
series: [{
name: 'China',
type: 'map',
mapType: 'china',
selectedMode: false, //single means single selection; multiple means multiple selection, default flase is not selected
itemStyle: {
normal: {
label: {
show: false,//Whether to display the province name by default
},
areaStyle: {
color: '#f3f3f3',//Default map plate color
},
borderWidth:1,
borderColor:'#e1e1e1',
},
emphasis: {
label: {
show: true,//Whether to display the name of the province in the selected state
},
areaStyle: {
color: '#90c31d',//The color of the map plate in the selected state
},
},
},
//This is the data that needs to be displayed in different colors
data: [
{name: 'Guangdong',selected: true,value:10},
{name: '广西',selected: true,value:10},
{name: '四川',selected: true,value:10},
]
}]
};