Echarts在线免费图表

 
            
let yValue = [[8, 5, 6, 3, 2], [8, 5, 6, 3, 2],[8, 5, 6, 3, 2]];
// let xValue = ["安全帽", "绝缘杆", "验电杆", "绝缘手套", "绝缘靴"] ;
let names = ['设备数量1', "设备数量2","设备数量3"];
let xValue = ["1月", "2月", "3月", "4月", "5月"];
let colorList = [
 {color:"rgba(61, 140, 255, 0.5)",borderColor:'rgba(61, 140, 255, 1)'},
 {color:"rgba(206, 186, 88, 0.5)",borderColor:'rgba(206, 186, 88, 1)'},
 {color:"rgba(109, 224, 241, 0.5)",borderColor:'rgba(109, 224, 241, 1)'}
 ];
let series = [];
// let offset=[[(-7), -10],[7, -10]];
let xoffset = (names.length-1)*(-7);
names.forEach((item, index) => {
   series.push(
      {
         name: item,
         type: "pictorialBar",
         symbol: "rect",
         symbolSize: [12, 5],
         symbolPosition: "end",
         // symbolOffset: offset[index],
         symbolOffset:[(xoffset)+(index*14), -10],
         z: 2,
         label: {
            show: true,
            position: "top",
            textStyle: {
               color: "#969a9d",
            },
         },
         tooltip: {
            show: false,
         },
         itemStyle: {
            normal: {
               color: colorList[index].borderColor ,
            },
         },
         data: yValue[index],
      }
   )
   series.push(
      {
         name: item,
         type: "bar",
         barWidth: 12,
         z: 1,
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: colorList[index].color ,
                  },
                  {
                     offset: 0.5,
                     color: colorList[index].color ,
                  },
                  {
                     offset: 1,
                     color: "transparent",
                  },
               ]),
               borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: colorList[index].borderColor  ,
                  },
                  {
                     offset: 0.5,
                     color: colorList[index].borderColor  ,
                  },
                  {
                     offset: 1,
                     color: "transparent",
                  },
               ]),
            },
         },
         data: yValue[index],
      }
   )
})
option = {
   backgroundColor: "#000",
   title: {
      textStyle: {
         fontSize: 12,
         fontWeight: "normal",
         color: "#24c1ff", //标题颜色
      },
      top: "0%",
      left: "0%",
   },
   tooltip: {
      trigger: "axis",
   },
   grid: {
      left: "5%",
      right: "5px",
      bottom: "20px",
      containLabel: true,
   },
   legend: {
      show: true,
      icon: "roundRect",
      orient: "horizontal",
      itemWidth: 20,
      itemHeight: 15,
      textStyle: {
         fontSize: 12, //字体大小
         color: "#b9c8d4", //字体颜色
      },
      right: "3%", //距离右侧
      data: names,
   },
   calculable: true,
   animation: true,

   xAxis: [
      {
         type: "category",
         triggerEvent: true,  //记住要加上 设置为true后，可触发事件

         axisLabel: {
            interval: 0, // 解决x轴名称过长问题
            textStyle: {
               color: "#c8d8e3",
            },
            formatter: (value, index) => {
               if (value.length > 6) {
                  return value.substring(0, 4) + '...'
               }
               return value
            },
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: true,
         },
         data: xValue,
      },
   ],
   yAxis: [
      {
         type: "value",
         nameGap: 8,
         nameTextStyle: {
            color: "#d1d1d1",
         },

         axisTick: {
            show: false,
         },
         axisLine: {
            show: true,
            symbol: ["none", "arrow"],
            symbolSize: [5, 10],
            lineStyle: {
               color: "#b2e7ff",
               opacity: 0.3,
            },
         },
         splitLine: {
            //保留网格线
            show: true,
            lineStyle: {
               //y轴网格线设置
               color: "#032e42",
               width: 1,
            },
         },
         axisLabel: {
            show: true,
            textStyle: {
               color: "#d1d1d1", //字体颜色
            },
         },
      },
   ],
   series: series,
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
 
// 图例点击事件监听
myChart.on('legendselectchanged', function (event) {
   let isSelected = []
  Object.keys(event.selected).filter((item,index)=>{
      if(event.selected[item]){
         isSelected.push({
            name:item,
         })
      }
     
  }) 
  if(isSelected.length===1){
     isSelected[0].symbolOffset=[0,-10]
  }else{
     isSelected.forEach((item,index)=>{
        item.symbolOffset = [(isSelected.length-1)*(-7)+(index*14), -10]
     })
  }
   myChart.setOption({
        series: isSelected
    });
});