echartsDay01 echarts 绘图流程颜色主题切换canvas 和svg echarts基本概念组件组件定位坐标系

技术2023-04-17 119

0x00 Echart 绘图流程

0x01 颜色主题

0x02 使用 Canvas 或者 SVG 渲染

0x03 ECharts 基本概念

0x04 组件

0x05 组件的定位：

0x06 坐标系

0x00 Echart 绘图流程

引入js库编写绘图容器获取绘图容器Dom对象将Dom对象传入，初始化chart对象配置chart对象

入门案例：

代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> <style> .chart{ width:800px; height:400px; } </style> </head> <body>  <div class='chart' id='chart'></div> <script> const chartDom = document.getElementById('chart'); const chart = echarts.init(chartDom); chart.setOption({ title:{ text:'ECharts入门案例', }, //x轴 xAxis:{ data:['食品','数码','服饰','箱包'] }, //y轴 yAxis:{}, //数据和图标类型 series:{ type:'bar',//bar表示柱状图 data:[100,200,90,150] } }); </script> </body> </html>

0x01 颜色主题

Echarts4内置的两种主题

var chart = echarts.init(dom, 'light'); var chart = echarts.init(dom, 'dark');

其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在主题编辑器（https://www.echartsjs.com/theme-builder/）里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：

保存为js文件，然后直接输入主题的名字即可。

const chart = echarts.init(chartDom,'purple-passion');

0x02 使用 Canvas 或者 SVG 渲染

默认为canvas，可以修改为svg

// 使用 Canvas 渲染器（默认） var chart = echarts.init(containerDom, null, {renderer: 'canvas'}); // 等价于： var chart = echarts.init(containerDom); // 使用 SVG 渲染器 var chart = echarts.init(containerDom, null, {renderer: 'svg'});

频繁更新动画：选择canvas

大屏显示：选择svg

0x03 ECharts 基本概念

#系列：一组数值（可以理解为数组）映射成对应的图

一个系列包含的要素至少有：一组数值、图表类型（series.type）、以及其他的关于这些数据如何映射成图的参数。

echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...

如下图，右侧的 option 中声明了三个系列（series）：pie（饼图系列）、line（折线图系列）、bar（柱状图系列），每个系列中有他所需要的数据（series.data）。

demo：

一个坐标系中绘制多个系列：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> <script src='theme.js'></script> <style> .chart{ width:800px; height:400px; } </style> </head> <body>  <div class='chart' id='chart'></div> <script> const chartDom = document.getElementById('chart'); const chart = echarts.init(chartDom,'purple-passion',{renderer:'svg'}); chart.setOption({ title:{ text:'ECharts多系列案例', }, //x轴 xAxis:{ data:['一季度','二季度','三季度','四季度'] }, //y轴 yAxis:{}, //数据和图标类型 series:[ { type:'pie', center:['65%',60], //距离左侧百分之65，距离上侧60px radius:35, data:[ {name:'分类1',value:50}, {name:'分类2',value:60}, {name:'分类3',value:55}, {name:'分类4',value:79} ] }, { type:'line', data:[100,200,96,123], }, { type:'bar',//bar表示柱状图 data:[100,200,90,150] } ] }); </script> </body> </html>

以上这种写法数据源是分散的，且难以实现数据的复用。为了数据的复用和维护的方便，echart4.0引入了dataset

只需要维护一个source数组，用encode来取代原来的data,其中0代表source中的第0列，1代表source中的第1列......

以下用dataset进行改写：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> <script src='theme.js'></script> <style> .chart{ width:800px; height:400px; } </style> </head> <body>  <div class='chart' id='chart'></div> <script> const chartDom = document.getElementById('chart'); const chart = echarts.init(chartDom,'purple-passion',{renderer:'svg'}); chart.setOption({ dataset:{ source:[ ['一季度',100,79,'分类1',50], ['二季度',112,81,'分类2',60], ['三季度',96,88,'分类3',55], ['四季度',123,72,'分类4',70], ] }, title:{ text:'ECharts多系列案例', }, //x轴 xAxis:{ data:['一季度','二季度','三季度','四季度'] }, //y轴 yAxis:{}, //数据和图标类型 series:[ { type:'pie', center:['65%',60], //距离左侧百分之65，距离上侧60px radius:35, encode:{itemName:3,value:4} }, { type:'line', encode:{x:0,y:1} }, { type:'bar',//bar表示柱状图 encode:{x:0,y:2} } ] }); </script> </body> </html>

0x04 组件

在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、...

我们注意到，其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。

如下图，右侧的 option 中声明了各个组件（包括系列），各个组件就出现在图中。

dome：

0x05 组件的定位：

不同的组件、系列，常有不同的定位方式。

[类 CSS 的绝对定位]

多数组件和系列，都能够基于 top / right / down / left / width / height 绝对定位。这种绝对定位的方式，类似于 CSS 的绝对定位（position: absolute）。绝对定位基于的是 echarts 容器 DOM 节点。

其中，他们每个值都可以是：

绝对数值（例如 bottom: 54 表示：距离 echarts 容器底边界 54 像素）。或者基于 echarts 容器高宽的百分比（例如 right: '20%' 表示：距离 echarts 容器右边界的距离是 echarts 容器宽度的 20%）。

如下图的例子，对 grid 组件（也就是直角坐标系的底板）设置 left、right、height、bottom 达到的效果。

0x06 坐标系

#散点图

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> <script src='theme.js'></script> <style> .chart{ width:800px; height:400px; } </style> </head> <body>  <div class='chart' id='chart'></div> <script> const chartDom = document.getElementById('chart'); const chart = echarts.init(chartDom,'light',{renderer:'svg'}); var option = { xAxis:{}, yAxis:{}, dataset:{ source:[ [13,44], [18,63], [29,48], [14,63], ] }, series:[{ type:'scatter',//散点图 encode:{x:0,y:1} } ] }; chart.setOption(option); </script> </body> </html>

#双坐标系：

两个 yAxis，共享了一个 xAxis。两个 series，也共享了这个 xAxis，但是分别使用不同的 yAxis，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis：

Demo：

代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> <script src='theme.js'></script> <style> .chart{ width:800px; height:400px; } </style> </head> <body>  <div class='chart' id='chart'></div> <script> const chartDom = document.getElementById('chart'); const chart = echarts.init(chartDom,'light',{renderer:'canvas'}); var option = { xAxis:{ type:'category' }, yAxis:[{},{ splitLine:{ show:false, } }], dataset:{ source:[ ['product','2012','2013','2014','2015'], ['Matcha Latte',41.1,30.4,65.1,53.3], ['Milk Tea',86.5,92.1,85.7,83.1] ] }, series:[{ type:'bar', seriesLayoutBy:'row',//以行的方式进行取数 yAxisIndex:0 //表示该柱状图对应第一个坐标系 }, { type:'line', seriesLayoutBy:'row', yAxisIndex:1, } ] }; chart.setOption(option); </script> </body> </html>

#多坐标系

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script> <script src='theme.js'></script> <style> .chart{ width:800px; height:400px; } </style> </head> <body>  <div class='chart' id='chart'></div> <script> const chartDom = document.getElementById('chart'); const chart = echarts.init(chartDom,'dark',{renderer:'canvas'}); var option = { grid:[{ bottom:'55%' },{ top:'55%', }], xAxis:[{ type:'category', gridIndex:0, }, { type:'category', gridIndex:1, }], yAxis:[{ min:0, max:100, gridIndex:0 },{ splitLine:{ show:false, }, gridIndex:0, },{ min:0, max:100, gridIndex:1, }], dataset:{ source:[ ['product','2012','2013','2014','2015'], ['Matcha Latte',41.1,30.4,65.1,53.3], ['Milk Tea',86.5,92.1,85.7,83.1] ] }, series:[{ type:'bar', seriesLayoutBy:'row',//以行的方式进行取数 xAxisIndex:0, yAxisIndex:0 //表示该柱状图对应第一个坐标系 }, { type:'line', seriesLayoutBy:'row', xAxisIndex:0, yAxisIndex:1, }, { type:'bar', seriesLayoutBy:'row', xAxisIndex:1, yAxisIndex:2 } ] }; chart.setOption(option); </script> </body> </html>

#Vue中使用echarts

cnpm install echarts --save <div ref="myChart" style='width:100%;height:270px;'></div>引入组件：import echarts from 'echarts';当DOM渲染完毕后，获取DOM节点：初始化echars 实例 let myChart = echarts.init(this.$refs.myChart);配置参数 <template> <div> <el-row :gutter="20" class='mt-3'>   <el-col :span="12"> <el-card class="box-card" style="height:370px" shadow='hover'> <div slot="header" class="clearfix"> <span>卡片名称</span> <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> </div>  <div ref="myChart" style='width:100%;height:270px;'></div> </el-card> </el-col> </el-row> </div> </template> <script> import echarts from 'echarts'; export default { //dom渲染完毕时才能获取dom元素 mounted() { this.drawLine(); }, methods: { //画统计图 drawLine() { //初始化echars 实例 let myChart = echarts.init(this.$refs.myChart); //配置参数 myChart.setOption({ title: {}, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] }, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', boundaryGap: false, data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }], yAxis: [{ type: 'value' }], series: [{ name: '邮件营销', type: 'line', stack: '总量', areaStyle: {}, data: [120, 132, 101, 134, 90, 230, 210] }, { name: '联盟广告', type: 'line', stack: '总量', areaStyle: {}, data: [220, 182, 191, 234, 290, 330, 310] }, { name: '视频广告', type: 'line', stack: '总量', areaStyle: {}, data: [150, 232, 201, 154, 190, 330, 410] }, { name: '直接访问', type: 'line', stack: '总量', areaStyle: {}, data: [320, 332, 301, 334, 390, 330, 320] }, { name: '搜索引擎', type: 'line', stack: '总量', label: { normal: { show: true, position: 'top' } }, areaStyle: {}, data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }) } } } </script> <style> </style>

Processed: 0.018, SQL: 9

echartsDay01 echarts 绘图流程 颜色主题 切换canvas 和svg echarts基本概念 组件 组件定位 坐标系

0x00 Echart 绘图流程

0x01 颜色主题

0x02 使用 Canvas 或者 SVG 渲染

0x03 ECharts 基本概念

0x04 组件

0x05 组件的定位：

0x06 坐标系

#Vue中使用echarts

echartsDay01 echarts 绘图流程颜色主题切换canvas 和svg echarts基本概念组件组件定位坐标系