Echarts在线免费图表

 
            
option = {
   backgroundColor: "#03213D",
   tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(0,0,0,.6)",
      borderColor: "rgba(147, 235, 248, 0)",
      textStyle: {
         color: "#FFF",
      },
      // axisPointer: {
      // 	type: "shadow",
      // 	label: {
      // 		show: true,
      // 	},
      // },
   },
   grid: {
      left: "10%",
      top: "18%",
      right: "5%",
      bottom: "25%",
   },
   xAxis: {
      data: [
      "宜宾第五初级中学",
      "王场初级中学",
      "商周镇小学",
      "凉水井中学",
      "正兴中学",
      "文昌中学",
      "富加中学",
   ],
      axisLine: {
         show: true, //隐藏X轴轴线
         lineStyle: {
            color: "#163a5f",
            width: 2,
         },
      },
      axisTick: {
         show: false, //隐藏X轴刻度
         alignWithLabel: true,
      },
      axisLabel: {
         show: true,
         textStyle: {
            color: "#BDD8FB", //X轴文字颜色
            fontSize: 12,
         },
         interval: 0,
         formatter: function (value) {
            var ret = ""; //拼接加\n返回的类目项
            var maxLength = 4; //每项显示文字个数
            var valLength = value.length; //X轴类目项的文字个数
            var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
            if (rowN > 1) {
               //如果类目项的文字大于5,
               for (var i = 0; i < rowN; i++) {
                  var temp = ""; //每次截取的字符串
                  var start = i * maxLength; //开始截取的位置
                  var end = start + maxLength; //结束截取的位置
                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                  temp = value.substring(start, end) + "\n";
                  ret += temp; //凭借最终的字符串
               }
               return ret;
            } else {
               return value;
            }
         },
      },
   },
   yAxis: [
      {
         type: "value",
         name: "",
         nameTextStyle: {
            color: "#BDD8FB",
            fontSize: 12,
         },

         splitLine: {
            show: false,
            lineStyle: {
               color: "rgba(255, 255, 255, 0.15)",
               // type: 'dashed', // dotted 虚线
            },
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
               color: "#163a5f",
               width: 1,
            },
         },
         axisLabel: {
            show: true,
            textStyle: {
               color: "#BDD8FB",
               fontSize: 12,
            },
         },
      },
      {
         type: "value",
         name: "",
         nameTextStyle: {
            color: "#BDD8FB",
            fontSize: 12,
         },
         splitLine: {
            show: false,
            lineStyle: {
               width: 1,
               color: "#CED2DB",
            },
         },
         axisTick: {
            show: false,
         },
         axisLine: {
            show: false, //隐藏X轴轴线
            lineStyle: {
               color: "#163a5f",
               width: 2,
            },
         },
         axisLabel: {
            show: false,
            textStyle: {
               color: "#797A7F",
               fontSize: 12,
            },
         },
      },
   ],
   series: [
      {
         name: "下载数",
         type: "bar",
         barWidth: 15,
         itemStyle: {
            // color: new graphic.LinearGradient(0, 0, 0, 1, [
            //    {
            //       offset: 0,
            //       color: "#00A2FF",
            //    },
            //    {
            //       offset: 1,
            //       color: "#00CCD2",
            //    },
            // ]),
             color: {
            type: 'linear',
            x: 0,  //右
            y: 0,  //下
            x2: 0,  //左
            y2: 1,  //上
            colorStops: [
               {
                  offset: 0.1,
                  color: '#13D5FC' // 0% 处的颜色
               },
               {
                  offset: 1,
                  color: '#2059B8' // 100% 处的颜色
               }
            ]
         },
            barBorderRadius: [20, 20, 20, 20],
         },
         label: {
            show: true,
            position: "top",
            distance: 0,
            color: "#1ACDDC",
            formatter: "{c}" + "次",
         },
         data: [63, 99, 65, 85, 75, 78, 55],
      },
      {
         // name: '背景',
         type: "bar",
         barWidth: "15px",
         xAxisIndex: 0,
         yAxisIndex: 1,
         barGap: "-110%",
         data: [100, 100, 100, 100, 100, 100, 100], //背景阴影长度
         itemStyle: {
            normal: {
               color: "rgba(255,255,255,0.039)",
               barBorderRadius: [20, 20, 20, 20],
            },
         },
         tooltip: {
            show: false,
         },
         zlevel: 9,
      },
   ],
};