Echarts在线免费图表

 
            const done = 500;
const plan = 1000;
option = {
     backgroundColor: '#000',
        tooltip: {
          trigger: 'none'
        },
        grid: {
          left: '8%',
          right: '4%',
          top: '10%',
          bottom: '13%',
          containLabel: true
        },
        xAxis: {
          data: ['百分比'],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false,
            textStyle: {
              color: '#e54035'
            }
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [76, 15],
            symbolOffset: [-6, 0],
            z: 12,
            data: [
              {
                name: '',
                value:done,
                symbolPosition: 'end',
                itemStyle: {
                  normal: {
                    color: 'rgba(15, 216, 255, 0.2)' //圆柱顶部颜色
                  }
                }
              }
            ]
          },
          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [75, 15],
            symbolOffset: [-6, 8],
            z: 12,
            data: [
              {
                name: '',
                value: 100,
                itemStyle: {
                  normal: {
                    color: 'rgba(15, 216, 255, 1)' //圆柱底部颜色
                  }
                }
              }
            ]
          },
          {
            type: 'bar',
            barWidth: 76,
            data: [
              {
                name: '',
                value: done,

                label: {
                  distance: 15,
                  show: true,
                  position: 'left',
                  // formatter: '{c}' + '',
                  formatter: (data) => {
                    console.log('okokk', data)
                    // return `完成量\n${data.value}`
                    return `{name|完成量}\n{value|${data.value}}`
                  },
                  rich: {
                    name: {
                      color: '#fff',
                      fontSize: 18
                    },
                    value: {
                      fontSize: 24,
                      color: '#4292f5',
                      algin: 'right',
                      fontWeight: 'bold'
                    }
                  }
                },
                labelLine: {
                  show: true,
                  lineStyle: {
                    color: '#4292f5',
                    type: 'solid',
                    width: 2
                  }
                },
                itemStyle: {
                  normal: {
                    color: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(15, 216, 255, 0)'
                        },
                        {
                          offset: 1,
                          color: 'rgba(15, 216, 255, 1)' //底部渐变颜色
                        }
                      ]
                    }
                  }
                }
              }
            ]
          },

          //往上是内部柱状图
          //往下是外部柱状图

          {
            name: '',
            type: 'pictorialBar',
            symbolSize: [100, 15],
            symbolOffset: [-6, -5],
            z: 12,
            data: [
              {
                name: '',
                value: plan,
                symbolPosition: 'end',
                itemStyle: {
                  normal: {
                    color: 'rgba(21, 71, 86, 0.6)' //圆柱顶部颜色
                  }
                }
              }
            ]
          },
          {
            type: 'bar',
            silent: true,
            barWidth: 100,
            barGap: '-116%',
            data: [
              {
                name: '',
                value: plan,
                label: {
                  distance: 15,
                  show: true,
                  position: 'right',
                  // formatter: '{c}' + '',
                  formatter: (data) => {
                    console.log('okokk', data)
                    // return `完成量\n${data.value}`
                    return `{name|计划量}\n{value|${data.value}}`
                  },
                  fontSize: 20,
                  color: '#1AFCFF',
                  rich: {
                    name: {
                      color: '#fff',
                      fontSize: 18
                    },
                    value: {
                      fontSize: 24,
                      color: '#eeda63',
                      algin: 'right',
                      fontWeight: 'bold'
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    color: {
                      x: 1,
                      y: 1,
                      x2: 1,
                      y2: 0,
                      type: 'linear',
                      global: false,
                      colorStops: [
                        {
                          offset: 0,
                          color: 'rgba(0, 255, 136, 0)'
                        },
                        {
                          offset: 0.3,
                          color: 'rgba(21, 71, 86, .4)'
                        },
                        {
                          offset: 0.5,
                          color: 'rgba(21, 71, 86, .4)'
                        },
                        {
                          offset: 0.8,
                          color: 'rgba(21, 71, 86, .4)'
                        },
                        {
                          offset: 1,
                          color: 'rgba(0, 255, 136, 0)' //底部渐变颜色
                        }
                      ]
                    }
                  }
                }
              }
            ]
          }
        ]
      };