Echarts在线免费图表

 
            

let xdata = []
let vdata = []
for (let i = 0; i < 5; i++) {
   xdata.push(`名称${i}`)
   vdata.push(Math.floor(Math.random() * (10 - 3 + 1)) + 3)
}

const colorsPlan = [
   {
      type: "linear",
      x: 1,
      y: 0,
      x2: 0,
      y2: 0,
      colorStops: [
         {
            offset: 0,
            color: "#54C1E1",
         },
         {
            offset: 0.5,
            color: "#2ab6e7",
         },
         {
            offset: 0.5,
            color: "#19A5B5",
         },
         {
            offset: 1,
            color: "#056e8a",
         },
      ],
   },
   {
      type: "linear",
      x: 1,
      y: 0,
      x2: 0,
      y2: 0,
      colorStops: [
         {
            offset: 0,
            color: "#babe53",
         },
         {
            offset: 0.5,
            color: "#acb758",
         },
         {
            offset: 0.5,
            color: "#9b9a52",
         },
         {
            offset: 1,
            color: "#6e6c21",
         },
      ],
   },
   {
      type: "linear",
      x: 1,
      y: 0,
      x2: 0,
      y2: 0,
      colorStops: [
         {
            offset: 0,
            color: "#d27739",
         },
         {
            offset: 0.5,
            color: "#cd7a3f",
         },
         {
            offset: 0.5,
            color: "#c4733f",
         },
         {
            offset: 1,
            color: "#8a3305",
         },
      ],
   },
];
const colorsTop = ['#54C1E1', '#c1c471', '#df894e']
option = {
   tooltip: {
      trigger: 'axis',
      axisPointer: {
         type: 'cross',
      },
      formatter(params) {
         return (params[0].name + "：" + params[0].data + '起')
      },
   },
   grid: {
      top: '19%',
      left: '3%',
      right: '6%',
      bottom: '20',
      containLabel: true,
   },
   xAxis: {
      type: 'category',
      data: xdata,
      axisLabel: {
         textStyle: {
            color: '#666',
         },
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: '#AFAFAF',
         },
      },
      axisTick: {
         show: false,
      },
   },
   yAxis: {
      name: '起',
      nameTextStyle: {
         color: 'rgba(255,255,255,1)',
         fontFamily: 'Microsoft YaHei',
      },
      axisLabel: {
         formatter: '{value}',
         textStyle: {
            color: '#666',
         },
      },
      axisLine: {
         lineStyle: {
            color: '#AFAFAF',
         },
      },
      splitLine: {
         show: false,
      },
      minInterval: 1,
   },
   series: [
      // 第一条数据进度柱子
      {
         type: "bar",
         barWidth: 20,
         stack: "1",
         itemStyle: {
            color: function (params) {
               var index = params.dataIndex
               if (params.dataIndex >= colorsPlan.length) {
                  index = params.dataIndex - colorsPlan.length
               }
               return colorsPlan[index]
            },
            borderRadius: 0,
         },
         label: {
            show: true,
            position: 'top',
            textStyle: {
               color: this.isDark ? '#fff' : '#333',
            },
         },
         data: vdata,
      },
      // 第一条数据上面正方形：颜色
      {
         type: "pictorialBar",
         symbol: "diamond",
         symbolSize: [20, 8],
         symbolOffset: [0, -4],
         symbolPosition: "end",
         z: 12,
         itemStyle: {
            normal: {
               color: function (params) {
                  var index = params.dataIndex
                  if (params.dataIndex >= colorsTop.length) {
                     index = params.dataIndex - colorsTop.length
                  }
                  return colorsTop[index]
               },
            },
         },
         data: vdata,
      }
   ],
}