VUE开发--二维绘图(四十)

JavaScript017

VUE开发--二维绘图(四十),第1张

ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。

https://www.npmjs.com/package/zrenderjs

文档地址： https://ecomfe.github.io/zrender-doc/public/api.html

初始化 ZRender

在使用 ZRender 前需要初始化实例，具体方式是传入一个 DOM 容器：

创建出的这个实例对应文档中 zrender 实例部分的方法和属性。

在场景中添加元素

ZRender 提供了将近 20 种图形类型，可以在文档 zrender.Displayable 下找到。如果想创建其他图形，也可以通过 zrender.Path.extend 进行扩展。

以创建一个圆为例:

创建了一个圆心在 [150, 50] 位置，半径为 40 像素的圆，并将其添加到画布中。

通过 a = new zrender.XXX 方法创建了图形元素之后，可以用 a.shape 等形式获取到创建时输入的属性，但是如果需要对其进行修改，应该使用 a.attr(key, value) 的形式修改，否则不会触发图形的重绘。例子：

引入ECharts

echarts提供多种引入方式，请根据你的项目类型选择合适的方式：

模块化包引入

如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，使用一个符合AMD规范的模块加载器，如esl.js，只需要配置好packages路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。

需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。

//from echarts example

require.config({

packages: [

{

name: 'echarts',

location: '../../src',

main: 'echarts'

},

{

name: 'zrender',

location: '../../../zrender/src', // zrender与echarts在同一级目录

main: 'zrender'

}

]

})

模块化单文件引入（推荐）

如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发。

自2.1.8起，我们为echarts开发了专门的合并压缩工具echarts-optimizer。如你所发现的，build文件夹下已经包含了由echarts-optimizer生成的单文件：

dist（文件夹） : 经过合并、压缩的单文件

line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）

bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）

scatter.js : 散点图

k.js : K线图

pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）

radar.js : 雷达图

map.js : 地图

force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）

chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）

funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）

gauge.js : 仪表盘

eventRiver.js : 事件河流图

treemap.js : 矩阵树图

venn.js : 韦恩图

echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入

chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为echarts的每一个图表类型单独打包生成一个独立文件，根据应用需求可实现图表类型按需加载

source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试

采用单一文件使用例子见ECharts单一文件引入，存放在example/www下，首先你需要通过script标签引入echarts主文件

//from echarts example

<body>

   <div id="main" style="height:400px"></div>

   ...

   <script src="./js/echarts.js"></script>

</body>

在主文件引入后你将获得一个AMD环境，配置require.conifg如下：

//from echarts example

<body>

   <div id="main" style="height:400px"></div>

   ...

   <script src="./js/echarts.js"></script>

   <script type="text/javascript">

       require.config({

           paths: {

               echarts: './js/dist'

           }

       })

   </script>

</body>

require.config配置后就可以通过动态加载使用echarts

//from echarts example

<body>

   <div id="main" style="height:400px"></div>

   ...

   <script src="./js/echarts.js"></script>

   <script type="text/javascript">

       require.config({

           paths: {

               echarts: './js/dist'

           }

       })

       require(

           [

               'echarts',

               'echarts/chart/line',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表

               'echarts/chart/bar'

           ],

           function (ec) {

               var myChart = ec.init(document.getElementById('main'))

               var option = {

                   ...

               }

               myChart.setOption(option)

           }

       )

   </script>

</body>

总结来说，模块化单文件引入ECharts，你需要如下4步：

为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）

通过script标签引入echarts主文件

为模块加载器配置echarts的路径，从当前页面链接到echarts.js所在目录，见上述说明

动态加载echarts及所需图表然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）

详见入门教程 ( Getting started ) »

标签式单文件引入

自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require。Srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。

标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：

echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')

//from echarts example

<body>

   <div id="main" style="height:400px"></div>

   ...

   <script src="example/www2/js/dist/echarts-all.js"></script>

   <script>

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

       var option = {

           ...

       }

       myChart.setOption(option)

   </script>

</body>

echarts.setOption: function (option, notMerge)

简介：

这是真正的图形初始化，其中option就是常见的参数和数据设置对象。notMerge是是否合并，如果是合并的，那option的信息会合并到原来的信息中。其中对于series要注意，如果是新的series，则数组纬度不能与原来的重叠，否则就认为合并了。比如旧的series:[{a},{b}]，新的series:[{1}]，那a和1就会合并属性，取并集。

ECharts报表呈现组件使用心得：

1.    插件的下载

以下是ECharts的下载链接，需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender，当然对于大部分图表而言不需要ZRender的，但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现，建议大家在下载ECharts时同时也要下载ZRender。

ECharts下载地址： http://echarts.baidu.com/

ZRender下载地址：http://ecomfe.github.io/zrender/index.html

2.下载之后解压各自的文件目录结构如下：

ECharts：

   

ZRender:

3. 插件的引用

首先，新建一个Web应用程序，然后添加刚刚下载的文件，具体的目录结构如下：

这里有以下几点需要说明：

所有的跟ECharts有关的文件全部都在echarts文件夹下

echarts文件夹的内容分为两部分：

1) 一部分是以echarts开头的js文件，这些文件全部来自于1.中的ECharts文件目录中的js文件夹下的文件，也就是1.中的图中红框标注的js下的文件。如下：

2)另一部分是一个名为zrender的文件夹，这里需要特别注意的是该文件夹的命名必须为zrender，因为在echarts的js文件中对zrender的引用都是以zrender为根目录的，zrender文件夹的内容即为1.中zrender文件目录中的src文件夹下的内容，如下：

4. 在页面中的具体使用：

按照上边的步骤配置过之后，我们就可以在页面中引用了。