ECharts，EnterpriseCharts的缩写，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。其创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
ECharts组件支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题、详情、气泡、图例、值域、数据区域、时间轴、工具箱等8个可交互组件，支持多图表、组件的联动和混搭展示。
1、首先引入JS
首先给定一下全局样式、给个地图容器
2、获取容器DOM，设置地图相关参数
var myChart= echarts.init(document.getElementById(main));
myChart.setOption(option);
详细配置，定制样式，给自定义事件
option= {
tooltip:{
formatter:function(params,ticket,callback){
return params.seriesName+
+params.name+：+params.value
}
},
visualMap:{
min:0,
max:1500,
left:left,
top:bottom,
text:[高,低],
inRange:{
color:[#e0ffff, #006edd]
},
show:true
},
geo:{
map:china,
roam:false,
zoom:1.23,
label:{
normal:{
show:true,
fontSize:10,
color:rgba(0,0,0,0.7)
}
},
itemStyle:{
normal:{
borderColor:rgba(0, 0, 0, 0.2)
},
emphasis:{
areaColor:#F3B329,
shadowOffsetX:0,
shadowOffsetY:0,
shadowBlur:20,
borderWidth:0,
shadowColor:rgba(0, 0, 0, 0.5)
}
}
},
series: [
{
name:信息量,
type:map,
geoIndex:0,
data:dataList
}
]
};
变量解释：
tooltip：定制信息提示框的内容，其中params参数表示数据。
visualMap：图注样式定制，其中包括color范围，文字提示。
geo:定义地图为china。
zoom:视角缩放比例，roam：是否开启缩放和平移
itemStyle：地图外观定制，其中normal表示正常显示的样式，emphasis表示鼠标悬浮下样式。
series：整体配置，其type很关键，表示该例是地图。
data:图表所用数据，实际项目中大家可以通过http获取数据，再赋值给data。
Echarts图表可为现场运维人员提供可视化面板监控工具，直观展现被监控的主机、业务、数据库性能、也可以用于故障定位、故障分析等场景。
目前湖南/湖北移动日志管理平台报表管理中心，现场运维人员正是通过echarts组件灵活配置实现数据库性能监控、故障定位等运维场景。
停开机工单统计报表：
服务器监控图表：
对于运维来说，不同的数据需要不同的展现形式，要能通过灵活的配置来提供不同的数据展现，常规的柱状图、曲线图、饼图、雷达图、面积图都是运维数据展现所应具备的，
以上是echarts的基础配置引入和使用规范，及结合项目实际场景使用介绍，希望对大家能有一点启发。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/130076.html
摘要：发布是由团队开源的，操作接口库，已成为事实上的浏览器操作标准。本周正式发布，为我们带来了，，支持自定义头部与脚部，支持增强，兼容原生协议等特性变化。新特性介绍日前发布了大版本更新，引入了一系列的新特性与提升，本文即是对这些变化进行深入解读。 showImg(https://segmentfault.com/img/remote/1460000012940044); 前端每周清单专注前端...
摘要：我们再来看一下调用栈，如下图从图中我们发现了一个调用栈的代码执行过，还记得里提到吗发起脏检查的通知者，它代理了原生事件，任何一个原生异步事件的触发都会导致的运行。 寻找真凶Echarts or Angular 这是一篇故事，就如同技术，我们所追求的不是一个结局，而是那些深受启发与共鸣的过程，那是我们成长的经验与生产力的积淀！ 故事开始于疯了的ionic3应用 页面打开，什么也没做5s里...
摘要：我们再来看一下调用栈，如下图从图中我们发现了一个调用栈的代码执行过，还记得里提到吗发起脏检查的通知者，它代理了原生事件，任何一个原生异步事件的触发都会导致的运行。 寻找真凶Echarts or Angular 这是一篇故事，就如同技术，我们所追求的不是一个结局，而是那些深受启发与共鸣的过程，那是我们成长的经验与生产力的积淀！ 故事开始于疯了的ionic3应用 页面打开，什么也没做5s里...
摘要：小程序实现页面转化图片并保存到相册场景小程序测试活动，实现雷达图展示不同的结果微信头像二维码测试结果文字，最终绘制出一张图片用户保存相册。圆形头像建议切镂空图覆盖，，有很难实现效果建议查看微信小程序社区的帖子。 小程序echarts+canvasdrawer实现页面转化图片并保存到相册 场景：小程序测试活动，实现echarts雷达图展示不同的结果、微信头像、二维码、测试结果文字，最终绘...
摘要：小程序实现页面转化图片并保存到相册场景小程序测试活动，实现雷达图展示不同的结果微信头像二维码测试结果文字，最终绘制出一张图片用户保存相册。圆形头像建议切镂空图覆盖，，有很难实现效果建议查看微信小程序社区的帖子。 小程序echarts+canvasdrawer实现页面转化图片并保存到相册 场景：小程序测试活动，实现echarts雷达图展示不同的结果、微信头像、二维码、测试结果文字，最终绘...
摘要：或许，它还终将改变用户对移动的期待。通过一个场景实例了解前端处理大数据的无限可能随着前端的飞速发展，在浏览器端完成复杂的计算，支配并处理大量数据已经屡见不鲜。 推荐 1. 神经网络入门 http://www.ruanyifeng.com/blo... 眼下最热门的技术，绝对是人工智能，人工智能的底层模型是神经网络（neural network）。许多复杂的应用（比如模式识别、自动控制）...
阅读 1023·2023-01-11 13:20
阅读 1298·2023-01-11 13:20
阅读 808·2023-01-11 13:20
阅读 1392·2023-01-11 13:20
阅读 3709·2023-01-11 13:20
阅读 2085·2023-01-11 13:20
阅读 2231·2023-01-11 13:20
阅读 1075·2023-01-11 13:20
