ECharts的高级使用(样式自适应)
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ECharts的高级使用(样式自适应)相关的知识，希望对你有一定的参考价值。
1.样式
1.1 直接样式
itemStyle、textStyle、lineStyle(折线图)、areaStyle(雷达图)、label
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'))
var option = {
title: {
text: '饼图的测试',
textStyle: { //控制标题的文字样式
color: 'blue'
}
},
series: [
{
type: 'pie',
data: [
{
name: '淘宝',
value: 11231,
itemStyle: { //控制淘宝这一区域的样式
color: 'black',
},
label: {
color: 'red',
}
},
{
name: '京东',
value: 22673
},
{
name: '唯品会',
value: 6123
},
{
name: '聚美优品',
value: 6700
}
]
}
]
}
mCharts.setOption(option)
</script>
</body>
</html> 
1.2 高亮样式
在emphasis中包裹itemStyle、textStyle、lineStyle、areaStyle、label
// 其它代码不变
var option = {
title: {
text: '饼图的测试',
textStyle: { //控制标题的文字样式
color: 'blue'
}
},
series: [
{
type: 'pie',
data: [
{
name: '淘宝',
value: 11231,
itemStyle: { //控制淘宝这一区域的样式
color: 'black',
},
label: {
color: 'red',
},
emphasis: { //控制淘宝这一区域的高亮样式
itemStyle:{
color: 'pink',
},
label: {
color: 'green',
}
}
},
{
name: '京东',
value: 22673
},
{
name: '唯品会',
value: 6123
},
{
name: '聚美优品',
value: 6700
}
]
}
]
}选中淘宝那一块，样式发生了改变(原图参考上图)
2.自适应
当浏览器的大小发生改变的时候，图表也能够随之适配变化
1.监听窗口大小变化事件
2.在事件处理函数中调用ECharts实例对象的resize即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/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, 45, 48, 89, 99, 77]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value',
},
series: [{
name: '语文',
type: 'bar',
data: yDataArr
}]
}
mCharts.setOption(option)
// 监听window窗口大小变化的事件
window.onresize = function() {
mCharts.resize();
}
// 这样写也可以
// window.onresize = mcharts.resize
</script>
</body>
</html> 
以上是关于ECharts的高级使用(样式自适应)的主要内容，如果未能解决你的问题，请参考以下文章