概念介绍
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
快速入门
①基于HTML创建脚本
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>首页</title>
<!-- 引入 ECharts 文件 -->
<script src="echars/jquery.js"></script>
<script src="echars/echarts.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;background-color: blanchedalmond"></div>
</body>
</html>
②渲染组件
<script>
$(function(){
var myChart = echarts.init($("#char_bar")[0]);
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['品类销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
type: 'bar',
name: '品类销量',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
</script>
③渲染结果
基础概念
echarts 实例
一个网页中可以创建多个 echarts 实例。每个 echarts 实例 中可以创建多个图表和坐标系等等（用 option 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。
系列（series）
系列（series）是很常见的名词。在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 系列 包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。
echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）等。如下图，右侧的 option 中声明了三个 系列（series）：pie（饼图系列）、line（折线图系列）、bar（柱状图系列），每个系列中有他所需要的series.data
<script>
$(function(){
var myChart = echarts.init($("#char_bar2")[0]);
// 指定图表的配置项和数据
var option= {
title: {
text: 'ECharts图例基本使用和'
},
tooltip: {},
legend: {
data:['品类销量','利润点',"市场占比"]
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
type: 'bar',
name: '品类销量',
data: [5, 20, 36, 10, 10, 20]
},{
type: 'line',
name: '利润点',
data: [3, 15, 15, 5, 8, 12]
},{
type: 'pie',
name: '市场占比',
center:["80%",80],
radius:50,
data: [
{name:"华南",value:150},
{name:"华北",value:100},
{name:"华中",value:60},
{name:"其他",value:50}
]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
</script>
类同地，下图中是另一种配置方式，系列的数据从 dataset 中取：
var option= {
title: {
text: 'ECharts图例基本使用'
},
dataset:{
source:[
["衬衫",5,3,"华南",150],
["羊毛衫",20,15,"华北",100],
["雪纺衫",36,15,"华中",60],
["裤子",10,5,"其他",50],
["高跟鞋",10,8],
["袜子",20,12]
]
},
tooltip: {},
legend: {
data:['品类销量','利润点',"市场占比"]
},
xAxis: {
type:"category"
},
yAxis: {},
series: [{
type: 'bar',
name: '品类销量',
encode:{x:0,y:1}
},{
type: 'line',
name: '利润点',
encode:{x:0,y:2}
},{
type: 'pie',
name: '市场占比',
center:["80%",80],
radius:50,
encode:{itemName:3,value:4}
}]
};
组件（component）
在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）等。我们注意到，其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。如下图，右侧的 option 中声明了各个组件（包括系列），各个组件就出现在图中。
坐标系
很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。
一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。
xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。我们来看下图，这是最简单的使用直角坐标系的方式：只声明了 xAxis、yAxis 和一个 scatter（散点图系列），echarts 暗自为他们创建了 grid 并关联起他们：
散点图系列
var option={
title: {
text: '散点分布案例'
},
legend:{data:["点分布"]},
tooltip:{},
xAxis:{},
yAxis:{},
series:[
{
type:"scatter",
name:"点分布",
data:[
[13,44],
[51,51],
[51,32],
[67,19],
[19,33]
]
}
]
}
折线图
var option={
title: {
text: '折线分布图'
},
legend:{data:["折线图"]},
tooltip:{},
xAxis:{
type: "category",
data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
},
yAxis:{
min:0,
max:100,
interval:10
},
series:[
{
type:"line",
name:"折线图",
data:[10,20,40,35,40,20,10]
}
]
}
柱状图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F9q6Wabx-1585185588044)(assets/image-20200319165901828.png)]
var option={
title: {
text: '柱状分布图'
},
legend:{data:["柱状图"]},
tooltip:{},
xAxis:{
type: "category",
data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
},
yAxis:{
min:0,
max:100,
interval:10
},
series:[
{
type:"bar",
name:"柱状图",
data:[10,20,40,35,40,20,10]
}
]
}
不同Y轴
var option={
title: {
text: '不同Y轴'
},
legend:{data:["访问量1","访问量2"]},
tooltip:{},
xAxis:{
data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
},
yAxis:[
{min:0,max:50,interval:5},
{min:0,max:100,interval:5}
],
series:[
{
type:"bar",
name:"访问量1",
data:[10,20,40,35,40,20,10],
yAxisIndex:0
},{
type:"line",
name:"访问量2",
data:[55,15,40,35,40,25,100],
yAxisIndex:1
}
]
}
不同x/y轴
var option={
title: {
text: '不同X和Y使用grid分离',
left:"45%",
top:0
},
grid:[
{top:50,height:"80%",width:"40%"},
{top:50,height:"80%",width:"40%",right:"5%"}
],
legend:{
data:["访问量1","访问量2"],
left:"80%",
top:0
},
tooltip:{},
xAxis:[
{ data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"],gridIndex:0,type:"category"},
{ data:["mon","tus","wes","thu","fri","sat","sun"],gridIndex:1,type:"category"}
],
yAxis:[
{min:0,max:50,interval:5,gridIndex:0},
{min:0,max:100,interval:10,gridIndex:1}
],
series:[
{
type:"bar",
name:"访问量1",
data:[10,20,40,35,40,20,10],
yAxisIndex:0,
xAxisIndex:0
},{
type:"line",
name:"访问量2",
data:[55,15,40,35,40,25,100],
yAxisIndex:1,
xAxisIndex:1
}
]
}
饼状图
var option = {
legend:{
data:["访问来源","周访问量"]
},
tooltip:{},
xAxis:{
type: "category",
data:["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]
},
yAxis:{
min:0,
max:100,
interval:10
},
grid:{
left:"5%",
width:"60%"
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center:["80%","50%"],
radius:55,
data:[
{value:0, name:'视频广告'},
{value:274, name:'联盟广告'},
{value:310, name:'邮件营销'},
{value:100, name:'直接访问'},
{value:90, name:'搜索引擎'},
{value:95, name:'广告推广'}
]
},{
type:"bar",
name:"周访问量",
data:[10,20,40,35,40,20,10]
}
]
};
扫一扫
86
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
