Echarts在线免费图表

 
            // 默认数据
let xDate = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月',]
let pieData = [
   {
      name: '总有功功率',
      data: generateRandomArray(12, 0, 100),
   },
   {
      name: 'A相有功功率',
      data: generateRandomArray(12, 0, 100),
   },
   {
      name: 'B相有功功率',
      data: generateRandomArray(12, 0, 100),
   },
   {
      name: 'C相有功功率',
      data: generateRandomArray(12, 0, 100),
   },
]
let unit = '单位:kW'
// 默认配色
let colorList = ['#3D84F7', '#737373', '#00FAC1', '#00CAFF', '#FDE056', '#3aa272']
let series = [];
pieData.map((item, index) => {
   series.push({
      name: item.name,
      type: 'line',
      // smooth:true,
      stack: '总量',
      symbolSize: 0,
      itemStyle: {
         normal: {
            color: colorList[index],
            lineStyle: {
               color: colorList[index],
               width: 2
            },
         }
      },
      data: item.data
   })
})
let dataZoom = []
if (xDate.length > 7) {
   dataZoom = [{
      show: true,
      height: 12,
      xAxisIndex: [
         0
      ],
      bottom: '3%',
      start: 10,
      end: 90,
      handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
      handleSize: '110%',
      handleStyle: {
         color: '#d3dee5'
      },
      textStyle: {
         color: '#313131'
      },
      borderColor: '#90979c'
   }, {
      type: 'inside',
      show: true,
      height: 15,
      start: 1,
      end: 35
   }]
}
const option = {
   //你的代码
   color: colorList,
   backgroundColor: '#fff',
   grid: {
      left: '5%',
      right: '5%',
      top: '10%',
      bottom: '15%',
      // containLabel: true
   },
   tooltip: {
      show: true,
      trigger: 'axis',
   },
   legend: {
      show: true,
      icon: 'stack',
      itemWidth: 15,
      itemHeight: 4,
      textStyle: {
         color: '#646464'
      },
   },
   xAxis: [
      {
         type: 'category',
         boundaryGap: 1,
         axisLine: {
            show: false
         },
         axisLabel: {
            color: '#252525'
         },
         splitLine: {
            show: false
         },
         axisTick: {
            show: false
         },
         data: xDate
      }],
   yAxis: [
      {
         type: 'value',
         name: unit,
         nameTextStyle: {
            align: "center",
            padding: [10, -10, 0, -50],
            color: '#151515',
         },
         splitLine: {
            show: true,
            lineStyle: {
               color: '#A1A7B3',
               type: 'dashed'
            }
         },
         axisLine: {
            show: false
         },
         axisLabel: {
            show: true,
            margin: 10,
            textStyle: {
               color: '#3b3b3c'
            }
         },
         axisTick: {
            show: false
         }
      }],
   dataZoom,
   series: series
}

function generateRandomArray(size, min, max, decimalPlaces = 0) {
   let arr = [];
   if (min > max) {
      [min, max] = [max, min];
   }
   for (let i = 0; i < size; i++) {
      // 生成一个介于min和max之间的随机数
      let randomNum = min + Math.random() * (max - min);
      // 将随机数格式化为指定的小数位数
      arr.push(randomNum.toFixed(decimalPlaces));

   }
   return arr;
}