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

最新推荐文章于 2023-08-02 16:51:03 发布

桃子西瓜金苹果

最新推荐文章于 2023-08-02 16:51:03 发布

阅读量760

点赞数

分类专栏：学习笔记，Echarts

本文链接：https://blog.csdn.net/xi_xi_1117/article/details/78147586

版权

本文是Echarts3.0的学习笔记，涵盖了浏览器画图原理、Echarts库介绍、基本使用方法、组件应用及高级图表。通过实例展示了柱状图、饼图、仪表图、地图、散点图、K线图和雷达图的实现，以及dataZoom和dataRange等组件的使用。

摘要由CSDN通过智能技术生成

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:[