echars常用屬性（折線、餅狀圖、動態錶盤）

1.折線

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    grid: { //圖形邊距佔比
        left: '0%',
        right: '10%',
        top: '10%',
        bottom: '5%'
    },
    xAxis: [{
        data: ['', '', '', '', '', ''],
        splitLine: { //縱軸線
            show: false
        },
        axisLine: { //數軸：橫着的
            show: false
        },
        axisTick: { //數軸：橫着的：刻度線
            show: false,
            lineStyle: {
                color: '#000'
            }
        },
        axisLabel: {
            color: '#ffffff1f' // 刻度線標籤顏色
        }
    }],
    yAxis: [{
        splitLine: { //水平線
            show: false
        },
        axisLine: { //數軸：豎着的
            show: false
        },
        axisTick: { //數軸：豎着的：刻度線
            show: false,
            lineStyle: {
                color: '#000'
            }
        },
        axisLabel: {
            color: '#ffffff1f' // 刻度線標籤顏色：#ffffff1f是透明噠顏色
        }
    }],
    series: [{
        name: '最高水量', //標籤名字：和tooltip一起使用
        type: 'line', //折線類型
        smooth: true, //是否光滑
        symbol: "none", //去掉折線點
        stack: 99, //數據堆疊，同個類目軸上系列配置相同的stack值後，後一個系列的值會在前一個系列的值上相加
        itemStyle: {
            normal: {
                // 顏色漸變函數 前四個參數分別表示四個位置依次爲左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#64CAFA' // 0% 處的顏色
                    },
                    {
                        offset: 0.5,
                        color: '#64CAFA' // 100% 處的顏色
                    },
                    {
                        offset: 1,
                        color: '#0078D7' // 100% 處的顏色
                    }
                ]), // 背景漸變色
                lineStyle: { //折線本身樣式
                    width: 0.5,
                    type: 'solid',
                    color: '#0078D7'
                }
            }
        }, // 線條樣式
        symbolSize: 2, // 折線點的大小
        areaStyle: { //折線內部顏色
        },
        data: [80, 60, 50, 100, 110, 40]
    }]
}

效果：
2.餅狀圖

option = {
    legend: {
        // 左邊的介紹標籤
        orient: 'vertical', // 標籤是豎着的
        x: 'left', // 標籤是靠向左方的
        y: '80', // 標籤離上邊框的間距
        padding: 10,
        itemGap: 20, //標籤的內間距
        textStyle: {
            color: '#000'
        } //標籤的字體顏色
    },
    title: {
        //標題的屬性
        text: '根據壓力分類',
        left: 'center',
        top: 20,
        textStyle: {
            color: '#000',
            fontSize: 16
        }
    },
    tooltip: {
        //鼠標移動到餅狀圖顯示的標籤屬性
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)'
    },
    series: [{
        name: '訪問來源',
        type: 'pie', //餅狀圖
        radius: '60%', //佔整體頁面的百分比
        center: ['50%', '65%'], //在整體頁面的位置
        color: ['#d9efff', '#43cadd', '#3893e5', '#d9e3ff'], // 餅的顏色
        data: [{
                value: 56,
                name: '負壓風機'
            },
            {
                value: 78,
                name: '高壓風機'
            },
            {
                value: 42,
                name: '低壓風機'
            },
            {
                value: 70,
                name: '中壓風機'
            }
        ].sort(function(a, b) {
            return a.value - b.value
        }), //該函數是餅的順序
        roseType: 'radius', //是否按比例顯示餅
        label: {
            //標籤的屬性
            normal: {
                formatter: ['{b|{b}}'].join('\n'),
                rich: {
                    b: {
                        color: '#000',
                        fontSize: 15,
                        height: 40
                    },
                    c: {
                        color: '#000',
                        fontSize: 14,
                        fontWeight: 'bold',
                        lineHeight: 5
                    }
                }
            }
        },
        itemStyle: {
            //餅之間是否又間距
            borderWidth: '20',
            normal: {
                borderWidth: '10',
                borderColor: '#ffffff'
            }
        }
    }]
}

效果：

3.動態錶盤

 chartDashboardChart1() {
  function randomData(minNum, maxNum) {
    switch (arguments.length) {
      case 1:
        return parseInt(Math.random() * minNum + 1, 10);
      case 2:
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
      default:
        return 0;
    }
  }
  this.chartDashboard1 = echarts.init(
    document.getElementById("chartDashboard1")
  );
  this.chartDashboard1.setOption({
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} "
    },
    backgroundColor: "#ffffff1f",
    graphic: [
      {
        type: "group",
        left: "center",
        bottom: 0,
        children: [
          {
            type: "text",
            z: 100,
            left: "center",
            top: "middle",
            style: {
              fill: "#66CDAA",
              color: "#66CDAA",
              text: ["◉正常"].join("\n"),
              font: "14px Microsoft YaHei;bold"
            }
          }
        ]
      }
    ],
    title: {
      text: "溫度(單位：°C)",
      left: "center",
      top: "10%",
      textStyle: {
        color: "#000",
        fontSize: 16
      }
    },
    series: [
      {
        center: ["50%", "70%"],
        startAngle: 180,
        endAngle: 0,
        type: "gauge",
        radius: "80%",
        min: 0,
        max: 100,
        splitNumber: 10,
        data: [
          {
            value: 28,
            name: "溫度"
          }
        ],
        pointer: {
          // 儀表盤指針
          show: true,
          length: "89%",
          width: 8
        },
        itemStyle: {
          color: "red"
        },
        axisLine: {
          // 儀表盤軸線
          lineStyle: {
            width: 5,
            color: [
              [
                1,
                new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                    offset: 0,
                    color: "red"
                  },
                  {
                    offset: 0.66,
                    color: "red"
                  },
                  {
                    offset: 1,
                    color: "red"
                  }
                ])
              ]
            ]
          },
          show: true
        },
        splitLine: {
          // 分割線
          show: false,
          width: 5
        },
        axisTick: {
          // 刻度
          show: false,
          length: 1,
          color: "#444444"
        },
        axisLabel: {
          // 刻度標籤
          show: true,
          distance: -25,
          color: "#444444",
          fontSize: 10
        },
        title: {
          // 標題
        },
        detail: { formatter: "28" }
      }
    ]
  });
  timeInterval1 = setInterval(() => {
    var data = randomData(27.8, 28.5);
    this.chartDashboard1.setOption({
      series: [
        {
          data: [
            {
              value: data,
              name: "溫度"
            }
          ],
          detail: { formatter: data }
        }
      ]
    });
  }, 1000);