
paths:{
echarts:'./js/echarts',
'echarts/chart/bar' : './js/echarts',
'echarts/chart/pie': './js/echarts'
}
})才出现的问题
而是下边的配置确实正常,不过加载JS过多
require.config({
packages: [
{
name: 'echarts',
location: '../../src',
main: 'echarts'
},
{
name: 'zrender',
location: '../../../zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
}
]
})
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.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. 在页面中的具体使用:
按照上边的步骤配置过之后,我们就可以在页面中引用了。
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)