Echarts在线免费图表

 
            var data = {
   title: '2023年下款走势图',
   name: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
   value1: [720, 200, 300, 500, 110, 800, 130, 110, 800, 130, 443, 123]
}
option = {
   backgroundColor: '#394056',
   title: {
      text: data.title,
      left: 'center',
      top: 18,
      textStyle: {
         color: '#fff',
         fontWeight: 'normal',
         fontSize: 20
      }
   },
   legend: { // 图示例样式
      show: true,
      top: 50,
      right: 50,
      itemGap: 20,
      textStyle: {
         color: '#fff',
      },
   },
   tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
         type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
   },
   grid: {
      // top: 10,
      left: '10%',
      right: '10%',
      bottom: '10%',
      containLabel: true,
   },
   xAxis: [{
      type: 'category',
      data: data.name,
      axisTick: {
         // 其他可选属性，如对齐方式等
         alignWithLabel: true // 刻度线是否与标签对齐，默认false
      },
      axisLabel: {
         padding: [3, 0, 0, 0],
         formatter: '{value}',
         color: 'rgba(95, 187, 235, 1)',
         textStyle: {
            fontSize: 12,
            color: '#fff'
         },
      },
      // 设置 X 轴线条粗细
      axisLine: {
         lineStyle: {
            width: 1, // 根据需求调整数值大小，单位是像素
            color: '#999',
         }
      }
   }],
   yAxis: [{
      type: 'value',
      axisLabel: {
         padding: [3, 0, 0, 0],
         formatter: '{value}',
         color: 'rgba(95, 187, 235, 1)',
         textStyle: {
            fontSize: 12,
            color: '#fff'
         },
      },
      axisTick: {
         show: false, // 默认为true，如果要隐藏，则改为 false

      },
      axisLine: {
         show: true,
         lineStyle: {
            width: 1,
            color: '#999',
         },
      },
      splitLine: {
         lineStyle: {
            width: 1,
            color: '#394458',
         },
      },
   }],
   series: [{
      data: data.value1,
      type: 'bar',
      barWidth: 20, // 根据需求调整数值大小，单位是像素
      itemStyle: {
         color: '#2283cf',
      }
   }],
   // 添加点击事件的处理函数
   emphasis: {
      itemStyle: {
         color: '#2283cf',
         barWidth: 20, // 根据需求调整数值大小，单位是像素
      },
      barWidth: 24, // 根据需求调整数值大小，单位是像素
   },
}