Echarts3.0入门基础与实战(学习笔记)
1.浏览器画图原理简介
2.Echarts库简介
3.Echarts简单使用
4.Echarts组件使用
5.Echarts高级图例介绍
6.扩展知识
1.浏览器画图原理简介
canvas 基于像素，Echarts就是基于canvas
开始绘制一个简单的圆
<
canvas
id=
"mycanvas"
width=
"400px"
height=
"300px"
>你的浏览器不支持canvas
canvas
>
<
script
>
var
canvas =
document.
getElementById(
'mycanvas');
var
ctx =
canvas.
getContext(
'2d');
ctx.
beginPath();
ctx.
strokeStyle =
'blue';
var
circle = {
x :
100,
y :
100,
r :
50
}
ctx.
arc(
circle.
x,
circle.
y,
circle.
r,
0,
Math.PI *
2,
false);
ctx.
stroke();
<
/
script
>
Svg, 基于对象模型， 多个图形元素， 高保真
再来一个Svg的栗子，注意要添加xmlns="http://www.w3.org/2000/svg";
<
svg
width=
"100%"
height=
"100%"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
>
<
circle
cx=
"70"
cy=
"50"
r=
"40"
stroke=
"black"
stroke-width=
"2"
fill=
"red"
>
circle
>
<
rect
x=
"120"
width=
"100"
height=
"100"
style=
"fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0, 0, 0)"
>
svg
>
常见的图形组件：标题， 工具栏， 图例， 提示框， 坐标轴(X轴，Y轴).
echarts3,在官网中可以看到很多。丢个链接 http://echarts.baidu.com 。好炫。
Echarts简单使用
柱状图：
<
div
id=
"main"
style=
"width:900px; height:600px;"
>
div
>
<
script
>
//基于准备好的dom，初始化Echarts实例
var
myChart =
echarts.
init(
document.
getElementById(
'main'));
//置顶图标的配置和数据，赶脚和vue的new Vue一样
var
option = {
//标题
title:{
text:
'ECharts 入门示例'
},
//工具箱
toolbox:{
show:
true,
feature:{
saveAsImage: {
show:
true
}
}
},
//图例
legend:{
data:[
'销量']
},
//x轴
xAxis: {
data:[
'衬衫',
'羊毛衫',
'雪纺衫',
'裤子',
'高根鞋',
'袜子']
},
yAxis : {
},
//数据
series:[{
name:
'销量',
type:
'bar',
data:[
5,
20,
36,
10,
10,
20]
}]
};
//使用刚指定的配置项和数据显示图表
myChart.
setOption(
option);
<
/
script
>
如果修改成折线图，把type改成line;
常用的标题(title里面可以设置的)组件：Text:标题文字， Subtext:子标题，left,top,right,bottom标题位置，borderColor边框颜色，borderWidth边框宽度。
具体的title里面还有很多，具体可以查看官方文档。title在页面中基本上放在左上角
常用工具栏(toolbox)组件：show:是否显示，Feature:显示具体的功能，saveAsImage保存图片，Restore还原，dataView数据视图，dataZoom缩放视图，magicType动态类型转换。
toolbox里面的小功能按钮在页面的右上角，dataView可以切换到查看具体数据，并且可以修改，restore可以恢复。datazoom区域缩放，高大上。
常用的弹窗(tooltip)组件：show是否显示，trigger出发方式，axis就是x轴出发。具体显示数据的值。
标记线和标记点：Markline & Markpoint 在series(数据)下使用，加段代码以便加深印象：
markPoint:{
data:[
{
type:
'max',
name:
'最大值'},
{
type:
'min',
name:
'最小值'}
]
},
markLine:{
data:[
{
type:
'average',
name:
'平均值'}
]
}
3.Echarts可视化
饼图展示数据的特点，展示百分比，Type是pie
Center圆心坐标
Radius半径
Name图例名字，
selectedMode是否支持多选
再来一个demo
<
div
id=
"main"
style=
"width:900px; height:600px;"
>
div
>
<
script
>
var
myChart =
echarts.
init(
document.
getElementById(
'main'));
var
option = {
title:{
text:
'某站点用户访问来源',
subtext:
'纯属虚构',
x:
'center'
},
tooltip:{
// show:true,
trigger:
'item',
formatter:
'{a}
{b}:{c} ({d}%)'
{b}:{c} ({d}%)'
},
legend:{
orient:
'vertical',
left:
'left',
data:[
'直接访问',
'邮件营销',
'联盟广告',
'视频广告',
'搜索引擎']
},
series:[
{
name:
'访问来源',
//饼图
type:
'pie',
//半径大小
radius:
'55%',
//圆心位置
center:[
'50%',
'60%'],
data:[
{
value:
335,
name:
'直接访问'},
{
value:
310,
name:
'邮件营销'},
{
value:
234,
name:
'联盟广告'},
{
value:
135,
name:
'视频广告'},
{
value:
1548,
name:
'搜索引擎'}
]
}
]
};
myChart.
setOption(
option);
<
/
script
>
仪表图
仪表图展示数据的特点 type是gauge
动态修改仪表图数据
贴个例子：
<
div
id=
"main"
style=
"width:900px; height:600px;"
>
div
>
<
script
>
var
myChart =
echarts.
init(
document.
getElementById(
'main'));
var
option = {
tooltip:{
formatter:
'{a}
{b}:{c}%'
{b}:{c}%'
},
toolbox:{
feature:{
restore:{},
saveAsImage:{}
}
},
series:[
{
name:
'业务指标',
type:
'gauge',
detail:{
formatter:
'{value}%'},
data:[{
value:
32,
name:
'完成率'}]
},
]
};
myChart.
setOption(
option);
<
/
script
>
再在仪表图的基础上添加定时器
setInterval(
function (){
option.
series[
0].
data[
0].
value = (
Math.
random() *
100).
toFixed(
2) -
0;
myChart.
setOption(
option,
true);
},
2000);
接下来会介绍一些关于地图的组件方法：地图，散点图，K线图，雷达图。
//此处应该有地图的详解和代码。
首先由具体的地理位置信息(经纬度)，具体城市的数据，定义路径，convertData转换数据，series，以及上面的option
具体可以做飞机的航线信息
散点图，k线图，雷达图
散点图：城市污染信息
k线图：股市信息
雷达图：工资信息，个人能力展示
Echarts可视化
多个坐标系的配合，dataZoom组件。值域漫游；
多个坐标系配合：
两个图标合并展示
设置两个y轴
配置多个yaxis
梨子：
<
div
id=
"main"
style=
"width:900px; height:600px"
>
div
>
<
script
>
var
myChart =
echarts.
init(
document.
getElementById(
'main'));
var
option = {
tooltip : {
trigger :
'axis'
},
toolbox:{
feature:{
dataView:{
show:
true,
readOnly:
false
},
magicType:{
show:
true,
type:[
'line',
'bar']
},
restore:{
show:
true
},
saveAsImage:{
show:
true
}
}
},
legend:{
data:[
'蒸发量',
'降水量',
'平均温度']
},
xAxis:[
{
type:
'category',
data:[
'1月',
'2月',
'3月',
'4月',
'5月',
'6月',
'7月',
'8月',
'9月',
'10月',
'11月',
'12月']
}
],
yAxis:[
{
type:
'value',
name:
'水量',
min:
0,
max:
250,
interval:
50,
axisLabel:{
formatter:
'{value} ml'
}
},
{
type:
'value',
name:
'温度',
min:
0,
max:
25,
interval:
5,
axisLabel:{
formatter:
'{value} °C'
}
}
],
series:[
{
name:
'蒸发量',
type:
'bar',
data:[
2.0,
4.9,
7.0,
23.2,
25.6,
76.7,
135.6,
162.2,
32.6,
20.0,
6.4,
3.3]
},
{
name:
'降水量',
type:
'bar',
data:[
2.6,
5.9,
9.0,
26.4,
28.7,
70.7,
175.6,
182.2,
48.7,
18.8,
6.0,
2.3]
},
{
name:
'平均温度',
type:
'line',
yAxisIndex:
1,
data:[
2.0,
2.2,
3.3,
4.5,
6.3,
10.2,
20.3,
23.4,
23.0,
16.5,
12.0,
6.2]
}
]
};
myChart.
setOption(
option);
<
/
script
>
接下来在学习一个新的组件dataZoom
X轴可以控制区域 --区间显示 --缩放显示 配置dataZoom （在大数据展示中使用）
代码：
<
div
id=
"main"
style=
"width:900px; height:600px"
>
div
>
<
script
>
var
myChart =
echarts.
init(
document.
getElementById(
'main'));
var
base = +
new
Date(
1968,
9,
3);
var
oneDay =
24 *
3600 *
1000;
var
date = [];
var
data = [
Math.
random() *
300];
for (
var
i =
1;
i <
20000;
i++) {
var
now =
new
Date(
base +=
oneDay);
date.
push([
now.
getFullYear(),
now.
getMonth() +
1,
now.
getDate()].
join(
'-'));
data.
push(
Math.
round((
Math.
random() -
0.5) *
20 +
data[
i -
1]));
}
option = {
tooltip: {
trigger:
'axis',
position:
function (
pt) {
return [
pt[
0],
'10%'];
}
},
title: {
left:
'center',
text:
'大数据量折线图',
},
legend: {
top:
'bottom',
data: [
'意向']
},
toolbox: {
show:
true,
feature: {
dataView: {
show:
true,
readOnly:
false
},
magicType: {
show:
true,
type: [
'line',
'bar',
'stack',
'tiled']
},
restore: {
show:
true
},
saveAsImage: {
show:
true
}
}
},
xAxis: {
type:
'category',
boundaryGap:
false,
data:
date
},
yAxis: {
type:
'value',
boundaryGap: [
0,
'100%']
},
dataZoom: [{
type:
'slider',
start:
10,
end:
40
}],
series: [{
name:
'模拟数据',
type:
'line',
smooth:
true,
symbol:
'none',
sampling:
'average',
itemStyle: {
normal: {
color:
'rgb(255, 70, 131)'
}
},
areaStyle: {
normal: {
color:
new
echarts.
graphic.
LinearGradient(
0,
0,
0,
1, [{
offset:
0,
color:
'rgb(255, 158, 68)'
}, {
offset:
1,
color:
'rgb(255, 70, 131)'
}])
}
},
data:
data
}]
};
myChart.
setOption(
option);
<
/
script
>
值域漫游
--dataRange值域的选择
最后感谢慕课网的蜗牛老湿所讲解的课程。