echart--自己写的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title><link rel="shortcut icon" href="favicon.ico">
</head> <body>
<div style='position:relative; width:100%; height:100%;'>
<div class="echarts" id="echarts-map-chart" style="width:100%;height: 100%;position:absolute; z-index:2;">
</div>
</div> <script src="~/Scripts/echart/echarts.js"></script><script src="~/Scripts/jquery.tmpl.js"></script>
<script type="text/x-jquery-tmpl" id="teamerTemplate">
</script>
<script>
var allData = null;
var myData = null;
var bmapChart = null;
var hosData = null;
var mapOption = null;
var parOption = null; var blineChart = null;
var CountryOptions = [];
var CurrentName = null;
var CountryPos = []; $(function () {
var newbeadhouse = JSON.parse($('#beadhouses').val());
var newcountrypos = JSON.parse($('#countrypos').val());
func_InitMapData();
func_InitEchart2();
showPar("");
});
//数据
function func_InitMapData() {
myData = [
{ name: '拟建设1', value: [118.794756, 36.822932, 1003, '拟建'], pos: '寿光市', bed: 1403, phone: '0536333', time: '2025-6', check: '450', add: '潍坊寿光市圣城街', desc: '市政府确设', charge: '张三', area: '392亩' },
{ name: '拟建设2', value: [118.947522, 36.994958, 903, '拟建'], pos: '寿光市', bed: 1203, phone: '0537333', time: '2019-6', check: '450', add: '潍坊寿光市圣城街', desc: '市政建设', charge: '张三', area: '392亩' },
{ name: '拟建设3', value: [118.720017, 37.014973, 1103, '拟建'], pos: '寿光市', bed: 1103, phone: '057333', time: '2020-6', check: '450', add: '潍圣城街', desc: '市政府确定的重点项投资建设', charge: '张三', area: '392亩' },
];
CountryPos = {
'市': [118.904827, 37, 1.6, { dc: 20, hc: 80, bc: 32401, cp: '30%',
y: ['镇', '镇', '营', ''],
ndata: [0, 5, 1, 2, 5, 9, 8, 4, 6, 3, 1],
zdata: [2, 3, 6, 5, 4, 7, 8, 9, 5, 5, 9],
ydata: [10, 15, 11, 21, 51, 19, 18, 21, 31, 13, 11],
per: [1055, 786, 254],town:''}],
}
}
//初始化地图
function func_InitEchart2() {
bmapChart = echarts.init(document.getElementById('echarts-map-chart')); //获取bmap的对象，地图的所有操作都是基于此对象的，需要必要的js和html控件
bmapChart.showLoading(); //现实正在加载的界面--用于加载地图数据时显示，避免认为是卡死 var jsurl = "Scripts/echart/weifang.json";
$.getJSON(jsurl, function (geoJson) {
echarts.registerMap('市', geoJson); //加载json数据到地图中，并保存在指定的名称下面
bmapChart.hideLoading(); //关闭正在加载的界面 mapOption = GetOption("市"); //获取map的初始化参数，地图的信息数据格式等的都在option中
bmapChart.setOption(mapOption);//设置参数，到这里基本完成地图初始化了
CurrentName = "市";
// 处理点击事件
bmapChart.on('legendselectchanged', function (params) { func_lengedSelect(params); });//添加legend选择事件
bmapChart.on('click', function (params) { eConsole(params); });//添加点击事件
});
} function convertData(name, city) {
var res = [];
for (var i = 0; i < myData.length; i++) { var dataItem = myData[i];
if (city != null) {
if (city != dataItem.pos)
continue;
}
if (dataItem.value[3] == name) {
res.push(dataItem);
}
}
return res;
}; function getDatabyname(name) {
for (var i = 0; i < myData.length; i++) {
var dataItem = myData[i]; if (dataItem.name == name) {
return dataItem;
}
}
return null;
} var selectedItem = null; //点击地图中的点回调函数
function eConsole(param) {
if (typeof param.componentType == 'undefined') {
return;
}
else if (param.componentType == "series") {
//alert(param.name);
selectedItem = param.data;
func_showdetail(param.data);
}
else if (param.componentType == "geo") {
if (CurrentName == "市") { //--------------------地图下钻-区县级别的就没有现成的json文件了，自己从里面读数据
var option = CountryOptions[param.name];
if (option == null) {
var jsonmap = echarts.getMap('市').geoJson.features; //获取对应的注册地图的数据
//根据地图数据获取中心位置-读取相关的节点的信息
var cppoint = jsonmap.find(function (a) {
return a.properties.name == param.name;
});
var newjson = { //创建一个新的json文件--看了下要加上type才可以
type: "FeatureCollection",
features: [],
};
newjson.features.push(cppoint);
echarts.registerMap(param.name, newjson);
option = GetOption(param.name, param.name);//重新注册初始化显示
//bmapChart.setOption(option);
mapDetailInfo(param.name, option);
CountryOptions[param.name] = option;
}
else {
bmapChart.setOption(option);
}
CurrentName = param.name;
showPar(param.name);
}
else {
CurrentName = "市";
bmapChart.setOption(mapOption, true);
showPar("市");
}
}
} function func_lengedSelect(params) {
if (params.type == 'legendselectchanged') {
var legend = params.selected;
if (params.name == "搜索") { }
}
} function GetOption(name, city) {
var ps = CountryPos[name];
var p = [ps[0], ps[1]]; var geoitemstyle = {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
}
};
if (name != "潍坊市") {
geoitemstyle = {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#031525',
}
};
}
var opt = {
geo: {
center: p,// [119.36, 36.64], // 中心位置坐标
zoom: ps[2],
show: true,
map: name,
label: {
normal: {
show: true,
color: '#ddb926',
},
emphasis: {
color: '#ddb926',
show: true,
}
},
right: 300,
roam: true,
itemStyle: geoitemstyle,
},
backgroundColor: '#222f44',
tooltip: {
trigger: 'item',
position: 'right',
formatter: function (params) {
if (typeof (params.value)[2] == "undefined") {
return params.name + ' : ' + params.value;
} else {
var str = "<ur style='text-align:left'><li style='color: #da70d6;font:bolder;'>" + params.name + "</li>";
str += "<li>" + "床位数 : " + params.value[2] + " </li>";
str += "<li>" + "入住率 : " + "70%" + " </li>";
str += "<li>" + "建档率 : " + "70%" + " </li>";
str += "<li>" + "等级 : " + "1" + " </li>";
str += "</ul>";
return str;
}
}
},
title: {
text: '结合综合管理平台',
//subtext: '管理服务平台',
left: 'center',
textStyle: {
color: '#f8f7ec',
fontSize: 36,
fontFamily: '黑体',
}
},
legend: [
{
orient: 'vertical',
top: 100,
itemWidth: 30,
itemHeight: 20,
padding: [
5, // 上
40, // 右
5, // 下
10, // 左
],
backgroundColor: 'rgba(47, 79, 79, 0.7)',
borderColor: '#07399d',
borderWidth: 1.5,
borderRadius: 3,
selected: {
'已建': true,
'在建': true,
'拟建': true,
},
left: 'left',
data: [
{
name: '已建',
icon: 'roundRect',
textStyle: {
color: '#62f962'
}
},
{
name: '在建',
icon: 'roundRect',
textStyle: {
color: 'yellow'
}
},
{
name: '拟建',
icon: 'roundRect',
textStyle: {
color: 'red'
}
}
],
selectedMode: 'multiple',
},
{
orient: 'vertical',
top: 190,
itemWidth: 25,
itemHeight: 25,
padding: [
5, // 上
46, // 右
5, // 下
10, // 左
],
backgroundColor: 'rgba(85,107,47, 0.7)',
borderColor: '#07399d',
borderWidth: 1.5,
borderRadius: 3,
selected: {
'医院': false,
},
left: 'left',
data: [
{
name: '医院',
icon: 'image://Images/hosicon.png',
textStyle: {
color: '#47fad4'
}
}
],
selectedMode: 'multiple',
},
//{
// orient: 'vertical',
// top: 226,
// itemWidth: 20,
// itemHeight: 20,
// padding: [
// 5, // 上
// 50, // 右
// 5, // 下
// 10, // 左
// ],
// backgroundColor: 'rgba(79, 60, 60, 0.7)',
// borderColor: '#07399d',
// borderWidth: 1.5,
// borderRadius: 3,
// selected: {
// '搜索': true,
// },
// left: 'left',
// data: [
// {
// name: '搜索',
// icon: 'image://Images/Beadhouse/searchicon.png',
// textStyle: {
// color: 'white'
// }
// }
// ],
// selectedMode: 'multiple',
//},
],
series: [
{
name: '已建',
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 10,
data: convertData('已建', city),
showEffectOn: 'render',
hoverAnimation: true,
rippleEffect: { //涟漪特效相关配置
period: '4', //动画的时间
scale: '2.5', //动画中波纹的最大缩放比例
brushType: 'stroke'
},
//showEffectOn: 'emphasis',
label: {
normal: {
formatter: '{b}',
position: 'right',
fontSize: '12',
fontFamily: '宋体',
show: false
},
emphasis: {
show: false
},
},
itemStyle: {
normal: {
color: '#62f962',
shadowBlur: 10, }
}
},
{
name: '已建',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function (val) { return Math.sqrt(val[2] * 1.8); },
label: {
normal: {
show: true,
textStyle: {
color: '#000000',
fontSize: 10,
}
}
},
itemStyle: {
normal: {
color: '#62f962', //标志颜色
}
},
data: convertData('已建', city),
},
{
name: '在建',
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 10,
data: convertData('在建', city),
showEffectOn: 'render',
hoverAnimation: true,
rippleEffect: { //涟漪特效相关配置
period: '4', //动画的时间
scale: '2.5', //动画中波纹的最大缩放比例
brushType: 'stroke'
},
//showEffectOn: 'emphasis',
label: {
normal: {
formatter: '{b}',
position: 'right',
fontSize: '12',
fontFamily: '宋体',
show: false
},
emphasis: {
show: false
},
},
itemStyle: {
normal: {
color: 'yellow',
shadowBlur: 10
}
}
},
{
name: '在建',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function (val) { return Math.sqrt(val[2] * 1.8); },
label: {
normal: {
show: true,
textStyle: {
color: '#000000',
fontSize: 10,
}
}
},
itemStyle: {
normal: {
color: 'yellow', //标志颜色
}
},
data: convertData('在建', city),
},
{
name: '拟建',
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 10,
data: convertData('拟建', city),
showEffectOn: 'render',
hoverAnimation: true,
rippleEffect: { //涟漪特效相关配置
period: '4', //动画的时间
scale: '2.5', //动画中波纹的最大缩放比例
brushType: 'stroke'
},
//showEffectOn: 'emphasis',
label: {
normal: {
formatter: '{b}',
position: 'right',
fontSize: '12',
fontFamily: '宋体',
show: false
},
emphasis: {
show: false
},
},
itemStyle: {
normal: {
color: 'red',
shadowBlur: 10
}
}
},
{
name: '拟建',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function (val) { return Math.sqrt(val[2] * 1.8); },
label: {
normal: {
show: true,
textStyle: {
color: '#000000',
fontSize: 9,
}
}
},
itemStyle: {
normal: {
color: 'red', //标志颜色
}
},
data: convertData('拟建', city),
},
{//-----------------------医院点-------------------------
name: '医院',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'image://Images/hosicon.png',
symbolSize: 15,
label: {
normal: {
formatter: '{b}',
position: 'right',
fontSize: '12',
fontFamily: '宋体',
show: false
},
emphasis: {
show: false
},
},
itemStyle: {
normal: {
color: '#4edadf', //标志颜色
},
emphasis: {
borderColor: '#fff',
borderWidth: 1, }
},
data: convertData('hos', city),
},
//{
// name: '搜索',
// type: 'scatter',
// coordinateSystem: 'geo',
// data: []
//},
],
}
return opt;
}
</script>
</body> </html>
echart--自己写的例子的更多相关文章
- SQL server触发器中 update insert delete 分别给写个例子被。
SQL server触发器中 update insert delete 分别给写个例子以及解释下例子的作用和意思被, 万分感谢!!!! 主要想知道下各个语句的书写规范. INSERT: 表1 (ID, ...
- go每个函数写代码例子
https://github.com/astaxie/gopkg 由于目前golang的手册里面针对函数的例子太少了,很多时候不知道怎么使用,好多人都是看源代码才明白怎么用,这个给我们快速开发gola ...
- C# 文件读取方法，自己写的例子，保存一下，备用
/// <summary> /// 将output.config内容传到app.config /// </summary> string ReadString; //两个地址 ...
- 【微博SDK调用逻辑】微博SDK的调用逻辑，最好自己还是写一个例子，试一下！！！
逻辑是这样的,谢谢给我讲东西的开发哥哥,嘻嘻~~~ 1.点击微博登录,SDK会打开微博客户端,然后点击登陆(如果已经登录了会出现一个当前app跟微博交互的图片界面,然后提示“正在获取授权信息”,如果 ...
- Keras手写识别例子（1）----softmax
转自:https://morvanzhou.github.io/tutorials/machine-learning/keras/2-2-classifier/#测试模型 下载数据: # downlo ...
- linux 一个写缓存例子
我们已经几次提及 shortprint 驱动; 现在是时候真正看看. 这个模块为并口实现一个非 常简单, 面向输出的驱动; 它是足够的, 但是, 来使能文件打印. 如果你选择来测试这个 驱动, 但是, ...
- oracle储存过程，job,视图，触发器（记性不好，写个例子自己记）
存储过程 create or replace procedure TestPro(Descerr out varchar2 ) is begin select * from test; excepti ...
- java异常处理和自定义异常利用try和catch让程序继续下去(回来自己再写个例子试运行下)
注意:想在catch的参数里使用自定义的异常,则必须先将这个异常抛出才行.(throws是具有抛出异常的能力,并未抛出,throw new MyException是抛出异常,catch是捕获异常,只有 ...
- Hook技术简介（有用SDK写的例子）
钩子(Hook),是Windows消息处理机制的一个平台,应用程序可以在上面设置子程以监视指定窗口的某种消息,而且所监视的窗口可以是其他进程所创建的.当消息到达后,在目标窗口处理函数之前处理它.钩子机 ...
随机推荐
- Mayor's posters POJ - 2528 线段树区间覆盖
//线段树区间覆盖 #include<cstdio> #include<cstring> #include<iostream> #include<algori ...
- Python学习笔记--协程asyncio
协程的主要功能是单线程并发运行 假设有3个耗时不一样的任务.看看协程的效果. 先来看没有使用协程情况: #!/usr/bin/python3 # -*- coding:utf-8 -*- import ...
- Antenna Placement poj 3020
Antenna Placement Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12104 Accepted: 595 ...
- 42.Pycharm连接数据库出现错误：1045、1044：django.db.utils.OperationalError: (1045, "Access denied for user 'Whois'@'localhost' (using password: YES)”)
1.在pycharm中设置好数据库的连接信息,连接数据库db01, DATABASES = { 'default': { # 指定所使用的的数据库引擎 'ENGINE': 'django.db.bac ...
- Deepin Linux下安装安卓应用的各种方式
没事啥折腾 Deepin Linux 的应用商店里集成了挺多安卓应用 , 没有的就只能自己想办法了. 我主要使用这几个app , 飞书,邮箱大师,还有一些公司内部app. 网上 搜索了一下 ,有以下几 ...
- 作业day2
问题一: Java类中只能有一个公有类吗?用Eclipse检测以下程序是否正确.是否在接口中同样适用. 因为公共类名必须和这个java源程序文件名相同,所以只能有一个公共类,相应的,main方法作为程 ...
- JAVA是否最适合企业应用开发？
· JAVA是否最适合企业应用开发? 当我刚入行做程序员的时候,那是在01-02年,铺天盖地的都是java,j2ee,公司也使用java作为开发语言,我也就随大流加入javaer阵营. 从那时起,各种 ...
- PTA 1004 Counting Leaves
题目描述: A family hierarchy is usually presented by a pedigree tree. Your job is to count those family ...
- EF Code-First（Oracle）通过Migration来更新数据库的表的字段
关于Oracle中使用Entity Framework 6.x Code-First方式开发,请参考博客(菩提树下的杨过)https://www.cnblogs.com/yjmyzz/p/how-to ...
- Hangfire设置隔天的指定时间执行
一.说明 一开始只需要每天执行指定的备份逻辑,后来需求变更为间隔X天的指定时间执行备份操作,于是有了本篇文章所述的操作. 二.代码 1.先执行间隔天数的逻辑. 2.当到达要备份的当天时,再添加一个任务 ...