1.Echarts简介

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器

ECharts 提供了常规的折线图、柱状图、散点图、饼图、 K线图，用于统计的盒形
图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系
图、 treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，
并且支持图与图之间的混搭

2.常用图表的开源网站

Echarts官网： https://echarts.apache.org/zh/index.html

ISQQW（ECharts Demo集）：EChartsDemo集

二、常用的图表的代码函数

1.柱状图

代码如下（示例）：

通过盒子显示
<div class="modal fade" id="modal_user_bing" role="dialog" aria-labelledby="modal_user_import" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><div id="bing" style="width: 600px;height: 400px;"></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></div></div></div></div></div>

js函数

点击按钮通过调用js函数进行渲染//柱状图$("#btn_echar").click(function(){//通过局部刷新技术获取后台数据$.ajax({url:"sexnum.htm",dataType:"json",type:"post",success:function(res){if(res.success){//通过循环设置数据var list = res.list;var xingb =[];var num =[];for (var i = 0; i < list.length; i++) {xingb[i]=list[i].sex;num[i]=list[i].num;}//通过id寻找到要渲染的对象var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;
// 指定图表的配置项和数据option = {xAxis: {type: 'category',data: xingb},yAxis: {type: 'value'},series: [{data: num,type: 'bar'}]};option && myChart.setOption(option);$('#modal_user_echar').modal('show');}else{$("#select_message").text(res.errorMsg);$("#alertmod_table_user_mod").show();}}});});

2.饼状图

代码如下（示例）：

<div class="modal fade" id="modal_user_bing" role="dialog" aria-labelledby="modal_user_import" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-body"><div id="bing" style="width: 600px;height: 400px;"></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button></div></div></div></div></div>

js函数

//饼状图$("#btn_bing").click(function(){//通过局部刷新技术获取后台数据$.ajax({url:"sexnum.htm",dataType:"json",type:"post",success:function(res){if(res.success){//通过循环设置数据var list = res.list;var byte=[];for (var i = 0; i < list.length; i++) {byte[i]={value:list[i].num,name:list[i].sex};}//通过id寻找到要渲染的对象var chartDom = document.getElementById('bing');var myChart = echarts.init(chartDom);var option;option = {tooltip: {trigger: 'item'},legend: {top: '5%',left: 'center'},series: [{name: 'Access From',type: 'pie',radius: ['40%', '70%'],avoidLabelOverlap: false,itemStyle: {borderRadius: 10,borderColor: '#fff',borderWidth: 2},label: {show: false,position: 'center'},emphasis: {label: {show: true,fontSize: '40',fontWeight: 'bold'}},labelLine: {show: false},data: byte}]};option && myChart.setOption(option);$('#modal_user_bing').modal('show');}else{$("#select_message").text(res.errorMsg);$("#alertmod_table_user_mod").show();}}});});

不是特别会写前端，只是分享一下

Echarts图表插件相关推荐

html5 地图效果,html5 echarts图表插件炫光的分布地图动画特效
特效描述:图表插件炫光的动画分布地图动画动画特效.html5地图动画,html5 echarts图表插件代码结构 1. 引入JS 2. HTML代码 ECharts $('#documen ...
Echarts图表插件(4.x版本)使用（二、带分类筛选的多个图表/实例化多个ECharts，以关系图/force为例）...
导读如果想在一个页面里实例化带分类筛选的多个Echarts该怎么做呢? 曾探讨了带分类选择的关系图显示为自定义图片的需求实现,传送门ECharts图表插件(4.x版本)使用(一.关系图force节点 ...
echarts图表插件炫光的分布地图动画特效
echarts图表插件炫光的分布地图动画特效作品介绍 1.网页作品简介方面 :地图html5图表html5动画 2.网页作品编辑方面:此作品为学生个人主页网页设计题材,代码为简单学生水平 html+ ...
ECharts 图表插件使用整理（图表配置实现）
ECharts 图表插件使用整理说明 ECharts 是一个 JavaScript 实现的开源可视化库,兼容当前绝大部分浏览器 IE 8 以上,是一个可高度个性化定制的数据可视化图表 ECharts ...
保姆级教程｜ECharts图表插件一文搞懂！
黑马程序员视频库播妞QQ号:3077485083 传智播客旗下互联网资讯.学习资源免费分享平台在前端项目开发中,有很多地方会遇到绘制图表的需求,一般的图表可以通过canvas来绘制,但是遇到复杂一 ...
Vue中使用echarts图表插件
一.安装echarts依赖 npm install echarts -S 或者使用淘宝的镜像 npm install -g cnpm --registry=https://registry.npm.t ...
vue2.0_在vue中使用echarts图表插件
说明:本例子基于vue-cli脚手架搭建首先,安装echarts依赖 npm install echarts -S 注:安装NodeJS之后,使用npm来安装包使用的是国外的地址,经常会出现超时错误 ...
使用 charts.js、flot-charts、Echarts图表插件。
charts.js 基于 HTML5 的 JavaScript 图表库. 该组件特点就是简单,轻巧. 缺点:想要在图表上实现标识线比较麻烦. 目前支持 ,Line,Bar,Radar,Polar Ar ...
layui 引入echarts图表插件
前言本篇文章不是基于layui-admin官方后台模板,如果使用官方后台模板的可作参考. echart.js下载 1.修改echarts.js 注:引入前需要修改echarts.js文件,否则无法引 ...

Echarts图表插件