Echarts 显示相关(主题/调色盘(渐变色)/样式(直接/高亮)/自适应)

主题

内置主题

Echarts默认内置的2套主题 light dark

echarts.init(dom, 'light') 

自定义主题

https://www.echartsjs.comtheme-builder
或者

在主题编辑器中编辑主题
下载主题 js文件
引入页面
在init中使用

echarts.init(dom, 'xxx') 

调色盘

是一组颜色，图形、系列会自动从其中选择颜色。
遵循就近原则

主题调色盘

主题js文件

全局调色盘

配置在option里面

let option = {
	color:[ // 全局调色盘 会覆盖 主题调色盘
		'red',
		'green',
		// ...
	]
}

局部调色盘

let option = {
	series:[{
		color:[ // 局部调色盘 
			'red',
			'green',
			// ...
		],
	}]
}

渐变色

线性渐变

itemStyle:{
    color:{
        // 渐变方向
        type:'linear',
        x:0,
        y:0,
        x2:0,
        y2:1,
        
        // 渐变颜色
        colorStops:[
            {offset:0 ,color:'red'}, // 0%的颜色值
            {offset:1 ,color:'blue'}, // 100%的颜色值
        ],
        globalCoord:false
    }
}

径向渐变 由一点向4周散发

temStyle:{
   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 文本标记样式

高亮样式 当鼠标滑过

使用 emphasis包裹直接样式

emphasis:{
	itemStyle:{
		// ...
	}
}

自适应

监听窗口大小改变事件

window.onresize = function(){
	// 调用echarts实例对象的resize方法即可
}