Echarts3.0入门基础与实战(学习笔记)

来源：互联网发布：驾照模拟考试c1软件编辑：程序博客网时间：2024/06/10 02:23

1.浏览器画图原理简介

2.Echarts库简介

3.Echarts简单使用

4.Echarts组件使用

5.Echarts高级图例介绍

6.扩展知识

1.浏览器画图原理简介

canvas 基于像素，Echarts就是基于canvas

开始绘制一个简单的圆

<canvasid="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">
<circlecx="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>

好处：可以不用javascript代码,由标签组成

常见的图形组件：标题，工具栏，图例，提示框，坐标轴(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>

总结一下实例过程：Echarts.init()初始化和setOption绘制数据；其中option对象中包括标题(title)，图例(lenged)，x轴(xAxis)，y轴，数据(series包括Name, type, data);

如果修改成折线图，把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:'平均值'}
]
}

具体还可以在每个对象里面设置symbol(arraw箭头展示)以及symbolSize和symbolRotate

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}<br/>{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}<br/>{b}:{c}%'
},
toolbox:{
feature:{
restore:{},
saveAsImage:{}
}
},
series:[
{
name:'业务指标',
type:'gauge',
detail:{formatter:'{value}%'},
data:[{value:32,name:'完成率'}]
},
]
};
myChart.setOption(option);
</script>

主要是type的类型改变了，这里的value好像也是类似vue的双向数据版定呢？

再在仪表图的基础上添加定时器

setInterval(function (){
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) -0;
myChart.setOption(option,true);
}, 2000);

在每隔2000ms仪表图的指针指向随机的位置，(注：有动画过渡的效果)；

接下来会介绍一些关于地图的组件方法：地图，散点图，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>

注意yAxisLabel

接下来在学习一个新的组件dataZoom

X轴可以控制区域 --区间显示 --缩放显示配置dataZoom （在大数据展示中使用）

代码：

<div id="main" style="width:900px; height:600px"></div>
<script>
var myChart =echarts.init(document.getElementById('main'));
var base = +newDate(1968,9, 3);
var oneDay =24 *3600 *1000;
var date = [];
var data = [Math.random() *300];
for (vari =1; i < 20000; i++) {
var now =newDate(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: newecharts.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值域的选择

最后感谢慕课网的蜗牛老湿所讲解的课程。

阅读全文

0 0