echarts大部分图形常用配置项总结，标题,提示框,系列,x轴,y轴,下载设置

这里用一个折线图的数据展开说明

var chartDom = document.getElementById("target");
      var myChart = this.$echarts.init(chartDom);
      var option;
      option = {
        //标题组件
        title: {
          text: "",//标题
        },
        //提示框组件
        tooltip: {
          trigger: "axis",//item数据项图形触发,axis坐标轴触发
        },
        //图例组件，控制哪些系列不显示
        legend: {
          type:'scroll',//scroll数量较多时可以使用滚动翻页的图例，默认'plain'普通图例
          top:'7%',//距头部多远
          data: [//头部数据
            "基础设施"
          ],
        },
        //直角坐标系内绘图网格
        grid: {
          top:'20%',  //grid组件距上下左右的距离
          left: "0%",
          right: "4%",
          bottom: "3%",
          containLabel: true,//grid区域是否包含坐标轴的刻度标签。
        },
       //工具栏
        toolbox: {
          feature: {//各工具配置项
            saveAsImage: {},//保存为图片
          },
        },
       //直角坐标系 grid 中的 x 轴
        xAxis: {
          type: "category",//坐标轴类型，category类目轴，适用于离散的类目数据
          boundaryGap: false,//坐标轴两边留白策略,默认为 true
          data: this.data1.arr, //数据
          //坐标轴刻度标签的相关设置
          axisLabel: {
            interval: 0, //横轴信息全部显示
            rotate: -45, //倾斜度 -90 至 90 默认为0
            margin: 5, //刻度标签与轴线之间的距离
            textStyle: {
              fontSize: 9, //横轴字体大小
              color: "#000000", //颜色
            },
          },   
        },
        yAxis: {
          type: "value",//'value' 数值轴，适用于连续数据。
        },
        series: [
          {
            name: "基础设施",//对应的系列
            type: "line",
            stack: "总量",
            data: this.data1.arr2,
          }
        ],
      };

      option && myChart.setOption(option);
    },
  },

效果图