Echarts在线免费图表

 
            // 自己处理下
var category = [
   {
      name: "314",
      value: 16
   },
   {
      name: "316",
      value: 18
   },
   {
      name: "616",
      value: 20
   },
   {
      name: "301",
      value: 25
   },
   {
      name: "322",
      value: 30
   },
   {
      name: "627",
      value: 40
   },
   {
      name: "601",
      value: 50
   },
   {
      name: "351",
      value: 60
   },
   {
      name: "304",
      value: 70
   },
   {
      name: "315",
      value: 80
   }
];
var total = 100; // 动态计算
var datas = [];
category.forEach(value => {
   datas.push(value.value);
});
option = {
   backgroundColor: '#031a40',
   xAxis: {
      max: total,
      axisLabel: {
         show: true,
         textStyle: {
            color: "#fff",
            fontSize: 21.5,
         },
         margin: 0,
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false
      },
      splitLine: {
         show: false,
         lineStyle: {
            color: "#666"
         }
      }
   },
   grid: {
      left: "8%",
      top: "0%",
      right: "8%",
      bottom: "5%"
   },
   yAxis: [
      {
         type: "category",
         data: category,
         axisTick: {
            show: false
         },
         axisLabel: {
            show: false,
         },
         axisLine: {
            show: false,
            lineStyle: {
               color: "balck" //Y轴颜色
            }
         },
         splitLine: {
            show: false
         }
      }
   ],
   series: [
      {
         // 内
         type: "bar",
         barWidth: "50%",
         legendHoverLink: false,
         silent: true,
         itemStyle: {
            normal: {
               color: function (params) {
                  var color;
                  if (
                     params.dataIndex == 9 ||
                     params.dataIndex == 8 ||
                     params.dataIndex == 7
                  ) {
                     color = {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                           {
                              offset: 0,
                              color: "#D2C0AC"
                           },
                           {
                              offset: 1,
                              color: "#CD8628"
                           }
                        ]
                     };
                  } else {
                     color = {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 1,
                        y2: 0,
                        colorStops: [
                           {
                              offset: 0,
                              color: "#86ABD4" // 0% 处的颜色
                           },
                           {
                              offset: 1,
                              color: "#0056D4" // 100% 处的颜色
                           }
                        ]
                     };
                  }
                  return color;
               }
            }
         },
         label: {
            normal: {
               show: true,
               position: "left",
               formatter: "{b}",
               textStyle: {
                  color: "#fff",
                  fontSize: 21.5,
                  fontFamily: "Source Han Sans CN",
               },
               padding: [0, 10, 0, 0]
            }
         },
         data: category,
         z: 1,
         animationEasing: "elasticOut"
      },
      {
         // 分隔
         type: "pictorialBar",
         itemStyle: {
            normal: {
               color: "#061348"
            }
         },
         symbolRepeat: "fixed",
         symbolMargin: 3,
         symbol: "rect",
         symbolClip: true,
         symbolSize: [2, 21],
         symbolPosition: "start",
         symbolOffset: [1, -1],
         symbolBoundingData: this.total,
         data: category,
         z: 2,
         animationEasing: "elasticOut"
      },
      {
         name: "外框",
         type: "bar",
         barGap: "-105%", // 设置外框粗细
         data: [
            total,
            total,
            total,
            total,
            total,
            total,
            total,
            total,
            total,
            total,
            total,
            total,
            total,
            total,
            total,
            total,
            total,
            total,
            total,
            total
         ],
         barWidth: "50%",
         itemStyle: {
            normal: {
               color: "transparent", // 填充色
               barBorderColor: "#1C4B8E", // 边框色
               barBorderWidth: 1, // 边框宽度
               label: {
                  // 标签显示位置
                  show: false,
                  position: "top" // insideTop 或者横向的 insideLeft
               }
            }
         },
         z: 0
      }
   ]
};