2021-11-08

  getEcharts() {
      let chartDom = document.getElementById("item6Chart");
      let myChart = echarts.init(chartDom);
      let fontColor = "#fff";

      let option = {
        // backgroundColor: "#11183c",
        grid: {
          left: "5%",
          right: "10%",
          top: "10%", // 设置间隔
          bottom: "15%",//设置间隔
          containLabel: true,
        },
        tooltip: {
          show: true,
          trigger: "item",
        },

        // 右侧显示
        legend: {
          show: true,
          // x: "left",
          // y: "0",
          right: "0",
          // icon: "stack",
          orient: "vertical",
          // type: "scroll",
          itemWidth: 11,
          itemHeight: 11,

          textStyle: {
            color: "#fff",
            fontSize: "11px",
            // textAlign: "",
            // padding: [10, 0, 0, 0],
          },
          data: ["正常", "异常", "浏览量"],
        },
        // 控制x轴
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              color: fontColor,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#397cbc",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#195384", //y线
              },
            },
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              // "8月",
              // "9月",
              // "10月",
              // "11月",
              // "12月",
            ],
          },
        ],
        // 控制y轴
        yAxis: [
          {
            type: "value",
            // name: "信息量",
            min: 0,
            max: 1000,
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#fff",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#27b4c2",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#11366e",
              },
            },
          },
          // {
          //   type: "value",
          //   name: "浏览量",
          //   min: 0,
          //   max: 1000,
          //   axisLabel: {
          //     formatter: "{value} 人",
          //     textStyle: {
          //       color: "#186afe",
          //     },
          //   },
          //   axisLine: {
          //     lineStyle: {
          //       color: "#186afe",
          //     },
          //   },
          //   axisTick: {
          //     show: false,
          //   },
          //   splitLine: {
          //     show: true,
          //     lineStyle: {
          //       color: "#11366e",
          //     },
          //   },
          // },
        ],
        series: [
          {
            name: "正常",
            type: "line",
            stack: "总量", //控制叠加
            symbol: "circle",
            symbolSize: 8,
            itemStyle: {
              normal: {
                color: "#0092f6",
                lineStyle: {
                  color: "#0092f6",
                  width: 1,
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0.3, [
                    {
                      offset: 0,
                      color: "rgba(7,44,90,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,146,246,0.9)",
                    },
                  ]),
                },
              },
            },
            // markPoint: {
            //   itemStyle: {
            //     normal: {
            //       color: "red",
            //     },
            //   },
            // },
            data: [400, 132, 101, 400, 90, 230, 210, 182, 191, 234, 290, 330],
          },

          {
            name: "异常",
            type: "line",
            stack: "总量",
            symbol: "circle",
            symbolSize: 8,

            itemStyle: {
              normal: {
                color: "#AA36E6",
                lineStyle: {
                  color: "#AA36E6",
                  width: 1,
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0.1, [
                    {
                      offset: 0,
                      color: "#AA36E6",
                    },
                    {
                      offset: 1,
                      color: "#AA36E6",
                    },
                  ]),
                },
              },
            },
            data: [0, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410],
          },

          // {
          //   name: "浏览量",
          //   type: "line",
          //   stack: "总量",
          //   symbol: "circle",
          //   symbolSize: 8,
          //   itemStyle: {
          //     normal: {
          //       color: "#aecb56",
          //       lineStyle: {
          //         color: "#aecb56",
          //         width: 1,
          //       },
          //       areaStyle: {
          //         //color: '#94C9EC'
          //         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          //           {
          //             offset: 0,
          //             color: "rgba(7,44,90,0.3)",
          //           },
          //           {
          //             offset: 1,
          //             color: "rgba(114,144,89,0.9)",
          //           },
          //         ]),
          //       },
          //     },
          //   },
          //   data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190],
          // },
        ],
      };
      option && myChart.setOption(option);
    },