Echarts在线免费图表

 
            option = {
   backgroundColor: '#0E1327',
          grid: {
            containLabel: true,
            bottom: '10%',
            top: '20%',
            left: '5%',
            right: '5%',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          // legend: {
          //   top: 10,
          //   right: 10,
          //   data: ['负荷情况'],
          //   itemWidth: 18,
          //   itemHeight: 18,
          //   itemGap: 30,
          //   textStyle: {
          //     fontSize: 18,
          //     color: '#C9D2FA',
          //     padding: [0, 0, 0, 10)],
          //   },
          // },
          xAxis: {
            // name: "班级",
            triggerEvent: true,
            data: [
              '一部一车间',
              '一部二车间',
              '二部一车间',
              '二部三车间',
              '新能源',
              '四部一车间',
            ],
            axisLabel: {
              interval: 0,
              show: true,
              fontSize: 18,
              color: '#C9D2FA',
            },
            axisLine: {
              show: false,
              lineStyle: {
                show: false,
                color: '#F3F3F3',
                width: 2,
              },
            },

            axisTick: {
              show: false,
            },
          },
          yAxis: [
            {
              // name: '单位:万',
              // type: 'value',
              // nameTextStyle: {
              //   color: '#444444',
              // },
              splitNumber: 2,
              axisLabel: {
                show: true,
                fontSize: 18,
                color: '#C9D2FA',
                // formatter: function (value) {
                //   // 在标签后面添加百分号
                //   return value + '%';
                // },
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: '#3E4A82',
                },
              },
            },
            {
              splitNumber: 2,
              position: 'right', // 放在右边
              axisLabel: {
                show: true,
                fontSize: 18,
                color: '#C9D2FA',
                formatter: function (value) {
                  // 在标签后面添加百分号
                  return value + '%';
                },
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: '#3E4A82',
                },
              },
            },
          ],
          series: [
            {
              name: '负荷情况',
              type: 'bar',
              silent: true,
              itemStyle: {
                color: '#2F8FFF',
              },
              barWidth: 30,
              data: [200, 108, 200, 40, 210, 130],
              // label: {
              //   show: true, // 显示标签
              //   position: 'top', // 标签显示在柱状图的上方
              //   fontSize: 14,
              //   color: '#fff',
              //   formatter: function (params) {
              //     // 在标签文本后添加百分号
              //     return params.value + '%';
              //   },
              // },
            },
            {
              name: '折线图名称',
              type: 'line',
              yAxisIndex: 1, // 与第二个 y 轴关联
              itemStyle: {
                color: 'yellow', // 设置折线颜色为黄色
              },
              data: [100, 80, 120, 60, 90, 70], // 折线图的数据
            },
          ],
        }