Echarts在线免费图表

 
            let axisData = ['中国境内', '新加坡', '香港', '英国', '美国']
let seriesData = [6647, 7473, 8190, 8488, 9491]
let topLableSize = 24
let barWidth = 18
let boxWidth = 535
let boxHeight = 322
let lineColor = '#A20FEF'
let linerColor = ['rgba(161, 15, 239, 1)', 'rgba(0, 0, 0, 0)']
var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC']
option = {
   backgroundColor: '#0c2d55',
   grid: {
      left: '5%',
      top: '2%',
      right: '10%',
      bottom: '0%',
      containLabel: true
   },
   xAxis: [{
      show: false,
   }],
   yAxis: [{
      inverse: true,
      axisTick: 'none',
      axisLine: 'none',
      offset: '7',
      align: 'left',
      axisLabel: {
         interval: 0,
         textStyle: {
            color: '#ffffff',
            fontSize: '24',
            fontWeight: 'bold',
            fontFamily: 'siyuan',
         },
         formatter: function (value, index) {
            return '{rank' + '|' + 'Top' + (1 + index) + '}{title|' + value + '}'
         },
         rich: {
            rank: {
               color: '#0AE3FF',
               fontSize: topLableSize,
               fontWeight: 'bold',
               fontFamily: 'siyuan',
            },
            title: {
               color: '#fff',
               align: 'right',
               width: barWidth < 15 ? 90 : 150,
               color: '#fff',
               fontSize: topLableSize,
               fontWeight: 'bold',
               fontFamily: 'siyuan',
            }
         }
      },
      data: axisData
   }, {
      inverse: true,
      axisTick: 'none',
      axisLine: 'none',
      offset: '27',
      axisLabel: {
         textStyle: {
            color: '#ffffff',
            fontSize: '0',
         }
      },
      data: [10, 9, 8, 7, 6]
   },],
   series: [{
      name: '条',
      type: 'bar',
      yAxisIndex: 0,
      //柱状图自动排序，排序自动让Y轴名字跟着数据动
      realtimeSort: true,
      data: seriesData,
      label: {
         //  offset: '27',
         // distance:10,
         normal: {
            show: true,
            position: 'right',
            distance: 20,
            textStyle: {
               color: '#ffffff',
               fontSize: topLableSize,
               fontWeight: 'bold',
               fontFamily: 'siyuan',
            }
         }
      },
      barWidth: barWidth,
      itemStyle: {
         normal: {
            barBorderRadius: [0, 30, 30, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
               offset: 0,
               color: '#794B13'
            }, {
               offset: 1,
               color: '#F19626'
            }]),
            // color: function (params) {
            //     var num = myColor.length;
            //     return myColor[params.dataIndex % num]
            // },
         }
      },
      z: 2
   },
      // {
      //     name: '白框',
      //     type: 'bar',
      //     yAxisIndex: 1,
      //     barGap: '-100%',
      //     data: [99, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5, 99.5],
      //     barWidth: 20,
      //     itemStyle: {
      //         normal: {
      //             color: '#0e2147',
      //             barBorderRadius: 5,
      //         }
      //     },
      //     z: 1
      // },
      // {
      //     name: '外框',
      //     type: 'bar',
      //     yAxisIndex: 2,
      //     barGap: '-100%',
      //     data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
      //     barWidth: 24,
      //     itemStyle: {
      //         normal: {
      //             color: function(params) {
      //                 var num = myColor.length;
      //                 return myColor[params.dataIndex % num]
      //             },
      //             barBorderRadius: 5,
      //         }
      //     },
      //     z: 0
      // },
      // {
      //     name: '外圆',
      //     type: 'scatter',
      //     hoverAnimation: false,
      //     data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      //     yAxisIndex: 2,
      //     symbolSize: 35,
      //     itemStyle: {
      //         normal: {
      //             color: function(params) {
      //                 var num = myColor.length;
      //                 return myColor[params.dataIndex % num]
      //             },
      //             opacity: 1,
      //         }
      //     },
      //     z: 2
      // }
   ]
};