先放效果图,是需要的再往下看
getChart() {
let _chart = echarts.init(document.getElementById('Chartid'))
let option = {
legend: {
right: 12,
top: 10,
data: [
{
name: '名字',
icon: 'circle',
}
],
},
grid:{
// 修改图的长和宽
width: '84%',
height: '60%'
},
xAxis: {
name: '月',
nameGap: 8,
nameTextStyle: {
verticalAlign: 'top',
lineHeight: 28, // 调整x轴名字的位置,和x轴值对齐
},
boundaryGap: false,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
type: 'category',
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
},
yAxis: {
name: '万吨',
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed', // 网格线虚线
},
},
nameTextStyle: {
padding: [0, 40, 0, 0], // y轴名字对齐刻度值
},
},
series: [
{
name: 'name',
type: 'line',
symbolSize: 0,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
// 渐变
0, 0, 0, 1, [
{ offset: 0, color: 'rgba(84, 112, 198, 0.8)' },
{ offset: 0.4, color: 'rgba(84, 112, 198, 0.2)' },
{ offset: 1, color: 'rgba(84, 112, 198, 0.01)' },
]
),
},
},
data: [120, 132, 201, 134, 90, 230, 210, 120,800, 101, 134, 90, 230],
},
],
}
option && _chart.setOption(option)
},
多组数据的时候,在数组series中增加其他对象。
在legend.data中增加其他图例对象
关于坐标轴和legend相互位置设置:
- 1.左右分布
设置legend横坐标位置靠右吗,设置偏移大小
效果图
legend: {
align: 'left',
icon: 'circle',
orient: 'vertical',
x: 'right'
}
series: {
type: 'pie',
size: '84%',
center: ['28%', '50%'
}
- 上下分布:
1.饼图
设置series偏移的大小
legend: {
bottom: 18
}
series: {
type: 'pie',
center: ['50%', '40%']
}
2.条形图。
定位网格高度和距离边距的距离,定位legend距离底边的距离
// type: 'bar',
grid: {
height: '80%',
left: '30%',
top: '10%'
},
legend:{
bottom: '1%',
icon: 'rect',
},