Echarts在线免费图表

 
                  const data = ['万春镇', '寿安镇', '和盛镇', '柳城街道', '天府街道', '金马街道', '涌泉街道', '公平街道', '永宁街道']
      const valueArr = [50, 83, 85, 85, 70, 60, 80, 80, 75]
      option = {
          backgroundColor: '#142758',
          textStyle: {
              color: '#fff'
          },
          tooltip: {
              show: true,
              padding: 15,
              trigger: 'axis',
              axisPointer: {
                  type: 'shadow'
              },
              formatter(params) {
              const item = params[0];
              return `
                      完成率
                      <br/>
                      ${item.value}%
                    `;
            },
            extraCssText: 'width:88px;height:46px;'
          },
          grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              top: '3%',
              containLabel: true
          },
          xAxis: {
              type: 'value',
              max: 100,
              name: 'km²',
              nameGap: 2,
              nameLocation: 'end',
              // 坐标轴单位位置偏移
              nameTextStyle: {
                padding: [0, 0, 100, -10],
                top: '2%'
              },
              show: true,
              // 不显示轴线
              axisLine: {
                  show: true
              },
              // 不显示刻度线
              axisTick: {
                  show: false
              },
              splitLine: {// 网格线为虚线
                show: false,
                lineStyle: {
                    type: 'dashed',
                    color: 'rgba(108,128,151,0.3)'
                }

                },
                axisLabel: {
                    formatter: '{value}%'
                }
          },
          yAxis: [
              {
                  type: 'category',
                  inverse: true,
                  splitLine: {
                      show: false
                  },
                  axisTick: {
                      show: false
                  },
                  axisLine: {
                      show: true,
                      lineStyle: {
                          color: '#6C8097'
                      }
                  },
              axisLabel: {
                          interval: 0,
                          color: '#D0DEEE',
                          formatter: function(value) {
                                      var ret = '';
                                      var maxLength = 5; // 换行字数
                                      var valLength = value.length;
                                      var rowN = Math.ceil(valLength / maxLength);
                                      if (rowN > 1) {
                                          for (var i = 0; i < rowN; i++) {
                                              var temp = '';
                                              var start = i * maxLength;
                                              var end = start + maxLength;
                                              temp = value.substring(start, end) + '\n';
                                              ret += temp;
                                          }
                                          return ret;
                                      } else {
                                          return value;
                                      }
                                  }
                              },
                  data: data
              }
          ],
          series: [
              {
                  type: 'bar',
                  barWidth: 10,
                  zlevel: 2,
                  barGap: '-150%',
                  itemStyle: {
                      normal: {
                          color: function (params) {
                          //   var colorList = [
                          //       ['rgba(26,255,255,0.1)', '#1AFFFF'],
                          //       ['rgba(26,255,255,0.1)', '#1AFFFF'],
                          //       ['rgba(108,128,151,0.1)', '#2194FF'],
                          //       ['rgba(108,128,151,0.1)', '#2194FF']
                          //   ];

                          //   var colorItem = colorList[params.dataIndex];

                            return new echarts.graphic.LinearGradient(0, 0, 1.2, 0, [{
                                    offset: 0,
                                    color: 'rgba(26,255,255,0.1)'
                                },
                                {
                                    offset: 1,
                                    color: '#1AFFFF'
                                }
                            ], false);
                        }
                      }
                  },
                  data: valueArr
              }
              // 背景
              // {
              //     type: 'bar',
              //     barWidth: 22,
              //     itemStyle: {
              //         normal: {
              //             color: 'rgba(108,128,151,0.1)',
              //         },
              //     },
              //       data: [100, 100, 100,100],
              // },
          ]
      };