echart3.0从echarts.js改为echarts.min.js,饼图的图例有文字没有颜色

echart3.0从echarts.js改为echarts.min.js,饼图的图例有文字没有颜色,第1张

require.config({

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. 在页面中的具体使用:

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


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11340449.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-15
下一篇2023-05-15

发表评论

登录后才能评论

评论列表(0条)

    保存