曲线

224 阅读1分钟
 series: [
            {
              name: "温度",
              type: "line",
              yAxisIndex: 1,
              smooth: true, //曲线
              step: 'start', //阶梯折线
              tooltip: {
                valueFormatter: function (value) {
                  return value + " °C";
                },
              },
              data: [8, 19, 7, 19, 12, 7, 18, 16, 6, 12, 16, 10, 6, 20, 6, 13],
            },
         ],

        series: [
            {
              name: "Precipitation(2015)",
              type: "line",
              xAxisIndex: 1,
              smooth: true,
              itemStyle: {
                normal: {
                  lineStyle: {
                    width: 9, //线条粗细
                  },
                },
              },
              emphasis: {
                focus: "series",
              },
              data: [
                3000, 2800, 2700, 2800, 2500, 2400, 2200, 2000, 3000, 4000,
                5000, 6200, 5700, 5800, 5000, 5300, 4200, 3000, 1000,
              ],
            },
          ],

aa2d6a3ccdaf1f88c557f85d41859035e0756ef0296c75ddce2cd90f0f49d09dQzpcVXNlcnNcTFxBcHBEYXRhXFJvYW1pbmdcRGluZ1RhbGtcNTEzNzA4NzI0X3YyXEltYWdlRmlsZXNcMTY1NTE3MjA0ODcxMl9GQjc5Qzg0NS0yM0QyLTQwNjYtQjZDOS03RTNFNzk2NzY1OEMucG5n.png

    setRealTimeChargeVoltElec() {
      const realTimeChargeVoltElec = this.$refs.realTimeChargeVoltElec;
      if (realTimeChargeVoltElec) {
        const thisRealTimeChargeVoltElec = this.$echarts.init(realTimeChargeVoltElec);
        const option = {
          title: {
            text: 'Beijing AQI',
            left: '1%'
          },
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '5%',
            right: '15%',
            bottom: '20%'
          },
          xAxis: {
            data: [
              '15:05',
              '15:10',
              '15:15',
              '15:20',
              '15:25',
              '15:30',
              '15:35',
              '15:40',
              '15:45',
              '15:50',
              '15:55',
            ]
          },
          yAxis: {},
          toolbox: {
            right: 10,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          dataZoom: [ //dataZoom控制图表下方可缩放是否显示
            {
              startValue: '2014-06-01'
            },
            {
              type: 'inside'
            }
          ],
          visualMap: {
            top: 50,
            right: 10,
            pieces: [
              {
                gt: 0,
                lte: 50,
                color: '#93CE07'
              },
              {
                gt: 50,
                lte: 100,
                color: '#FBDB0F'
              },
              {
                gt: 100,
                lte: 150,
                color: '#FC7D02'
              },
              {
                gt: 150,
                lte: 200,
                color: '#FD0100'
              },
              {
                gt: 200,
                lte: 300,
                color: '#AA069F'
              },
              {
                gt: 300,
                color: '#AC3B2A'
              }
            ],
            outOfRange: {
              color: '#999'
            }
          },
          series: {
            name: 'Beijing AQI',
            type: 'line',
            data: [13, 121, 212, 11, 21, 212, 121, 121, 232, 31, 132, 4654, 58],
            markLine: {
              silent: true,
              lineStyle: {
                color: '#333'
              },
              data: [
                {
                  yAxis: 50
                },
                {
                  yAxis: 100
                },
                {
                  yAxis: 150
                },
                {
                  yAxis: 200
                },
                {
                  yAxis: 300
                }
              ]
            }
          }
        }
        thisRealTimeChargeVoltElec.setOption(option);
        window.addEventListener("resize", function () {
          thisRealTimeChargeVoltElec.resize();
        });
      }
    },