欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-07-14 15:45:51
...

目录

0x00 Echart 绘图流程

0x01 颜色主题

0x02 使用 Canvas 或者 SVG 渲染

0x03 ECharts 基本概念

0x04 组件

0x05 组件的定位：

0x06 坐标系

0x00 Echart 绘图流程

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

入门案例：

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

代码：

<!--
 * @Author: your name
 * @Date: 2020-07-03 12:33:40
 * @LastEditTime: 2020-07-03 12:44:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /css/test-echarts.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>
    <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）。

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

demo：

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

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

<!--
 * @Author: your name
 * @Date: 2020-07-03 12:33:40
 * @LastEditTime: 2020-07-03 13:57:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /css/test-echarts.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,'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

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

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

以下用dataset进行改写：

<!--
 * @Author: your name
 * @Date: 2020-07-03 12:33:40
 * @LastEditTime: 2020-07-03 14:24:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /css/test-echarts.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,'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 中声明了各个组件（包括系列），各个组件就出现在图中。

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

dome：

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

        const chartDom = document.getElementById('chart');
        const chart = echarts.init(chartDom,'light',{renderer:'svg'});
        var option = {
            dataset:{
                source:[
                    ['一季度',100,79,'分类1',50],
                    ['二季度',112,81,'分类2',60],
                    ['三季度',96,88,'分类3',55],
                    ['四季度',123,72,'分类4',70],
                ]
            },
            //定位
           grid:{
               top:100,
               left:'10%',
               right:'10%',
               bottom:100,
           },
           title:{
                text:'ECharts多系列案例',//正标题
                subtext:'数据可视化案例副标题',//副标题
           },
           //图例
           legend:{
             left:300,//控制图例的位置
            
             data:[{
                 name:'分类',
                 icon:'circle',
                 textStyle:{
                     color:'#fff'
                 }
             },'折线图','柱状图'],//和系列的name属性相绑定
           },
           toolbox:{
               feature:{
                   //区域缩放
                   dataZoom:{
                       yAxis:false,
                   },
                   //区域还原
                   restore:{},
                   //保存为图片
                   saveAsImage:{}
               }
           },
           dataZoom:[
               {
                   show:true,
                   start:0,//起始位置的百分比
                   end:100,//结束位置的百分比
               }
           ],
           //x轴
           xAxis:{
               data:['一季度','二季度','三季度','四季度']
           },
           //y轴
           yAxis:{},
           //数据和图标类型
           series:[
           {
            name:'分类',
            type:'pie',
            center:['65%',60], //距离左侧百分之65，距离上侧60px
            radius:35,
            encode:{itemName:3,value:4}
           },
           {
               name:'折线图',
               type:'line',
               encode:{x:0,y:1}
           },
           {
               name:'柱状图',
               type:'bar',//bar表示柱状图
               encode:{x:0,y:2}
           }
           ]
        };
        chart.setOption(option);

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 达到的效果。

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

0x06 坐标系

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

#散点图

<!--
 * @Author: your name
 * @Date: 2020-07-03 12:33:40
 * @LastEditTime: 2020-07-03 15:17:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /css/test-echarts.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,'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：

 

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

Demo：

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

代码：

<!--
 * @Author: your name
 * @Date: 2020-07-03 12:33:40
 * @LastEditTime: 2020-07-03 16:08:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /css/test-echarts.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,'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>

#多坐标系

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

<!--
 * @Author: your name
 * @Date: 2020-07-03 12:33:40
 * @LastEditTime: 2020-07-03 16:33:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /css/test-echarts.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>

 

相关标签： 数据可视化

上一篇： 光谱预处理——R语言prospectr包

下一篇： Android Camera fw学习(四)-recording流程分析

推荐阅读