Echarts概念与应用
一.什么是Echarts？
ECharts是互联网开发程序过程中，后台数据库用以实现数据到图形的映射的一个插件。
具体来说一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器，底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
简单来说ECharts是一个纯JavaScript图表库，底层依赖于轻量级的Canvas类库ZRender，基于BSD开原协议，是一款非常优秀的可视化前端框架。
二.为什么要使用Echarts？
1、丰富的可视化类型
提供了常规的图，盒形图，用于地理数据可视化的图，用于关系数据可视化的图，多维数据可视化的平行坐标，并且支持图与图之间的混搭。
2、代码直接引用，
效率提升利器在官网的示例当中，左侧的代码可以直接套用、引用，改变属性，简直太好用了。
3、增量渲染技术
千万级数据量不在话下通过增量渲染技术，即使展现千万级数据量也能够进行流畅的缩放平移等交互加载。
4、无缝连接百度地图
实现地图视图作为百度的开源产品，Echarts与百度地图无缝连接，结合百度地图的图层，可以做出航线、地铁、公交等动态3D线路图，实现超炫的地图视图。
5、识别数据差异
让图表动起来Echarts会找到两组数据之间的差异，然后通过合适的动画去表现数据的变化，让数据动起来~
三.如何使用Echarts？
1.首先在官网 选择合适的下载版本
官网地址：https://echarts.apache.org/zh/index.html
2.引入Echarts
<script src="js/echarts.js"></script>3.绘制一个简单的图表
准备一个DOM容器<div class="chart" style="width: 800px; height: 800px;"></div>4.创建一个简单的柱形图
//创建一个echarts的对象
var char=echarts.init($('.chart').get(0));
char.setOption({
title:{ //标题组件，包含主标题和副标题
text:'柱状图'
},
legend:{ //图例组件。图例组件展现了不同系列的标记(symbol)，
//颜色和名字。可以通过点击图例控制哪些系列不显示。
data:["销量"]
},
xAxis:{ //直角坐标系中的 x 轴
data:["2018","2019","2020","2021"]
},
yAxis:{ 直角坐标系中的 y 轴
},
series:{ //系列列表。每个系列通过 type 决定自己的图表类型bar指的是柱形图
name:"销量",
type:"bar",
data:[180,150,200,50]
}
});在页面中展示的就是如下效果：
也可以在官网上通过API调整它的样式如果想写一个饼图的话只需要找到Echarts 对象中的series对象中的 type属性改成饼图（pie）type:“pie”,
var char=echarts.init($('.char').get(0));
char.setOption({
title:{ //标题
text:"饼状图",
show:true,
link:'https://www.baidu.com', //点击标题跳转地址
textStyle:{ //标题颜色
color:'pink'
},
subtext:"垃圾数据", //副标题
left:40 //左边间隙40
},
legend:{ //图例
data: ["Apple", "Grapes", "Pineapples", "Oranges"]
},
xAxis:{ //X轴
},
yAxis:{
},
series:{
name:"数据",
type:"pie", //饼图
data:[{value:50,name:"Apple"}, //数据
{value:80,name:"Grapes"},
{value:60,name:"Pineapples"},
{value:30,name:"Oranges"}]
},
})最后献上一个百家姓氏的小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
<script src="echarts.js"></script>
<style>
.char1{
width: 1400px;
height: 800px;
}
</style>
</head>
<body>
<div class="char1"></div>
<script>
//创建echarts对象
var char1=echarts.init($('.char1').get(0));
var data=show(); //接收函数
char1.setOption({
title:{
text:"饼状图",
show:true, //是否显示
},
legend:{
data:data.legenddata, //绑定图例数据
selected:data.selected, //绑定是否默认显示数据
left:'1200',
orient:'vertical', //图例列表的布局朝向。
type:'scroll', //显示分页
pageButtonPosition:'start', //图例控制块的位置。
pageIconSize:[30,30], //图例的大小
animation:true, //是否启动图例动漫效果
animationDurationUpdate:10000 //图例翻页时的动画时长。
},
series:{
name:'姓氏',
type:'pie',
data:data.seriesdata //绑定数据
}
});
// 封装的函数
function show(){
var arr=['赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'];
//随机排序
arr.sort(function(){
return Math.random()-0.5;
});
var legenddata=[]; //用来接收拼接的姓
var seriesdata=[]; //显示拼接的姓和value
var selected={}; //用来接收图例的状态true,false
//将arr分成70一组
for(var i=0;i<70;i++){
//拼接姓氏
var mark=arr[0]+arr[1];
//每次循环往数组最后一个添加拼接姓氏
legenddata.push(mark);
//每次循环往数组添加最后一个对象，储存拼接姓氏和随机值
seriesdata.push({
name:mark,
value:Math.floor(Math.random()*1000)
});
//默认显示前6个姓氏true显示，false不显示
selected[mark]=i<6; //0，1，2，3，4，5前六个返回true，后64个返回false
//每次循环删除数组第一个，防止拼接姓氏重复
arr.shift();
arr.shift();
}
//返回一个对象形式的，三个数组
return{
legenddata:legenddata,
seriesdata:seriesdata,
selected:selected
}
}
</script>
</body>
</html>用Echarts写一个中国地图
引入Echarts与
<script src="echarts.js"></script>
<script src="china.js"></script>china.js的插件可以在官网下载
创建一个容器
<div class="charts"></div>全部代码：首先要设置Echarts对象下series的type:‘map’（地图）, 与 map: ‘china’,（地图类型。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="jquery.js"></script>
<script src="echarts.js"></script>
<script src="china.js"></script>
<style>
*{
margin: 0px;
padding: 0px;
}
html,body,.charts{
width: 100%;
height: 100%;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="charts"></div>
<script>
function random(){
return Math.floor(Math.random()*1000)
}
var char=echarts.init($(".charts").get(0));
char.setOption({
visualMap: {
// type:'continuous', 连续式
type:'piecewise', //分段式
target:{
inRange:{ //在选中范围内 的视觉元素
color:['rgb(100, 248, 199)','rgb(79, 252, 194)','rgb(0, 250, 167)']
},
outOfRange:{ //在选中范围外 的视觉元素
color:['rgb(241, 240, 135)','rgb(250, 247, 90)','rgb(255, 251, 3)']
}
},
controller:{
inRange:{ //在选中范围内 的视觉元素
color:['red']
},
outOfRange:{ //在选中 范围外 的视觉元素
color:['greed']
}
}
},
series:{
type:'map',
map: 'china',
data:[ { name: '北京', value: random() },
{ name: '天津', value: random() },
{ name: '上海', value: random() },
{ name: '重庆', value: random() },
{ name: '河北', value: random() },
{ name: '河南', value: random() },
{ name: '云南', value: random() },
{ name: '辽宁', value: random() },
{ name: '黑龙江', value: random() },
{ name: '湖南', value: random() },
{ name: '安徽', value: random() },
{ name: '山东', value: random() },
{ name: '新疆', value: random() },
{ name: '江苏', value: random() },
{ name: '浙江', value: random() },
{ name: '江西', value: random() },
{ name: '湖北', value: random() },
{ name: '广西', value: random() },
{ name: '甘肃', value: random() },
{ name: '山西', value: random() },
{ name: '内蒙古', value: random() },
{ name: '陕西', value: random() },
{ name: '吉林', value: random() },
{ name: '福建', value: random() },
{ name: '贵州', value: random() },
{ name: '广东', value: random() },
{ name: '青海', value: random() },
{ name: '西藏', value: random() },
{ name: '四川', value: random() },
{ name: '宁夏', value: random() },
{ name: '海南', value: random() },
{ name: '台湾', value: random() },
{ name: '香港', value: random() },
{ name: '澳门', value: random() }]
}
})
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
