基于Echart實現(xiàn)折線圖的繪制詳解

更新時間：2022年03月17日 14:29:23 作者：Ciao_Traveler

EChart開源來自百度商業(yè)前端數(shù)據(jù)可視化團隊，基于html5?Canvas，是一個純Javascript圖表庫，提供直觀，生動，可交互，可個性化定制的數(shù)據(jù)可視化圖表。本文將利用EChart實現(xiàn)折線圖的繪制，感興趣的可以學習一下

效果圖

不顯示折線圖上的拐點方法，3個都可以使用，代碼中有顯示在什么位置使用。

symbolSize:0,

symbol:“none”,

showSymbol:false,

代碼：

var mess = ["00:00", "03：00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00", "24:00"];
    var mess3 = preData;
    var mess4 = curData;
    var option = {
      legend: {
        show: true,
        itemWidth: 20,
        itemHeight: 10,
        itemGap: 10,
        textStyle: {
          fontSize: 10,
          color: "#ccc",
        },
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          lineStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(0, 255, 233,0)",
                },
                {
                  offset: 0.5,
                  color: "rgba(255, 255, 255,1)",
                },
                {
                  offset: 1,
                  color: "rgba(0, 255, 233,0)",
                },
              ],
              global: false,
            },
          },
        },
      },
      grid: {
        top: "25%",
        left: "10%",
        right: "5%",
        bottom: "25%",
      },
      xAxis: {
        data: mess,
        axisTick: {
          show: false,//是否顯示坐標軸刻度。
        },
        boundaryGap: false,//x軸留白，默認是true，這時候刻度只是作為分隔線，標簽和數(shù)據(jù)點都會在兩個刻度之間的帶(band)中間
        axisLine: {
          show: true,
          lineStyle: {
            color: "#414965",
          },
        },
        axisLabel: {
          interval: 1,
          textStyle: {
            color: "#7089ba",
            fontSize: 12,
          },
          margin: 10, //刻度標簽與軸線之間的距離。
        },
      },
      yAxis: {
        name:unit,
        nameTextStyle: {
          color: "#fff",
        },
        splitLine: { //是否顯示分隔線
          show: true,
          lineStyle: {
            color: "#414965",
            opacity: 0.3,
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          textStyle: {
            color: "#7089ba",
            fontSize: 12,
          },
        },
        splitNumber: 3//坐標軸的分割段數(shù)
      },
      series: [
        {
          name: "今日",
          type: "line",
          smooth: true, //是否平滑
          showAllSymbol: false,//不顯示折線圖的拐點
          symbol: "circle",
          symbolSize: 2,
          lineStyle: {
            normal: {
              color: "#44b6fe",
            },
          },
          itemStyle: {
            color: "#44b6fe",
          },
          tooltip: {
            show: true,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                [
                  {
                    offset: 0,
                    color: "rgba(53,194,246,0.7)",
                  },
                  {
                    offset: 1,
                    color: "rgba(53,194,246,0.1)",
                  },
                ],
                false
              ),
              shadowBlur: 20,
            },
          },
          data: mess4,
          markPoint: {
            symbolSize: 30,
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
        },
        {
          name: "昨日",
          type: "line",
          smooth: true, //是否平滑
          showAllSymbol: false,
          symbol: "circle",
          symbolSize: 2,
          lineStyle: {
            normal: {
              color: "#ad16ff",
            },
          },
          itemStyle: {
            color: "#ad16ff",
          },
          tooltip: {
            show: true,
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                [
                  {
                    offset: 0,
                    color: "rgba(179,64,242,0.7)",
                  },
                  {
                    offset: 1,
                    color: "rgba(179,64,242,0.1)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(179,64,242, 0)",
              shadowBlur: 20,
            },
          },
          data: mess3,
          markPoint: {
            symbolSize: 30,
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
        },
      ],
    };

到此這篇關(guān)于基于Echart實現(xiàn)折線圖的繪制詳解的文章就介紹到這了,更多相關(guān)Echart折線圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: