Echarts在线免费图表

 
            option = {
   //你的代码
   backgroundColor: "#061740",
   color: ['#FFE5B9', '#33CCCC', '#1EC5EA'],
   tooltip: {
      //鼠标悬浮提示
      trigger: 'item',
      axisPointer: {
         type: 'shadow'
      },
      // formatter: '{b}:{c}', //显示的内容
      backgroundColor: 'rgba(21, 45, 85, 0.6)', //背景颜色（此时为默认色）
      textStyle: {
         color: '#fff'
      }
   },
   grid: {
      //图例位置
      left: '0%',
      right: '2%',
      top: '30%',
      bottom: '8%',
      containLabel: true
   },
   xAxis: [
      {
         type: 'category',
         data: [
            '结算',
            '预算',
            '概算'
         ],
         axisTick: {
            alignWithLabel: true
         },
         axisLine: {
            show: true //隐藏y轴
         },
         axisTick: {
            show: true //刻度线
         },
         // x轴的字体样式
         axisLabel: {
            show: true,
            margin: 14, //边距
            textStyle: {
               color: '#fff',
               fontSize: '12',
               fontWeight: '400',
               fontFamily: 'Microsoft YaHei'
            },
            interval: 0 //x轴文字不隐藏
         }
      }
   ],
   yAxis: {
      splitLine: {
         show: true,
         lineStyle: {
            color: '#979797',
            type: [10, 15],
            dashOffset: 0
         },
      },
      axisLabel: {
         textStyle: {
            color: '#F5F5F5',  //更改坐标轴文字颜色
            fontSize: 12     //更改坐标轴文字大小
         }
      }
   },
   series: [
      {
         name: '',
         type: 'pictorialBar', //pictorialBar 象形柱图
         symbolSize: [46, 12], //调整截面形状
         symbolOffset: [0, 0],
         z: 12,
         itemStyle: {
            normal: {
               color: function (params) {
                  let barTopColor = ['rgba(255, 229, 185, .5)', 'rgba(41, 220, 192, 1)', 'rgba(30, 197, 234, 1)']
                  console.log(params, 555)
                  return barTopColor[params.dataIndex];
               },
            },
         },
         // 实现数字展示在柱状图
         label: {
            show: true,
            position: 'top',
            fontSize: 20,
            color: '#F5F5F5',
            fontWeight: 'bold',
            offset: [0, -10],
            formatter: '{c}' //添加单位
         },
         data: [626, 2708, 4567]
      },
      {
         name: '',
         type: 'bar', //bar 柱状图
         barWidth: 46,
         barGap: '0%',
         itemStyle: {
            normal: {
               color: function (params) {

                  let barMidColor = ['rgba(240, 194, 126, 1)', 'rgba(51, 204, 167, 1)', 'rgba(28, 171, 232, 1)']
                  console.log(params, 555)
                  return barMidColor[params.dataIndex];
               },
            },
         },
         data: [626, 2708, 4567]
      },
      {
         name: '',
         type: 'pictorialBar', //pictorialBar 象形柱图
         symbolSize: [46, 12], //调整截面形状
         symbolOffset: [0, -8],
         z: 12,
         symbolPosition: 'end', //图形的位置 'start'：图形边缘与柱子开始的地方内切。'end'：图形边缘与柱子结束的地方内切。'center'：图形在柱子里居中。
         itemStyle: {
            normal: {
               color: function (params) {
                  let barBottomColor = ['rgba(255, 229, 185, 1)', 'rgba(41, 220, 192, 1)', 'rgba(30, 197, 234, 1)']
                  console.log(params, 555)
                  return barBottomColor[params.dataIndex];
               },
            },
         },
         data: [626, 2708, 4567]
      }
   ]
};