Echarts在线免费图表

 
            function hexToRgb(hex, percent) {
   // 去除 # 号，并转换为整数
   hex = hex.replace('#', '');
   // 提取每个颜色通道的值
   const r = parseInt(hex.substring(0, 2), 16);
   const g = parseInt(hex.substring(2, 4), 16);
   const b = parseInt(hex.substring(4, 6), 16);
   // 返回 RGB 格式的字符串
   return `RGB(${r}, ${g}, ${b},${percent})`;
}
const xData = ['first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh',
   'first1', 'second2', 'third3', 'fourth4', 'fifth5', 'sixth6', 'seventh7']
const yData = [234, 188, 315, 234, 188, 315, 200,
   234, 188, 315, 234, 188, 315, 200,]
const colorList = [
   '#34AEFF',
   '#00DCFF',
   '#FFCC4C',
   '#CAF982'
]
option = {
   tooltip: {
      trigger: 'axis',
      borderWidth: 0,
      backgroundColor: 'rgba(8,36,68,.7)',
      color: '#fff',
      textStyle: {
         color: '#fff'
      },
      //避免出现多个信息
      formatter: function (params) {
         return params[0].name + `</br><span style="display:inline-block;width:10px;height:10px;border-radius:5px;background-color:${params[0].color.colorStops[0].color}"></span> ` + params[0].value; // 只显示第一个系列的信息
      }
   },
   toolbox: {
      show: true
   },
   grid: {
      left: 40,
      right: 20,
      top: 20,
      bottom: 15,
      containLabel: true
   },
   yAxis: [
      {
         data: xData,
         axisLabel: {
            textStyle: {
               fontSize: 12,
               // color: 'white',
               // align: 'left',
               fontFamily: 'MiSans-Normal',
            },
         },
         splitLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false,
         },
      },
   ],
   xAxis: {
      show: true,
      splitLine: {
         show: false,
      },
      axisTick: {
         show: true,
         inside: true,
         lineStyle: {
            color: '#045d79'
            // width: 2
         }
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: '#045d79'
            // width: 2
         },
      },
      axisLabel: {
         // color: 'white' // 将 x 轴文字颜色改为白色
      }
   },
   series: [
      {
         z: 1,
         type: 'bar',
         data: yData,
         barWidth: 20,
         barGap: '80%', // 设置不同系列的间距
         barCategoryGap: '50%', // 设置同一系列的间距
         // showBackground: true,
         // backgroundStyle: {
         //    color: 'rgba(95, 123, 149, 0.2)',
         // },
         itemStyle: {
            barBorderRadius: [10, 0, 0, 10],
            color: function (params) {
               //每个柱子单独颜色渐变 可多加几个渐变过程 colorStops[{},{},{}]
               const colorStops = [{
                  offset: 0,
                  color: colorList[params.dataIndex % colorList.length]
               }, {
                  offset: 1,
                  // color: lightenColor(colors[params.dataIndex], 0.5) // 使用 lightenColor 函数使颜色变浅
                  color: hexToRgb(colorList[params.dataIndex % colorList.length], 0.2) // 使用 lightenColor 函数使颜色变浅
               }];
               return new echarts.graphic.LinearGradient(0, 0, 1, 0, colorStops)
            },
         },
      },
      {
         type: 'pictorialBar',
         data: yData,
         z: 8,
         symbol: 'circle',
         symbolRotate: null,
         symbolSize: [26, 26],
         symbolPosition: 'end',
         symbolOffset: [13, 0],
         itemStyle: {
            color: function (params) {
               const colorStops = [{
                  offset: 0,
                  color: colorList[params.dataIndex % colorList.length]
               }, {
                  offset: 1,
                  // color: lightenColor(colors[params.dataIndex], 0.5) // 使用 lightenColor 函数使颜色变浅
                  color: hexToRgb(colorList[params.dataIndex % colorList.length], 0.2) // 使用 lightenColor 函数使颜色变浅
               }];
               return new echarts.graphic.LinearGradient(1, 0, 0, 0, colorStops)
            },
            borderColor: function (params) {
               const colorStops = [{
                  offset: 0,
                  color: colorList[params.dataIndex % colorList.length]
               }, {
                  offset: 1,
                  // color: lightenColor(colors[params.dataIndex], 0.5) // 使用 lightenColor 函数使颜色变浅
                  color: hexToRgb(colorList[params.dataIndex % colorList.length], 0.2) // 使用 lightenColor 函数使颜色变浅
               }];
               return new echarts.graphic.LinearGradient(1, 0, 0, 0, colorStops)
            },
         },
         // itemStyle: {
         //    color: 'rgba(255,255,255,0.15)',
         //    borderColor: 'rgba(255,255,255,0.3)',
         // },
      },
      {
         type: 'pictorialBar',
         data: yData,
         z: 10,
         symbol: 'circle',
         symbolRotate: null,
         symbolSize: [8, 8],
         symbolPosition: 'end',
         symbolOffset: [4, 0],
         itemStyle: {
            color: 'rgba(255,255,255,1)',
         },
      },
      {
         type: 'pictorialBar',
         data: yData,
         z: 9,
         symbol: 'circle',
         symbolRotate: null,
         symbolSize: [16, 16],
         symbolPosition: 'end',
         symbolOffset: [8, 0],
         itemStyle: {
            color: function (params) {
               return hexToRgb(colorList[params.dataIndex % colorList.length], 0.2)
            },
            borderColor: function (params) {
               return hexToRgb(colorList[params.dataIndex % colorList.length], 0.2)
            },
         },
         // itemStyle: {
         //    color: 'rgba(255,255,255,0.1)',
         //    borderColor: 'rgba(255,255,255,0.3)',
         // },
      },
   ],
   //数据过多纵向滚动
   dataZoom: [
      {
         type: 'inside', // 数据缩放
         show: true,
         yAxisIndex: 0, // 对应的y轴
         start: 0,
         end: yData.length > 10 ? 1000 / yData.length : 100  // 初始显示范围，根据需要调整
      }
   ],
};