Echarts在线免费图表

 
            const OptionDdata = [
   { value: 239, name: "1月" },
   { value: 200, name: "2月" },
   { value: 100, name: "3月" },
   { value: 400, name: "4月" },
   { value: 300, name: "5月" },
]
const Xdata = []
OptionDdata.forEach((v)=>{
   Xdata.push(v.name)
})
console.log(Xdata)
const Arr = OptionDdata.map((v, i) => {
   return {
      value: v.value,
      label: {
         normal: {
            show: true,
            position: "top",
            formatter: function (data) {
               return '{a0|' + data.value + '}';
            },
            rich: {
               a0: {
                  color: '#8FCEFF',
                  fontSize: 12,
               },
            }
         },
      },
      itemStyle: {
         barBorderRadius: [50, 50, 0, 0],
         color: {
            type: 'linear',
            x: 0,  //右
            y: 0,  //下
            x2: 0,  //左
            y2: 1,  //上
            colorStops: [
               {
                  offset: 0.1,
                  color: '#13D5FC' // 0% 处的颜色
               },
               {
                  offset: 1,
                  color: '#2059B8' // 100% 处的颜色
               }
            ]
         },
      },
   }
})
Arr[0].label.normal.rich.a0.color = '#EF9F16'
Arr[0].itemStyle = { color: '#EF9F16', barBorderRadius: [50, 50, 0, 0] }
option = {
   grid: {
      top: 100,
      left: 50,
      bottom: 200,
      right: 30
   },
   xAxis: [{
      type: 'category',
      data: Xdata,
      axisTick: {
         show: false,
      },
      splitLine: {
         show: false,
      },
      axisLine: {
         show: false,
      },
   }],
   yAxis: [{
      splitLine: {
         lineStyle: {
            type: "dashed",
            color: '#0C2D74'
         },
      },
      axisLabel: {
         show: false,
      }
   },
   {
      name: '月份',
      nameTextStyle: {
         color: "#00BAFF",
         align: "right",
         padding: [0, 0, 0, 0]
      }
   }],
   series: [{
      type: 'bar',
      silent: true,
      barWidth: '25%',

      data: Arr
   },]
};