Echarts学习笔记（一）canvas\svg

水深无声 2022-02-02 16:05 488阅读 0赞

[官网下载echarts][echarts]：（选择其一即可）

*  [完整版echarts.min.js][echarts.min.js]
 *  [源代码版echarts.js][echarts.js]

--------------------

## 浏览器画图原理 ##

Canvas

1.  基于像素
2.  单个html，类似于画笔在画布上画画
3.  Echarts基于canvas画图

SVG

*  基于对象模型
 *  多个图形元素
 *  高保真

<canvas id="myCanvas" width="400" height="400" >
    		您的浏览器不支持
    	</canvas>
    	<script> // 获取画布对象 var myCanvas = document.getElementById('myCanvas'); var ctx = myCanvas.getContext('2d'); // 开始绘画一个新的路径 ctx.beginPath(); // 设置弧线为蓝色 ctx.strokeStyle = "blue"; var circle = { x : 100,//圆心x轴的坐标 y : 100, r : 50 //圆的半径 }; ctx.arc(circle.x,circle.y,circle.r,0,Math.PI*2,false); // 按照指定的路径绘制弧线 ctx.stroke(); </script>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    		
    		<circle cx="70" cy="50" r="40" stroke="blank" 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)">
    		</rect>
    	</svg>

--------------------

## 常见的图形组件 ##

*  标题、工具栏、图例、提示框
 *  坐标轴  
    X轴  
    Y轴

--------------------

1、HTML结构  
2、 Echarts.init()：

*  初始化Echarts实例
 *  setOption用指定数据绘图  
    3、Option对象
 *  title标题
 *  图例：legend
 *  X轴：xAxis
 *  数据：series：  
    *- name、type、data*

--------------------

柱状图如下：

<div id="main" style="width: 1000px;height: 600px;"></div>
    	<script> var myCharts = echarts.init(document.getElementById('main')); //指定图标的配置项和数据 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,37,10,10,20] }] }; // 使用刚设置的数据项和数据显示图标 myCharts.setOption(option); </script>

--------------------

柱状图和折线图

<div id="main" style="width: 1000px;height: 600px;"></div>
    	<script> var myCharts = echarts.init(document.getElementById('main')); //指定图标的配置项和数据 var option = { // 标题 title:{ text: 'Echarts 入门示例' }, // 工具箱 toolbox:{ show: true, feature: { saveAsImage: { show: true } } }, // 图例 legend: { data: ['销量'] }, // x轴 xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋"] }, yAxis: { }, // 数据 series: [{ name: '销量', type: 'line',//折线图 data: [7,30,47,30,30] }] }; // 使用刚设置的数据项和数据显示图标 myCharts.setOption(option); </script>

--------------------

## 标题组件 ##

*  text：标题文字
 *  subtext：子标题
 *  left、right、top、bottom标题位置
 *  borderColor：边框颜色
 *  borderWidth：边框宽度

<div id="main" style="width: 1000px;height: 600px;"></div>
    	<script> var myCharts = echarts.init(document.getElementById('main')); //指定图标的配置项和数据 var option = { // 标题 title:{ show: true, text: 'Echarts 入门示例', subtext: '学习Echarts，20190511，好好学习', left: 'right',//数字就是像素值，也可以是center left right这种值 borderColor: 'red', borderWidth: 5, textStyle: { color: 'blue', fontSize: 30 } }, // 工具箱 toolbox:{ show: true, feature: { saveAsImage: { show: true } } }, // 图例 legend: { data: ['销量'] }, // x轴 xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: { }, // 数据 series: [{ name: '销量', type: 'bar', data: [5,20,37,10,10,40] },{ name: '销量', type: 'line',//折线图 data: [7,30,40,30,30,42] }] }; // 使用刚设置的数据项和数据显示图标 myCharts.setOption(option); </script>

--------------------

## 工具栏组件 ##

*  show：是否显示
 *  feature：具体显示的功能
 *  saveAsImage：保存图片
 *  restore：还原
 *  dataView：数据视图
 *  dataZoom：缩放视图
 *  magicType：动态类型切换

\*\*\*\*\*代码写好了，但是在谷歌访问却乱码了。上面的代码是我之后换了js文件。  
就说说我是怎解决的吧  
[具体解决办法参考本人博客][Link 1]

--------------------

## tooltip组件 ##

*  show：是否显示
 *  trigger：出发方式，axis就是x轴出发  
    为了避免代码太多，我就只放tooltip的设置部分了！

// 提示框组件
    			tooltip: { 
    				trigger: 'axis'
    //axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
    			},

--------------------

## markPoint ##

symbol：默认是pin

series: [{ 
    				name: '销量',
    				type: 'line',
    				data: [5,20,37,10,10,20],
    				markPoint: { 
    					data: [
    						{ type: 'max',name: '最大值'},
    						{ type: 'min',name: '最小值',symbol: 'triangle'}
    					]
    				},
    				markLine: { 
    					data: [
    						{ type: 'average',name: '平均值'}
    					]
    				}
    			}]

## 饼图 ##

[pie][]

> 饼图展示数据的特点
> 
>     - 展示百分比
>       - type是pie
> 
> center圆心坐标  
> radius半径  
> name：图例名字  
> selectMode是否支持多选

<div id="main" style="width: 1000px;height: 600px;"></div>
    	<script> var myCharts = echarts.init(document.getElementById('main')); //指定图标的配置项和数据 var option = { // 标题 title:{ text: 'Echarts 入门示例', subtext:'纯属虚构', x:'center' }, // 工具箱 toolbox:{ show: true, feature: { dataView:{ show:true }, restore:{ show:true }, dataZoom:{ show:true }, saveAsImage: { show: true }, // magicType:{ // type: ['line','bar'] // } } }, // 提示框组件 tooltip: { trigger: 'item', //axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 formatter:"{a}<br/>{b} : {c} ({d}%)"// }, // 图例 legend: { orient: 'vertical', left:'left', data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] }, // // x轴 // xAxis: { // // data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] // }, // yAxis: {}, // 数据 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:'搜索引擎'} ] }] }; // 使用刚设置的数据项和数据显示图标 myCharts.setOption(option); </script>

--------------------

## 仪表盘 ##

[gauge][]  
仪表图展示数据的特点  
type是gauge  
动态修改仪表盘数据

<div id="main" style="width: 1000px;height: 600px;"></div>
    	<script> var myCharts = echarts.init(document.getElementById('main')); //指定图标的配置项和数据 var option = { // 工具箱 toolbox:{ show: true, feature: { saveAsImage: { show: true }, } }, // 提示框组件 tooltip: { trigger: 'item', //axis：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 formatter:"{a}<br/>{b} : {c}%"// }, // 数据 series: [{ name: '业务指标', type: 'gauge', detail:{ formatter:'{value}%'}, data:[ { value:32,name:'完成率'}, ] }] }; // 使用刚设置的数据项和数据显示图标 myCharts.setOption(option); </script>

--------------------

地图  
散点图  
k线图  
雷达图

[echarts]: https://www.echartsjs.com/index.html
[echarts.min.js]: https://echarts.baidu.com/dist/echarts.min.js
[echarts.js]: https://echarts.baidu.com/dist/echarts.js
[Link 1]: https://shangrila-xiu.github.io/2019/05/12/echarts%E9%97%AE%E9%A2%98%E8%AF%A6%E8%A7%A3/#more
[pie]: https://www.echartsjs.com/option.html#series-pie.type
[gauge]: https://www.echartsjs.com/option.html#series-gauge