Echarts在线免费图表

 
            // 触碰柱子变色和浅色背景
option = {
   backgroundColor: "#051C43",
   title: {
      show: false,
   },
   tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
         type: "line",
         lineStyle: {
            color: "rgba(250, 250, 250, 0.1)",
            type: "solid",
            width: 30,
         },
      },
      textStyle: {
         color: "white", //设置文字颜色
      },
      formatter: function (params) {
         // console.log(params);
         return (
            params[0].marker +
            params[0].name +
            "：" +
            params[0].data.value +
            " " +
            "分钟"
         );
      },
      extraCssText:
         "background: rgba(26,54,138,0.8);border: 1px solid #246CF9;",
   },
   grid: {
      left: "22",
      right: "21",
      bottom: "10",
      top: "0",
      containLabel: true,
   },
   legend: {
      show: false,//取消提示点
   },
   xAxis: {
      type: "value",
      splitLine: {
         show: true, // 去除网格线
         lineStyle: {
            type: "dashed",
            color: "rgba(36,108,249,0.2)",
         },
      },
      axisLine: {
         show: false, //横轴线是否显示
      },
      axisTick: {
         show: false, //横轴刻度是否显示
      },
      axisLabel: {
         color: "rgba(255,255,255,0.70)", //坐标值的颜色
         fontSize: "10px",
      },
   },
   yAxis: {
      type: "category",
      offset: 5,
      splitLine: {
         show: false, // 去除网格线
         lineStyle: {
            color: "rgba(36,108,249,0.3)",
            type: "dashed", //设置间隔线为虚线
         },
      },
      axisTick: {
         show: false, //小横线
      },
      splitArea: {
         // show: true // 保留网格区域
      },
      axisLine: {
         show: false, // 去除纵向边框线
      },
      axisLabel: {
         fontSize: "16px",
         color: "#B6DFFF", //坐标值的颜色
         interval: "auto",
      },
      data: ['北京', '天津', '上海', '重庆', '香港', '澳门'],
   },
   series: [
      {
         type: "bar",
         barWidth: 7, //柱图宽度
         barGap: "100%",
         label: {
            show: true,//柱子上的提示数字
         },
         showBackground: false,
         emphasis: {
            itemStyle: {
               // 柱子的圆角
               borderRadius: [0, 0, 0, 0],
               // 移入当前的柱状图时改变颜色
               color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                     offset: 0,
                     color: "#AED8FF",
                  },
                  {
                     offset: 1,
                     color: "rgba(198,187,255,0.50)",
                  },
               ]),
            },
         },
         zlevel: 11,
         data: [100, 120, 80, 70, 122, 135],
      },
      {
         name: "背景",
         type: "bar",
         barWidth: "16px",
         zlevel: 0,
         showBackground: true,
         barGap: "-170%",
         backgroundStyle: {
            color: 'rgba(202, 220, 255, 0.06)',//背景色设置
         },
         data: [0, 0, 0, 0, 0, 0]
      },
   ],
};