Echarts在线免费图表

 
            //import * as echarts from 'echarts'
var charts = {
  unit: '单位：MW',
  names: ['总负荷', '总发电', '负荷预测', '停电负荷'],
  lineX: [
    ' 00:00',
    ' 00:15',
    ' 00:30',
    ' 00:45',
    ' 01:00',
    ' 01:15',
    ' 01:30',
    ' 01:45',
    ' 02:00',
    ' 03:15',
    ' 03:30',
  ],
  value: [
    [51, 52, 55, 60, 66, 60, 55, 50, 48, 47, 50],
    [45, 49, 44, 48, 50, 46, 41, 48, 55, 52, 55],
    [33, 32, 35, 34, 34, 33, 36, 31, 36, 33, 33],
    [24, 22, 17, 24, 22, 19, 27, 20, 25, 22, 23],
  ],
}
var color = [
  'rgba(41, 197, 224',
  'rgba(28, 122, 194',
  'rgba(214, 151, 91',
  'rgba(0, 246, 3',
]
var lineY = []

for (var i = 0; i < charts.names.length; i++) {
  var x = i
  if (x > color.length - 1) {
    x = color.length - 1
  }
  var data = {
    name: charts.names[i],
    type: 'line',
    //  stack: '总量',
    color: color[x] + ')',
    smooth: true,
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: color[x] + ', 0.3)',
            },
            {
              offset: 0.8,
              color: color[x] + ', 0)',
            },
          ],
          false
        ),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10,
      },
    },
    symbol: 'circle',
    symbolSize: 5,
    data: charts.value[x],
    // 添加 lineStyle 属性
    lineStyle: {
      width: 1, // 设置线的粗细
    },
  }
  lineY.push(data)
}

var option = {
  backgroundColor: 'rgb(183, 183, 183,0)',
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: charts.names,
    textStyle: {
      fontSize: 10,
      fontWeight: '200',
      color: 'rgb(183, 183, 183,0.6)',
    },
    //right: 'center',
    type: 'scroll',
    // 设置为 single
    align: 'left',
    itemWidth: 15,
    itemHeight: 10,
  },
  grid: {
    top: '18%',
    left: '4%',
    right: '4%',
    bottom: '12%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: charts.lineX,
    splitLine: {
      lineStyle: {
        color: 'rgb(183, 183, 183)',
      },
    },
    axisLabel: {
      textStyle: {
        color: 'rgba(183, 183, 183,0.8)',
      },
      formatter: function (params) {
        return params.split(' ')[0] + '\n' + params.split(' ')[1]
      },
    },
  },
  yAxis: {
    name: charts.unit,
    type: 'value',
    axisLabel: {
      formatter: '{value}',
      textStyle: {
        color: 'rgb(183, 183, 183,0.6)',
      },
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(183, 183, 183,0.3)',
        type: 'dashed',
      },
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(183, 183, 183,0.3)',
      },
    },
  },
  series: lineY,
}