在网上搜索了一些图表缩放方法：
1. window.onresize = myChart.resize;
但此方法只适合单页面，也就是说一个页面里有两个图表是只有一个起作用，于是乎，
有了如下方法：
2. window.addEventListener("resize",function(){
myChart.resize(); //myChart指自己定义的echartsDom对象
});
顺便记录一下这次图表的一些常见样式问题：
1. 折线图
xAxis: {
type: 'category',
data: this.xData,
boundaryGap: false,
splitLine: {
show: true
},
axisLabel: {
interval: 3, // x轴的刻度每隔三个一显示
rotate: 60 // x轴的刻度字样倾斜60度
}
},
grid: {
x: 40,
x2: 20,
y2: 100
},
yAxis: {
type: 'value'
},
series: [{
data: this.seriesData,
type: 'line',
symbolSize: 10, // 拐点圆的大小
color: ['#6AD6BA'], // 折线条的颜色
smooth: true, // 平滑显示
symbol: 'circle', // 折点形状
itemStyle: {
normal: {
lineStyle: {
width: 2,
color: ['#E5E5E5']
}
}
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ // 透明度渐变色，从0到1，从上到下
offset: 0,
color: 'RGB(248, 252, 251)'
}, {
offset: 1,
color: 'RGB(248, 252, 251)'
}])
}
}]
2. 环形图
tooltip: {
trigger: 'item',
formatter: '{b}: <br/>{c} ({d}%)' // value显示的样式
},
legend: {
icon: 'rect', // 方形
orient: 'vertical',
x: '55%', // 水平55%
y: 'center', // 垂直居中
itemWidth: 15, // 设置图例图形的宽
itemHeight: 15,
data: this.itemDomain
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['40%', '60%'], // 环形内外圈大小
center: ['28%', '50%'], // 水平垂直中心
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: false,
textStyle: {
fontSize: '15',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: this.itemDetail,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
normal: {
color: function(params) {
// 自定义颜色，觉得echarts自带颜色不好看，哈哈
var colorList = [
'#64A1D3', '#62D4BA', '#ADD461', '#E2B461', '#D0795D', '#646A9C', '#9F66D1', '#E6495C', '#938EB3', '#926F70'
]
return colorList[params.dataIndex]
}
}
}
}
]
还给你们找了个大神记录的echarts图表样式大全，戳他！
