meface/EChartsMarker.md at 1690647e0ae26e63a1f38f513892c550f55e75c1

13 KiB

Raw Blame History

title

date

author

1. ECharts 中的Canvas和SVG

Apache EChartsTM 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 ECharts v4.0 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 renderer 参数为 'canvas' 或 'svg' 即可指定渲染器，比较方便。

SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 ZRender 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。

适用场景：

Canvas 渲染器适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉特效。
SVG渲染器由于它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊，适合低数据量绘制图形的场景。

ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。

ECharts 的预构建文件中，常用版和完整版已经包含了 SVG 渲染器，可直接使用。而精简版没有包括。
如果在线自定义构建 ECharts，则需要勾上页面下方的 “SVG 渲染”。
如果 [线下自定义构建 ECharts](https://echarts.apache.org/zh/tutorial.html#自定义构建 ECharts) ，则须引入 SVG 渲染器模块，即：

import 'zrender/lib/svg/svg';

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

2. 快速起步

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入在线CDN的 echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

这是官网快速入门的示例，有点改动是通过jsDelivr 的 CDN 引入eCharts的，创建ECharts图表的步骤：

引入ECharts
准备一个指定大小（宽高）的DOM元素，作为echarts创建图表的渲染容器
将准备好的DOM作为参数，初始化echarts实例；
指定JSON对象option指定图表的配置项（组件）和数据；
调用echarts实例的setOption方法配置图表。

从上述的option配置项和渲染的图形中可以看到常见的图形组件：标题、工具栏、图例、提示框、坐标轴（X轴、Y轴）。

组件在配置对象option中还可以配置组件的一些关于图表类型、布局、大小、对其方式等属性。其中的Y轴跟数据源series相关联。

3. 系列series

在 echarts 里，系列（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 series 包含的要素至少有：

一组数值（data）
图表类型（type）
关于这些数据如何映射成图的参数。

一个网页里面可以创建多个echarts实例，每个echarts实例也可以创建多个图表（同个容器中）和坐标系，所以代表数据和映射图形的series组件，常常是以数组的形式进行配置：

echarts 里系列类型（series.type）就是图表类型。系列类型（series.type）至少有：

line（折线图）
bar（柱状图）
pie（饼图）
scatter（散点图）
graph（关系图）
tree（树图）
map（地图）
heatmap（热力图）

...

在配置图表数据时，可以在series中使用data属性直接配置，也可以使用option的 dataset中的数据，通过encode配置项指定source中数组的索引来配置：

4. 组件

axis中的类型有categories、value。

categories：类目轴，需要在axis中同时指定类目的数据data，且与series数组中的元素对象的name属性相同。

value：数值轴，常常是Y轴，数据会从series数组中的data获取

scale：配置轴是否从0开始

5. 标记线和标记点

在绘制折线图的时候，常常有标记某个点、某个值或者是某段区域的这种需求。

echarts在series.line中提供了markPoint、markLine、markArea配置项来标记点、线、区间。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入在线CDN echarts.js -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts line mark',
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {
                        show: true
                    },
                    restore: {
                        show: true
                    },
                    dataZoom: {
                        show: true
                    },
                    saveAsImage: {
                        show: true
                    },
                    magicType: {
                        type: ['line', 'bar']
                    }
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'line',
                data: [5, 20, 36, 10, 10, 20],
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值', symbol: 'arrow' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                },
                markArea: {
                    data: [
                        [
                            {
                                yAxis: 25
                            },
                            {
                                yAxis: 35
                            }
                        ]
                    ]
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

6. 坐标系

很多图表需要运行在坐标系上，如line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等。坐标系用于图表布局和显示数据的刻度等，echarts中常见的坐标系有直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系等。其他一些系列，例如 pie（饼图）、tree（树图）等等，并不依赖坐标系，能独立存在。

直角坐标系图表的简单配置：

图表类型：bar、line、scatter
xAxis、yAxis：取值类型（category、value）

grid（直角坐标系底板）：

区域缩放 dataZoom：类型有inside和slider

示例：

 // 指定图表的配置项和数据
var option = {
    title: {
        text: '直角坐标系常用配置'
    },
    tooltip: {},
    legend: {},
    xAxis: [
        { type: 'category', gridIndex: 0, data: ["1月","2月","3月","4月","5月","6月"] },
        { type: 'category', gridIndex: 1, data: ["橘子","苹果","香蕉","雪梨","西瓜","葡萄"] }
    ],
    yAxis: [
        { gridIndex: 0 },
        { gridIndex: 1 }
    ],
    //grid以数组的形式指定多个坐标系（图表）和布局
    grid: [
        { bottom: '60%' },
        { top: '60%' }
    ],
    series: [{
        name: '水果月销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    },{
        name: '年度销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20],
        //通过xAxisIndex、yAxisIndex指定坐标系
        xAxisIndex: 1, 
        yAxisIndex: 1 ,

    }],
    dataZoom: [{
        xAxisIndex:0,
        top:"45%"
    },{
        yAxisIndex:0
    },{
        yAxisIndex: 1 
    },{
        xAxisIndex: 1 
    }]
};

参考文章

[1] 浏览器绘图的基本原理 https://blog.csdn.net/ccav4137/article/details/83776717

[2] canvas 与svg的区别 https://www.it610.com/article/1305867372153835520.htm

[3] 使用 Canvas 或者 SVG 渲染 https://echarts.apache.org/zh/tutorial.html#%E4%BD%BF%E7%94%A8%20Canvas%20%E6%88%96%E8%80%85%20SVG%20%E6%B8%B2%E6%9F%93

[4] ECharts 基础概念概览 https://echarts.apache.org/zh/tutorial.html#ECharts%20%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5%E6%A6%82%E8%A7%88

13 KiB Raw Blame History Unescape Escape