案例一:中国地图展示
ECharts 提供了丰富的地图数据,可以轻松绘制中国地图。以下是一个简单的示例:
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入中国地图数据
require('echarts/map/js/china');
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '中国地图示例'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '中国',
type: 'map',
mapType: 'china',
label: {
show: true
},
data: [{
name: '北京',
value: Math.round(Math.random() * 1000)
}, {
name: '上海',
value: Math.round(Math.random() * 1000)
}, {
name: '广东',
value: Math.round(Math.random() * 1000)
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例二:世界地图展示
ECharts 同样支持世界地图的绘制。以下是一个简单的示例:
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入世界地图数据
require('echarts/map/js/world');
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '世界地图示例'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '世界',
type: 'map',
mapType: 'world',
label: {
show: true
},
data: [{
name: 'United States',
value: Math.round(Math.random() * 1000)
}, {
name: 'China',
value: Math.round(Math.random() * 1000)
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例三:省级地图展示
ECharts 支持自定义地图数据,以下是一个省级地图的示例:
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入自定义地图数据
require('echarts/map/js/province');
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '省级地图示例'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '省级地图',
type: 'map',
mapType: 'province',
label: {
show: true
},
data: [{
name: '北京市',
value: Math.round(Math.random() * 1000)
}, {
name: '上海市',
value: Math.round(Math.random() * 1000)
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例四:城市地图展示
ECharts 支持绘制城市地图,以下是一个城市地图的示例:
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入自定义地图数据
require('echarts/map/js/city');
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '城市地图示例'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '城市地图',
type: 'map',
mapType: 'city',
label: {
show: true
},
data: [{
name: '北京市',
value: Math.round(Math.random() * 1000)
}, {
name: '上海市',
value: Math.round(Math.random() * 1000)
}]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
案例五:热力地图展示
ECharts 支持绘制热力地图,以下是一个热力地图的示例:
”`javascript // 引入 ECharts 主模块 var echarts = require(‘echarts/lib/echarts’); // 引入热力地图数据 require(‘echarts/map/js/heatmap’);
// 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById(‘main’));
// 指定图表的配置项和数据 var option = {
title: {
text: '热力地图示例'
},
tooltip: {
trigger: 'item'
},
series: [{
name: '热力地图',
type: 'heatmap',
data: [
[0, 0, 1],
[1, 0, 2],
[2, 0, 3],
[3, 0, 4],
[4, 0, 5],
[5, 0, 6],
[6, 0, 7],
[7, 0, 8],
[8, 0, 9],
[9, 0, 10],
[10, 0, 11],
[11, 0, 12],
[12, 0, 13],
[13, 0, 14],
[14, 0, 15],
[15, 0, 16],
[16, 0, 17],
[17, 0, 18],
[18, 0, 19],
[19, 0, 20],
[20, 0, 21],
[21, 0, 22],
[22, 0, 23],
[23, 0, 24],
[0, 1, 1],
[1, 1, 2],
[2, 1, 3],
[3, 1, 4],
[4, 1, 5],
[5, 1, 6],
[6, 1, 7],
[7, 1, 8],
[8, 1, 9],
[9, 1, 10],
[10, 1, 11],
[11, 1, 12],
[12, 1, 13],
[13, 1, 14],
[14, 1, 15],
[15, 1, 16],
[16, 1, 17],
[17, 1, 18],
[18, 1, 19],
[19, 1, 20],
[20, 1, 21],
[21, 1, 22],
[22, 1, 23],
[23, 1, 24],
[0, 2, 1],
[1, 2, 2],
[2, 2, 3],
[3, 2, 4],
[4, 2, 5],
[5, 2, 6],
[6, 2, 7],
[7, 2, 8],
[8, 2, 9],
[9, 2, 10],
[10, 2, 11],
[11, 2, 12],
[12, 2, 13],
[13, 2, 14],
[14, 2, 15],
[15, 2, 16],
[16, 2, 17],
[17, 2, 18],
[18, 2, 19],
[19, 2, 20],
[20, 2, 21],
[21, 2, 22],
[22, 2, 23],
[23, 2, 24],
[0, 3, 1],
[1, 3, 2],
[2, 3, 3],
[3, 3, 4],
[4, 3, 5],
[5, 3, 6],
[6, 3, 7],
[7, 3, 8],
[8, 3, 9],
[9, 3, 10],
[10, 3, 11],
[11, 3, 12],
[12, 3, 13],
[13, 3, 14],
[14, 3, 15],
[15, 3, 16],
[16, 3, 17],
[17, 3, 18],
[18, 3, 19],
[19, 3, 20],
[20, 3, 21],
[21, 3, 22],
[22, 3, 23],
[23, 3, 24],
[0, 4, 1],
[1, 4, 2],
[2, 4, 3],
[3, 4, 4],
[4, 4, 5],
[5, 4, 6],
[6, 4, 7],
[7, 4, 8],
[8, 4, 9],
[9, 4, 10],
[10, 4, 11],
[11, 4, 12],
[12, 4, 13],
[13, 4, 14],
[14, 4, 15],
[15, 4, 16],
[16, 4, 17],
[17, 4, 18],
[18, 4, 19],
[19, 4, 20],
[20, 4, 21],
[21, 4, 22],
[22, 4, 23],
[23, 4, 24],
[0, 5, 1],
[1, 5, 2],
[2, 5, 3],
[3, 5, 4],
[4, 5, 5],
[5, 5, 6],
[6, 5, 7],
[7, 5, 8],
[8, 5, 9],
[9, 5, 10],
[10, 5, 11],
[11, 5, 12],
[12, 5, 13],
[13, 5, 14],
[14, 5, 15],
[15, 5, 16],
[16, 5, 17],
[17, 5, 18],
[18, 5, 19],
[19, 5, 20],
[20, 5, 21],
[21, 5, 22],
[22, 5, 23],
[23, 5, 24],
[0, 6, 1],
[1, 6, 2],
[2, 6, 3],
[3, 6, 4],
[4, 6, 5],
[5, 6, 6],
[6, 6, 7],
[7, 6, 8],
[8, 6, 9],
[9, 6, 10],
[10, 6, 11],
[11, 6, 12],
[12, 6, 13],
[13, 6, 14],
[14, 6, 15],
[15, 6, 16],
[16, 6, 17],
[17, 6, 18],
[18, 6, 19],
[19, 6, 20],
[20, 6, 21],
[21, 6, 22],
[22, 6, 23],
[23, 6, 24],
[0, 7, 1],
[1, 7, 2],
[2, 7, 3],
[3, 7, 4],
[4, 7, 5],
[5, 7, 6],
[6, 7, 7],
[7, 7, 8],
[8, 7, 9],
[9, 7, 10],
[10, 7, 11],
[11, 7, 12],
[12, 7, 13],
[13, 7, 14],
[14, 7, 15],
[15, 7, 16],
[16, 7, 17],
[17, 7, 18],
[18, 7, 19],
[19, 7, 20],
[20, 7, 21],
[21, 7, 22],
[22, 7, 23],
[23, 7, 24],
[0, 8, 1],
[1, 8, 2],
[2, 8, 3],
[3, 8, 4],
[4, 8, 5],
[5, 8, 6],
[6, 8, 7],
[7, 8, 8],
[8, 8, 9],
[9, 8, 10],
[10, 8, 11],
[11, 8, 12],
[12, 8, 13],
[13, 8, 14],
[14, 8, 15],
[15, 8, 16],
[16, 8, 17],
[17, 8, 18],
[18, 8, 19],
[19, 8, 20],
[20, 8, 21],
[21, 8, 22],
[22, 8, 23],
[23, 8, 24],
[0, 9, 1],
[1, 9, 2],
[2, 9, 3],
[3, 9, 4],
[4, 9, 5],
[5, 9, 6],
[6, 9, 7],
[7, 9, 8],
[8, 9, 9],
[9, 9, 10],
[10, 9, 11],
[11, 9, 12],
[12, 9, 13],
[13, 9, 14],
[14, 9, 15],
[15, 9, 16],
[16, 9, 17],
[17, 9, 18],
[18, 9, 19],
[19, 9, 20],
[20, 9, 21],
[21, 9, 22],
[22, 9, 23],
[23, 9, 24],
[0, 10, 1],
[1, 10, 2],
[2, 10, 3],
[3, 10, 4],
[4, 10, 5],
[5, 10, 6],
[6, 10, 7],
[7, 10, 8],
[8, 10, 9],
[9, 10, 10],
[10, 10, 11],
[11, 10, 12],
[12, 10, 13],
[13, 10, 14],
[14, 10, 15],
[15, 10, 16],
[16, 10, 17],
[17, 10, 18],
[18, 10, 19],
[19, 10, 20],
[20, 10, 21],
[21, 10, 22],
[22, 10, 23],
[23, 10, 24],
[0, 11, 1],
[1, 11, 2],
[2, 11, 3],
[3, 11, 4],
[4, 11, 5],
[5, 11, 6],
[6, 11, 7],
[7, 11, 8],
[8, 11, 9],
[9, 11, 10],
[10, 11, 11],
[11, 11, 12],
[12, 11, 13],
[13, 11, 14],
[14, 11, 15],
[15, 11, 16],
[16, 11, 17],
[17, 11, 18],
[18, 11, 19],
[19, 11, 20],
[20, 11, 21],
[21, 11, 22],
[22, 11, 23],
[23, 11, 24],
[0, 12, 1],
[1, 12, 2],
[2, 12, 3],
[3, 12, 4],
[4, 12, 5],
[5, 12