echarts折线图x轴垂直对齐，y轴对齐数值，网格变虚线，x轴折线背景渐变，改变折线图长宽，饼图上下分布和左右分布，条形图上下分布

先放效果图，是需要的再往下看

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',          
        },