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 >

好处：可以不用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:[