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);