echarts 折线图设置大全（更新中..）

 option1: {
        title: {
          // text: "销售额趋势",
          //  textStyle: {
          //       color: "#a8aab0",
          //       fontStyle: "normal",
          //       fontFamily: "微软雅黑",
          //       fontSize: 15,
          //     },
        },
        tooltip: {       //标签设置
          trigger: "item",
          axisPointer: {
            type: "line",
            label: {
              backgroundColor: "#6a7985",
            },
          },
          formatter: (params) => {
            let tooltipShowOne = "";
            tooltipShowOne +=
              "<div>" +
              "<div style='color:#FEEBE1;fontSize:14px;width:68px;font-weight:400;margin-bottom:10px'>这是年月日</div>" +
              "<div style='display:flex;flex-wrap:nowrap;align-items:center'>" +
              "<div style='display:flex;flex-wrap:nowrap;align-items:center'>" +
              "<div style='background:#EA5504;width:10px;height:3px;margin-right:10px;'></div>" +
              "<div style='color:#A49C98;fontSize:14px;margin-right:44px;'>下单总额</div>" +
              "</div>" +
              "<div style='color:#FEEBE1;font-size: 16px;font-weight: 500;'>444</div>" +
              "<div style='color:#595755;fontSize:12px;margin-left:6px;'>(元)</div>" +
              "</div>" +
              "<div style='display:flex;flex-wrap:nowrap;align-items:center'>" +
              "<div style='display:flex;flex-wrap:nowrap;align-items:center'>" +
              "<div style='background:#F7BFA7;width:10px;height:3px;margin-right:10px;'></div>" +
              "<div style='color:#A49C98;fontSize:14px;margin-right:58px;'>毛利率</div>" +
              "</div>" +
              "<div style='color:#FEEBE1;font-size: 16px;font-weight: 500;'>params.data</div>" +
              "<div style='color:#595755;fontSize:12px;margin-left:6px;'>(%)</div>" +
              "</div>" +
              "</div>";
            return tooltipShowOne;
          },
          confine: true, // 是否将 tooltip 框限制在图表的区域内
          backgroundColor: "rgba(26,25,29,0.3)", //设置背景颜色

          textStyle: {
            color: "#A49C98", //设置文字颜色
            fontSize: "14",
          },
          padding: [12, 20], //文字与提示框的边距
          extraCssText: "border:1px solid #3D3C3A;", //边框的设置
        },
        legend: {
          left: 40,
          top: 7,
          itemWidth: 12,
          // icon: "roundRect",
          itemHeight: 2, // 粗细
          data: ["下单总额", "毛利率"],
          textStyle: {
            fontSize: 12, //字体大小
            color: "#a8aab0", //字体颜色
            fontWeight: "bold",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            splitLine: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#3D3C3A",
                width: 1,
              },
            },
            axisLabel: {
              textStyle: {
                //改变xy轴上文字的颜色 字号
                color: "#A49C98",
                fontSize: "12px",
                fontfamily: "MicrosoftYaHei",
              },
            },
            //坐标轴刻度相关设置。
            axisTick: {
              show: false,
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            //坐标轴最大值、最小值、强制设置数据的步长间隔
            max: 50,
            min: 0,
            splitNumber: 10,
            interval: 10,
            name: "(元)",
            nameTextStyle: {
              //轴标题，在xAxis或yAxis根下
              color: "#595755",
              fontSize: 12,
              padding: [32, 60, 4, 18], //文字的位置
            },
            //轴线
            axisLine: {
              show: true,
              show: true,
              lineStyle: {
                color: "#3D3C3A",
                width: 1,
              },
            },
            axisLabel: {
              textStyle: {
                //改变xy轴上文字的颜色 字号
                color: "#A49C98",
                fontSize: "12px",
                fontfamily: "MicrosoftYaHei",
              },
              formatter: "{value}w",
            },
            //坐标轴刻度相关设置。
            axisTick: {
              show: false,
            },
            //分割线
            splitLine: {
              show: false,
            },
          },
          {
            type: "value",
            min: -100,
            max: 100,
            splitNumber: 10,
            interval: 25,
            name: "(%)",
            nameTextStyle: {
              //轴标题，在xAxis或yAxis根下
              color: "#595755",
              fontSize: 12,
              padding: [32, 21, 5, 62], //文字的位置
            },
            //轴线
            axisLine: {
              show: true,
              lineStyle: {
                color: "#3D3C3A",
                width: 1,
              },
            },
            axisLabel: {
              textStyle: {
                //改变xy轴上文字的颜色 字号
                color: "#A49C98",
                fontSize: "12px",
                fontfamily: "MicrosoftYaHei",
              },
              formatter: "{value}",
            },
            //坐标轴刻度相关设置。
            axisTick: {
              show: false,
            },
            //分割线
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "下单总额",
            type: "line",
            // stack: "Total",
            yAxisIndex: 0,
            data: [20, 30, 30, 30, 30, 15, 20, 10, 15, 30, 30, 20],
            symbol: "rect",
            symbolSize: 7,
            itemStyle: {
              color: "#EA5504",
              lineStyle: {
                color: "#EA5504",
                width: 2,
              },
            },
          },
          {
            name: "毛利率",
            type: "line",
            // stack: "Total",
            yAxisIndex: 1,
            data: [10, 30, -20, 50, 60, -15, 30, 60, 70, -18, 50, 40],
            symbol: "rect",
            symbolSize: 7,
            itemStyle: {
              color: "#F7BFA7",
              lineStyle: {
                color: "#F7BFA7 ",
                width: 2,
              },
            },
          },
        ],
      },

tooltip:{
                    confine:true, 
                    show:true,
                    trigger:"axis",
                    axisPointer:{
                        lineStyle:{
                            width:1,
                            type:'solid',
                            z:10,
                            color:{
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(142, 166, 201, 0.1)'
                                }, {
                                    offset: 0.5, color: '#8ea6c9'
                                }, {
                                    offset: 1, color: 'rgba(142, 166, 201, 0.1)'
                                }],
                                global: false 
                            }
                        }
                    },
                    position: function (point, params, dom, rect, size) {
                        return [point[0], '20%'];
                    },
                    borderWidth: 1,
                    borderColor: '#276bf0',
                    backgroundColor:'rgba(0,39,92,0.7)',
                    formatter: function (params, callback) {
                      
                        var c  =  `<div style="color:#8ea6c9;margin-bottom:10px;font-size:14px;">${_this.year}-${params[0].name}</div>`;
                        for (var i = 0; i < params.length; i++) {
                        if (params[i].value == undefined) {
                            params[i].value = '-'
                        }
                        c += `<div style="color:#A1B3C9;display: flex;justify-content: space-between;font-size:16px;margin-bottom:10px;">
                                                    <span> ${params[i].seriesName}</span>
                                                    <span style="color:#fff;font-size:16px;margin-left:10px">${params[i].value}万千瓦时</span>
                                                </div>`;
                        }
                        return c;
                    },
                },

 一些图例样式~~