Echarts在线免费图表

 
            var fontColor = '#30eee9';
let bgColor = "#040811";
let color = [
   "#018FF5",
   "#E89202",
   "#f4e23e"
];

let echartData = [
   {
      name: "1月",
      value1: 1366,
      value2: 0,
      value3: 0,
   },
   {
      name: "2月",
      value1: 3694,
      value2: 0,
      value3: 0,
   },
   {
      name: "3月",
      value1: 19727,
      value2: 1000,
      value3: 0,
   },
   {
      name: "4月",
      value1: 17046,
      value2: 1000,
      value3: 500
   },
   {
      name: "5月",
      value1: 14780,
      value2: 13396,
      value3: 6365
   },
   {
      name: "6月",
      value1: 19359,
      value2: 13220,
      value3: 5940,
   },
   {
      name: "7月",
      value1: 14229,
      value2: 10836,
      value3: 8234,
   },
   {
      name: "8月",
      value1: 13176,
      value2: 12478,
      value3: 10755,
   },
   {
      name: "9月",
      value1: 16515,
      value2: 12911,
      value3: 10806,
   },
   {
      name: "10月",
      value1: 13658,
      value2: 9479,
      value3: 8613,
   },
   {
      name: "11月",
      value1: 16364,
      value2: 10839,
      value3: 8826,
   },
   {
      name: "12月",
      value1: 19973,
      value2: 10016,
      value3: 9291,
   }
];

let legendItem = ['实际', '理论'];

let xAxisData = ["00:00", "00:02","00:04","00:06","00:08","00:10","00:12","00:14","00:16","00:18","00:20","00:22","00:24", ];
//  ["1", "2", "3", "4", "5", "6", "7", "8"]
let yAxisData1 =  ["1500", "1300", "1300", "1400", "1200", "1350", "1150", "1000", "1200", "1350", "1150", "1000", "1200", "1350", "1150", "1000", "1350" ];
// [100, 138, 350, 173, 180, 150, 180, 230]
let yAxisData2 =  ["1550", "1320", "1210", "1310", "1240", "1250", "1050", "1200", "1200", "1200", "1350", "1150", "1200", "1350", "1150", "1350", "1150"];
//[133,133,100,80,99,133,110,80]
const hexToRgba = (hex, opacity) => {
   let rgbaColor = "";
   let reg = /^#[\da-f]{6}$/i;
   if (reg.test(hex)) {
      rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
         "0x" + hex.slice(3, 5)
      )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
   }
   return rgbaColor;
}
option = {
   backgroundColor: bgColor,
   color: color,
   legend: {
      center: true,
      top: 10,
      data: legendItem,
    　　itemWidth: 15, // 设置宽度
　　itemHeight: 15, // 设置高度
　　itemGap: 20, // 设置间距
       icon: 'rect',

      textStyle: {
         color: '#B8B9BC',
      },
   },
   // calculable: true,
   tooltip: {
      trigger: "axis",
      formatter: function (params) {
         let html = '';
         params.forEach(v => {
            console.log(v)
            html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
                ${v.seriesName}.${v.name}
                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
                人`;
         })



         return html
      },
      extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',

   },
   grid: {
      top: 100,
      left:15,
      containLabel: true
   },
   xAxis: [{
      type: 'category',
      axisTick: {
         show: false
      },
      axisLine: {
         show: true,
         lineStyle: {
            type: "solid",
            color: "rgba(184, 185, 188, 1)"
         }
      },
      axisLabel: {
         inside: false,
         textStyle: {
            color: 'rgba(184, 185, 188, 1)', // x轴颜色
            fontWeight: 'normal',
            fontSize: '14',
            lineHeight: 22
         }
      },

      data: xAxisData
   }],
   yAxis: [{
      type: "value",
      name: '单位：千瓦',
      axisLabel: {
         textStyle: {
            color: "rgba(255, 255, 255,0.7)"
         }
      },
      nameTextStyle: {
         color: "rgba(255, 255, 255,0.7)",
         fontSize: 12,
         lineHeight: 40,
         padding: [0, 0, 0, -20],
      },
      splitLine: {
         show: true,
         lineStyle: {
            type: "dashed",
            color: "rgba(217, 217, 217, 0.7)"
         }
      },
      axisLine: {
         show: false,

      },
      axisTick: {
         show: false
      }
   }],
   series: [{
      name: legendItem[0],
      type: "line",
      smooth: false, //是否平滑
      // showSymbol: false,/
      symbolSize: 0,
      zlevel: 3,
      lineStyle: {
       
         normal: {
            width:4,
            color: color[0],
            shadowBlur: 3,
            shadowColor: hexToRgba(color[0], 0.5),
            shadowOffsetY: 0
         }
      },
      areaStyle: {
         normal: {
            color: new echarts.graphic.LinearGradient(
               0,
               0,
               0,
               1,
               [{
                  offset: 0,
                  color: hexToRgba(color[0], 0.3)
               },
               {
                  offset: 1,
                  color: hexToRgba(color[0], 0.1)
               }
               ],
               false
            ),
            shadowColor: hexToRgba(color[0], 0.1),
            shadowBlur: 10
         }
      },
      data: yAxisData1
   }, {
      name: legendItem[1],
      type: "line",
      smooth: false,
      // showSymbol: false,
      symbolSize: 0,
      zlevel: 3,
      lineStyle: {
         normal: {
               width:4,
            color: color[1],
            shadowBlur: 0,
            shadowColor: hexToRgba(color[1], 0.5),
            shadowOffsetY: 0
         }
      },
      areaStyle: {
         normal: {
            color: new echarts.graphic.LinearGradient(
               0,
               0,
               0,
               1,
               [{
                  offset: 0,
                  color: hexToRgba(color[1], 0.3)
               },
               {
                  offset: 1,
                  color: hexToRgba(color[1], 0.1)
               }
               ],
               false
            ),
            shadowColor: hexToRgba(color[1], 0.1),
            shadowBlur: 10
         }
      },
      data: yAxisData2
   },
 
   ]
};