内置主题
ECharts中默认内置了两套主题:light dark
在初始化对象方法init中可以指明
var chart = echarts.init(dom,'light')
var chart = echarts.init(dom,'dark')
自定义主题
1.在主题编辑器中编辑主题并下载主题js文件
2.将主题文件放到项目文件夹下
3.引入主题js文件
4.在init方法中使用主题
var myChart = echarts.init(document.getElementById('main'), 'customed')
调色盘
调色盘的作用遵循就近原则
主题调色盘
全局调色盘
option:{
color:['red','green','blue']
}
局部调色盘
series: [{
type: 'bar',
color: ['red','green','blue']
}]
颜色渐变
线性渐变
itemStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'red' //0%的颜色
}, {
offset: 1, color: 'blue' //100%处的颜色
}]
}
}
效果图
径向渐变
color: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.5,
colorStops: [{
offset: 0, color: 'red' //0%的颜色
}, {
offset: 1, color: 'blue' //100%处的颜色
}]
}
效果图
样式
优先级高 会覆盖主题中、调色盘的效果
直接样式
itemStyle、textStyle、lineStyle、areaStyle、label
高亮样式
在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle、label
图表自适应
当浏览器大小发生改变的时候,如果想让图表也能随之适配变化
1.监听窗口大小变化事件
2.在事件处理函数中调用ECharts实例对象resize即可
window.onresize = function() {
myChart.resize();
}