Echarts在线免费图表

 
            option = {
       backgroundColor:'#022038',
   tooltip: {},
   legend: {
      show: true,
      textStyle: {
         color: "#",
         fontSize: 11,
      },
   },
   grid: {
      left: "3%",
      right: "3%",
      bottom: "5%",
      top: "11%",
      containLabel: true,
   },
   xAxis: {
      type: "category",
      data: [
         "1日",
         "2日",
         "3日",
         "4日",
         "5日",
         "6日",
         "7日",
         "8日",
         "9日",
         "10日",
         "11日",
         "12日",
      ],
      axisLabel: {
         formatter: "{value}",
         color: "white", // 文本颜色
      },
   },
   yAxis: [
      {
         //   去网格线
         splitLine: {
            show: false,
         },
         type: "value",
         name: "kW.h",
         // 标题名称颜色
         nameTextStyle: {
            color: "white",
            fontSize: 12,
            fontWeight: 800,
         },
         axisLine: {
            // show: false ,// 去除轴线
            lineStyle: {
               lineStyle: {
                  color: "white",
               },
            },
         },
         axisLabel: {
            formatter: "{value}",
            color: "white", // 文本颜色
         },
      },
      {
         type: "value",
         name: "线损率（%）",
         splitLine: { show: false },
         axisLine: {
            //   show: false // 去除轴线
            lineStyle: {
               color: "white",
            },
         },
         axisLabel: {
            formatter: "{value}",
            color: "white", // 文本颜色
         }, // 标题名称颜色
         nameTextStyle: {
            color: "white",
            fontSize: 12,
            fontWeight: 800,
         },
      },
   ],
   series: [
      {
         name: "用电量",
         type: "bar",
         stack: "account",
         barMaxWidth: 18,
         itemStyle: {
            color: {
               x: 0,
               y: 0,
               x2: 0,
               y2: 1,
               type: "linear",
               global: false,
               colorStops: [
                  {
                     offset: 0,
                     color: "#017ebb",
                  },
                  {
                     offset: 1,
                     color: "#06fbfe",
                  },
               ],
            },
         },
         data:  [320, 302, 120, 100, 540, 123, 345, 667, 333, 122, 211, 99],
      },
      {
         name: "损耗电量",
         type: "bar",
         stack: "account",
         barMaxWidth: 18,
         itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
               { offset: 0, color: "#ffae88" },
               { offset: 1, color: "#ff7388" },
            ]),
         },
         data: [120, 102, 90, 150, 120, 123, 145, 167, 133, 172, 111, 199],
      },
      {
         z: 3,
         type: "pictorialBar",
         symbolPosition: "end",
         data:  [320, 302, 120, 100, 540, 123, 345, 667, 333, 122, 211, 99],
         symbol: "diamond",
         symbolOffset: [0, "-50%"],
         symbolSize: [10, 2],
         symbolRotate: 0,
         itemStyle: {
            normal: {
               borderWidth: 0,
               color: "#10e6ff",
            },
         },
      },
      {
         z: 3,
         type: "pictorialBar",
         symbolPosition: "end",
         data: [440, 404, 210, 250, 660, 246, 490, 834, 466, 294, 322, 298],
         label: {
            normal: {
               show: true,
               position: "top",
               fontSize: 10,
               fontWeight: "bold",
               color: "#5BFCF4",
            },
         },
         symbol: "diamond",
         symbolOffset: [0, "-50%"],
         symbolSize: [10, 2],
         itemStyle: {
            normal: {
               borderWidth: 0,
               color: "#ffcf90",
            },
         },
      },
      {
         name: "损耗率",
         type: "line",
         symbol: "circle",
         smooth: true,
         yAxisIndex: 1,
         data: [0.5, 0.8, 0.8, 0.5, 0.5, 0.7, 0.8, 1, 0.65, 0.85, 0.56, 0.8],
         itemStyle: {
            normal: {
               color: "tomato",
            },
         },
      },
   ],
}