Echarts数据可视化图表案例：包括柱图，饼图，折线图，地图等数据展示图表；案例下载后直接使用webstrom或idea打开，在编辑器内打开html
2022-03-30 15:06:16
65.05MB
包含全国各省各市，挺全的。但是资源文件不是最新的，echart已经不提供地图数据下载了，所以本资源只能满足对数据实时性要求不高的用户需求。
2022-03-30 09:47:41
3.79MB
1
辽宁省市级地图js和json文件，精确到各市轮廓地图，样例使用北京市地图，建议用火狐打开，谷歌请参考跨域解决方案
2022-03-29 18:56:53
2.35MB
1
1.微信小程序中模仿头条的国内疫情数据详情界面
2.微信小程序中封装Echarts中国地图组件
3.实现动态更新地图数据
4.详细步骤参考https://www.jianshu.com/p/d8dece105c22
2022-03-29 17:59:38
1.04MB
1
my-project01
项目设置
npm install
编译和热重装以进行开发
npm run serve
编译并最小化生产
npm run build
整理和修复文件
npm run lint
自定义配置
请参阅。
2022-03-29 10:48:42
101KB
1
function getGzMap(_data) {
if (_chinaMap == undefined) {
var dom = document.getElementById("container");
_chinaMap = echarts.init(dom);
_chinaMap.on('click', function(params) {
console.log(params);
var _type = params.seriesType;
if (_type == "map") {
//window.parent.aaa('aa') //调用父页面方法
} else if (_type == "effectScatter") {
window.parent.showMap();
}
})
}
var option = {
backgroundColor: 'rgba(0,0,0,0)',
visualMap: {
type: 'piecewise',
show: false,
min: 0,
max: 300,
splitNumber: 3,
itemWidth: 10,
itemHeight: 10,
itemGap: 5,
seriesIndex: [1],
pieces: [
{ min: 0, max: 100, label: '优' },
{ min: 101, max: 200, label: '良' },
{ min: 201, max: 300, label: '高风险' }
],
//color: ['#FA4D08', '#4BD94F', '#FBD32B'], //红、绿、黄
color: ['#F8DAE6', '#FEF9B5', '#B0D8B3'], //红、黄、绿
textStyle: {
color: '#9EA8B1',
fontSize: 10
}
},
tooltip: {
formatter: '{b}'
},
geo: {
map: 'guangdong',
roam: true,
aspectScale: 1,
zoom: 1.5,
layoutCenter: ['55%', '40%'],
layoutSize: 500,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111',
borderColor: '#3BB4DF',
shadowColor: '#25A3FC',
shadowBlur: 10
},
emphasis: {
areaColor: '#ddb926'
}
}
},
series: [{
type: 'effectScatter',
coordinateSystem: 'geo',
data: unitData,
symbolSize: 10,
symbol: 'image://../../../../Content/images/One/fire.png',
//symbolRotate: 35,
rippleEffect: {
period: 4,
scale: 5,
brushType: 'fill',
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#fff'
}
}
},
{
name: '',
type: 'map',
geoIndex: 0,
mapType: 'guangdong', // 自定义扩展图表类型
label: {
normal: {
show: true,
}
},
itemStyle: {
normal: {
label: {
show: true,
fontSize: 10,
color: '#111'
},
shadowColor: '#ddb926',
shadowBlur: 5,
},
emphasis: {
label: { show: true },
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10
}
},
data: _data
}, {
type: 'effectScatter',
coordinateSystem: 'geo',
data: windData,
symbolSize: 10,
symbol: 'image://../../../../Content/images/One/wind.png',
//symbolRotate: 35,
rippleEffect: {
period: 4,
scale: 5,
brushType: 'fill',
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: '#fff'
}
}
},
]
};
$.getJSON('../../MapCN/guangdong.json', function(chinaJson) {
echarts.registerMap('guangdong', chinaJson);
_chinaMap.setOption(option, true);
});
}
2022-03-28 14:04:26
4.71MB
1