主题
默认主题
ECharts 中默认内置了两套主题: light dark
在初始化对象方法 init 中可以指明
var chart = echarts.init(box, 'light') var chart = echarts.init(box, 'dark')
light效果
var box=echarts.init(document.getElementById("box") ,'light');
dark效果
var box=echarts.init(document.getElementById("box") ,'dark');
自定义主题
在主题编辑器中编辑主题
主题编辑器的地址为: https://echarts.apache.org/zh/theme-builder.html
1>在该地址中, 定义一个主题的很多方面的内容:
2>下载主题, 是一个 js 文件
设置好想要的主题样式之后点击下载，下载js格式
3>引入主题 js 文件
<script src="./lib/customed.js"></script>
4>在 init 方法中使用主题
var box=echarts.init(document.getElementById("box") ,'customed');
init方法中的第二个参数customed就是主题的名称，这个名称叫什么我们可以在itcast.js的代码中看出
调色盘
它是一组颜色，图形、系列会自动从其中选择颜色，不断的循环从头取到尾，再从头取到尾，如此往复
主题调色盘
在刚刚自定义下载的主题中，设置我们想要的颜色
引入主题文件后我们可以看到
没引入之前 引入之后
全局的调色盘
全局调色盘是在 option 下增加一个 color 的数组
如果配置了全局调色盘，那么它将覆盖主题调色盘
var option = {
color:['red','blue','green'],
series: [
{
type: 'pie',
data: pieData
}
]
}
此时就会显示我们全局定义的颜色，
局部调色盘
局部调色盘就是在 series 下增加一个 color 的数组
var option = {
color:['red','blue','green'],
series: [
{
type: 'pie',
data: pieData,
color:['pink','skyblue','orange'],
}
]
}
此时局部调色就会覆盖全局调色
注意：局部>全局>主题，采取就近原则
渐变颜色
在 ECharts 中, 支持线性渐变和径向渐变两种颜色渐变的方式
线性渐变
线性渐变的类型为 linear , 他需要配置线性的方向, 通过 x, y, x2, y2 即可进行配置，x , y , x2 , y2 , 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 global 为 true ，则该四个值是绝对的像素位置，90在下述代码中的 0 0 0 1 意味着从上往下进行渐变
series: [
{
type: 'bar',
data: yDataArr,
itemStyle: {
color: {
type: 'linear', //渐变类型，，linear线性
x: 0, //决定线性渐变的方向
y: 0,//决定线性渐变的方向
x2: 0,//决定线性渐变的方向
y2: 1,//决定线性渐变的方向
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
globalCoord: true
}
}
}
]
径向渐变
线性渐变的类型为 radial , 他需要配置径向的方向, 通过 x , y , r 即可进行配置，前三个参数分别是圆心 x , y 和半径，取值同线性渐变
series: [
{
type:'bar',
data:yDataArr,
itemStyle: {
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'red' // 0% 处的颜色
}, {
offset: 1, color: 'blue' // 100% 处的颜色
}],
globalCoord: false
}
}
}
]
样式
直接样式
- itemStyle：控制某一区域的样式
- textStyle：图表的标题样式
- lineStyle：控制线的样式
- areaStyle：控制区域的样式
- label：饼图当中文字的样式
以淘宝这个部分为例
data: [{
value: 100,
name: "淘宝",
itemStyle: { // 控制淘宝这一区域的样式
color: 'blue'
},
label: {
color: 'red'
},
]
高亮样式
在 emphasis 中包裹原先的 itemStyle等等
data: [{
value: 100,
name: "淘宝",
itemStyle: { // 控制淘宝这一区域的样式
color: 'blue'
},
label: {
color: 'red'
},
emphasis: {
itemStyle: { //鼠标经过变色
color: 'orange'
},
label: {//鼠标经过变色
color: 'blue'
}
}
},
]
自适应
当浏览器的大小发生变化的时候，如果想让图表也能随之适配变化
<script>
var box = echarts.init(document.getElementById("box"))
var xDataArr = ['张三', '李四', '王五', '赵六']
var yDataArr = [70, 90, 60, 80]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: yDataArr,
markPoint: {
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
},
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
},
label: {
show: true,
rotate: 60
},
barWidth: '30%'
}
]
}
box.setOption(option)
</script>
此时浏览器窗口变化的同时也想让图表进行适配变化
1>监听窗口大小变化事件
2>在事件处理函数中调用 ECharts 实例对象的 resize 即可
window.onresize=function(){
// console.log(window.onresize)
//调用echarts实例对象resize方法
box.resize()
}
此时图表就随之窗口的变化而变化
这样写也是一样的
window.onresize=box.resize
这里是函数的引用赋值，当浏览器的窗口发生变化，将会调用resize函数，注意resize后面不可以加“()”