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消息处理机制的一个平台,应用程序可以在上面设置子程以监视指定窗口的某种消息,而且所监视的窗口可以是其他进程所创建的.当消息到达后,在目标窗口处理函数之前处理它.钩子机 ...
随机推荐
- Ubuntu18--使用vi编辑器方向键以及Backspace乱码问题
解决方法一: 可以进入vi /etc/vim/vimrc.tiny目录对vim配置文件进行修改 修改内容: 修改完成就可以正常使用了.(换行的时候Esc退出编译状态,回车换行,输入第二句话,在按Esc ...
- postman请求（请求方式、请求url、请求参数、参数类型、请求头）
请求方式:get 请求地址: 请求参数:url与参数用?间隔,多个参数用&间隔 请求方式:post 请求地址: 请求参数: 请求参数格式:前面两种是key-value.第三种可以选择json/ ...
- 使用centos6.5整理出来的常用命令
1.Vi 基本操作1) 进入vi 在系统提示符号输入vi及文件名称后,就进入vi全屏幕编辑画面: $ vi myfile 进入vi之后,是处于「命令行模式(command mode)」,您要切换到「插 ...
- 查询MySQL DB
public DataTable ConnMySql(string strRegisterNo) { try { DataTable dt = new DataTable("table&qu ...
- 取Cookie值
string url_Login_Group = "http://ui.ptlogin2.qq.com/cgi-bin/login?appid=549000912&daid=5&am ...
- WebApp开发-Zepto
zepto.js自己去官网下载哈. DOM操作 $(document).ready(function(){ var $cr = $("<div class='cr'>插入的div ...
- CF895C Square Subsets [线性基]
线性基的题- 考虑平方数只和拆解质因子的个数的奇偶性有关系 比如说你 \(4\) 和 \(16\) 的贡献都是一样的.因为 \(4 = 2^2 , 16 = 2^4\) \(2\) 和 \(4\) 奇 ...
- JavaScript 自适应轮播图
代码 话不多说,先上代码,方便复制粘贴.演示 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 【Vue2.x笔记2】从源码看computed对象
computed 初始化函数 const computedWatcherOptions = { lazy: true } function initComputed (vm: Component, c ...
- 爬格子呀--IEEE极限编程大赛留念
10.14,坐标:电子科技大学 24h,不间断的编程,感觉还是很爽的. 排名一般,但是这是开始,未来还很远. 题目举例1: 广袤的非洲大草原上,狮子居住在一个个的网格里,他们的势力范围会以曼哈顿路程的 ...