3.样式
直接样式
itemStyle
textStyle
lineStyle
areaStyle
label
代码语言：javascript复制data: [{
value: 11231,
name: "淘宝",
itemStyle: {
color: 'black'
}
}]
title: {
text: '我是标题',
textStyle: {
color: 'red'
}
}
label: {
color: 'green'
}
这些样式一般都可以设置颜色或者背景或者字体等样式, 他们会覆盖主题中的样式
高亮样式
图表中, 其实有很多元素都是有两种状态的, 一种是默认状态, 另外一种就是鼠标滑过或者点击形成的高亮状态. 而高亮样式是针对于元素的高亮状态设定的样式
那它的使用也非常简单,在 emphasis 中包裹原先的 itemStyle 等等, 我们来试一下
代码语言：javascript复制series: [{
type: 'pie',
label: {
color: 'green'
},
emphasis: {
label: {
color: 'red'
},
},
data: [{
value: 11231,
name: "淘宝",
itemStyle: {
color: 'black'
},
emphasis: {
itemStyle: {
color: 'blue'
},
}
}, ]
}]4.自适应
步骤1: 监听窗口大小变化事件
步骤2: 在事件处理函数中调用 ECharts 实例对象的 resize 即可
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style=" height:400px;border:1px solid red"></div>
<script>
var mCharts = echarts.init(document.querySelector("div")) var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞',
'大 强'
]
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
var option = {
xAxis: {
type: 'category',
data: xDataAr
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: yDataAr
}]
};
mCharts.setOption(option) // 监听window大小变化的事件
window.onresize = function () { // 调用echarts示例对象的resize方法
mCharts.resize()
} // window.onresize = mCharts.resize
</script>
</body>
</html>
