数据可视化echarts高级.pdfVIP

1.ECharts高级

1.1.显示相关

1.1.1.

默认

ECharts中默认内置了两套:lightdark

在初始化对象方法init中可以指明

varchartecharts.init(dom,light)

varchartecharts.init(dom,dark)

自定义

1.在编辑器中编辑

编辑器的地址为:

在该地址中,你可以定义一个的很多方面的内容:

2.,是一个js文件

编辑完,可以点击按钮,的js文件

3.引入js文件

scriptsrcjs/echarts.min.js/script

scriptsrcjs/itcast.js/script

其中,itcast.js就是下来的文件

4.在init方法中使用

varmChartsecharts.init(document.querySelector(div),itcast)

init方法中的第二个参数itcast就是的名称,这个名称叫什么我们可以在itcast.js的代码中

看出

1.1.2.调色盘

它是一组颜形、系列会自动从其中选择颜色,不断的循环从头取到尾,再从头取到尾,如此往复.

调色盘

echarts.registerTheme(itcast,{

color:[

#893448,

#d95850,

#eb8146,

#ffb248,

#f2d643,

#ebdba4

],

backgroundColor:rgba(242,234,191,0.15),

})

全局调色盘

全局调色盘是在option下增加一个color的数组

varoption{

//全局调色盘

color:[red,green,blue],

}

mCharts.setOption(option)

局部调色盘

局部调色盘就是在series下增加一个color的数组

varoption{

//全局调色盘

color:[red,green,blue],

series:[

{

type:pie,

data:pieData,

//局部调色盘

color:[pink,yellow,black]

}

]

}

mCharts.setOption(option)

需要注意一点的是,如果全局的调色盘和局部的调色盘都设置了,局部调色盘会产生效果,这里面遵

循的是就近原则

渐变颜色的实现

在ECharts中,