Echarts在线免费图表

 
            let data1 =  [1922.461, 1154.872, 1912.131, 2715.125]
let xData =  ['≤5年', '5年~10年', '10年~15年', '>15年']
let option = {
        toolbox: {
          show: true,
          right: '0',
          feature: {
            mark: { show: true },
            restore: { show: false },
            saveAsImage: {
              show: true,
              pixelRatio: 1,
              title: '保存为图片',
              type: 'png',
              lang: ['点击保存']
            }
          }
        },
        tooltip: {
          trigger: 'item',
          transitionDuration: 0,
          formatter: (params) => {
            return params.name + ' : ' + params.value + '公里'
          }
        },
        grid: {
          left: '10%',
          top: '25%',
          right: '10%',
          bottom: '20%',
        },
        legend: {
          show: true,
          icon: 'circle',
          orient: 'horizontal',
          top: '90.5%',
          right: 'center',
          itemWidth: 16.5,
          itemHeight: 6,
          // itemGap: 30,
          textStyle: {
            // color: '#FFFFFF'
            color: '#C9C8CD',
            fontSize: 14
          }
        },
        xAxis: [{
          data: xData,
          axisLabel: {
            textStyle: {
              color: '#38455D',
              fontSize: 12
            },
            margin: 30, //刻度标签与轴线之间的距离。
          },

          axisLine: {
            show: true, //不显示x轴
            lineStyle: {
              color: '#E2E8EC'
            }
          },
          axisTick: {
            show: false //不显示刻度
          },
          boundaryGap: true,
          splitLine: {
            show: false,
            width: 0.08,
            lineStyle: {
              type: "solid",
              color: "#03202E"
            }
          }
        }],
        yAxis: [{
          name: "单位：公里",
          nameTextStyle: {
            color: '#38455D',
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#E2E8EC',
              type: 'dashed'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#E2E8EC"
            }
          },
          axisLabel: {
            textStyle: {
              color: '#38455D',
              fontSize: 12
            },
          }
        }],
        series: [
          {//柱底圆片
            name: "",
            type: "pictorialBar",
            symbolSize: [30, 20],//调整截面形状
            symbolOffset: [0, 10],
            z: 12,
            itemStyle: {
              "normal": {
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  textStyle: { //数值样式
                    color: '#38455D',
                    fontSize: 12
                  }
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "#02D6EA"
                },
                {
                  offset: 1,
                  color: "#02D6EA"
                }
                ], false)
              }
            },
            data: data1
          },

          //柱体
          {
            name: '',
            type: 'bar',
            barWidth: 30,
            barGap: '0%',
            itemStyle: {
              "normal": {
                "color": {
                  "x": 0,
                  "y": 0,
                  "x2": 0,
                  "y2": 1,
                  "type": "linear",
                  "global": false,
                  "colorStops": [{//第一节下面
                    "offset": 0,
                    "color": "#057DFE"
                  }, {
                    "offset": 1,
                    "color": "#02D7EA"
                  }]
                }
              }
            },

            data: data1
          },

          //柱顶圆片
          {
            name: "",
            type: "pictorialBar",
            symbolSize: [30, 20],//调整截面形状
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: "end",
            "itemStyle": {
              "normal": {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                  [{
                    offset: 0,
                    color: "#50A7FF"
                  },
                  {
                    offset: 1,
                    color: "#02D6EA"
                  }
                  ],
                  false
                ),
              }
            },
            data: data1
          }
        ]
      }