浅析ECharts使用Canvas或SVG渲染区别及如何选用、使用记录：图表背景透明、x轴y轴刻度线及文本、折线点效果、如何设置折线下面区域渐变色、坐标轴线刻度隐藏及文字设置、配置hover时突出显示图例隐藏其他图例

一、使用 Canvas 或者 SVG 渲染

　　浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。

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

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

1、选择哪种渲染器

　　一般来说，Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉特效。

　　但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。

　　选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。

（1）在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。

（2）在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：

　　在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如水球图等，SVG 渲染器可能效果更好。

　　数据量很大、较多交互时，可以选用 Canvas 渲染器。

2、选择策略：

（1）移动平台优选 SVG

　　在移动端（尤其是低端安卓机）上，由于内存和 CPU 资源的限制，Canvas 的表现可能非常差，而相比之下 SVG 就会有很大优势

（2）图表个数很多时优选 SVG

　　当图表个数很多时，占用的内存很大程度上造成了页面是否卡顿的体验差异。在这一情况下，SVG 表现出非常明显的优势。

　　“图表个数很多”相对电脑端一般需要十来个图表以上，相对手机端则个位数也会体现出差异。占对于图表个数达到 100 个这样比较极端的情况，Canvas 的内存占用量相比 SVG 可以达到十倍以上。当你感觉到滚动屏幕页面卡顿时，可能是因为内存占用较多引起的，这时候可以考虑使用 SVG 渲染。

（3）导出小文件或高清晰时使用 SVG

　　SVG 渲染导出的 SVG 文件更小，却可以保持矢量无限清晰放大。我们接到用户反馈经常有在 PDF 中插入图表的需求，这时如果插入 SVG，不仅可以使图片更清晰，也可以使 PDF 的尺寸更小。对于设计师而言，也可以使用导出的 SVG 进行二次编辑。

（4）部分特殊渲染效果只有 Canvas 支持

　　除了某些特殊的渲染可能依赖 Canvas：如炫光尾迹特效、带有混合效果的热力图等，绝大部分功能 SVG 都是支持的。

（5）数据量特别大时推荐使用 Canvas 渲染

　　如果数据量比较大（>1000）、和大量图形高频率交互时，推荐使用 Canvas 渲染。搭配使用 ECharts 4.0 推出的渐进式渲染，可以有更好的性能表现。

3、如何使用渲染器

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

（1）ECharts 的预构建文件中，常用版和完整版已经包含了 SVG 渲染器，可直接使用。而精简版没有包括。

（2）如果在线自定义构建 ECharts，则需要勾上页面下方的 “SVG 渲染”。

（3）如果线下自定义构建 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'});

二、使用记录

1、Echarts 深色模式 & 图表背景透明

（1）深色模式：创建chart实例的时候指定dark

var myChart = echarts.init(document.getElementById('main'), 'dark');

（2）图表背景设置透明：options 的 backgroundColor 设置空

var options = {
    backgroundColor:'', //设置无背景色
}

2、修改echarts的x轴y轴的刻度和刻度线文本颜色和xy轴的轴线颜色和标题title的字体颜色

（1）修改刻度文本颜色：axisLabel

（2）修改xy轴的轴线颜色+刻度线颜色（是同一个参数）：axisLine 参数 lineStyle

3、隐藏折线点效果：showSymbol: false,

4、折线下面区域如何设置渐变：areaStyle 设置

    series: [
      {
        name: '正面',
        type: 'line',
        showSymbol: false,
        smooth: true,
        areaStyle: {
          opacity: 0.6,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(73, 242, 214, 0.5)'
            },
            {
              offset: 1,
              color: 'rgb(73, 242, 214, 0.1)'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: trend.yDatas[0]
      },

5、坐标轴分割线及如何配置颜色：axisLabel 配置和 splitLine 配置

    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: 'rgba(189, 244, 255, 0.6)',
          fontSize: '22px'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 110, 206, 0.3)'
          }
        }
      }
    ],

    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          color: '#BDF4FF',
          fontSize: '22px',
          margin: 20,
          align: 'right'  // 右对齐
        },
        axisLine: { // 隐藏轴线
          show: false
        },
        axisTick: { // 隐藏刻度
          show: false
        },
        data: trend.xDatas
      }
    ],