Echarts在线免费图表

 
            let data = [
   {
      name: '商业服务业设施用地',
      value: 7654.2332
   },
   {
      name: '物流仓储用地',
      value: 3654.2442
   },
   {
      name: '工业用地',
      value: 8654.2442
   },
   {
      name: '采矿用地',
      value: 4654.2332
   },
   {
      name: '盐田',
      value: 7654.2442
   },
   {
      name: '城镇住宅用地',
      value: 7654.2332
   },
   {
      name: '农村宅基地',
      value: 7654.2222
   },
   {
      name: '机关团体新闻出版用地',
      value: 654.4333
   },
   {
      name: '科教文卫用地',
      value: 7654.2332
   }
];
let unit = '万公顷';
let colorObj = { 0: 'rgba(44, 212, 153, 1)', 1: 'rgba(152, 222, 61, 0.85)' };
let attaData = [];
data.forEach((it, index) => {
   if (it.value) {
      attaData[index] = it.value
   } else {
      attaData[index] = ''
   }
})
const sortData = data
sortData.sort((a, b) => { return b.value - a.value })
let salvProMax = []; // 背景按最大值
for (let i = 0; i < sortData.length; i++) {
   if (sortData[i] === '') {
      salvProMax.push(0)
   } else {
      salvProMax.push(sortData[0] === '0' ? '1' : sortData[0])
   }
}

function attackSourcesDataFmt(sData) {
   let sss = []
   sData.forEach(function (item, i) {
      sss.push({
         value: item,
         name: data[i].name
      })
   })
   return sss
}
option = {
   //你的代码
   tooltip: {
      show: false,
      backgroundColor: 'rgba(3,169,244, 0.5)', // 背景颜色（此时为默认色）
      textStyle: {
         fontSize: 16
      }
   },
   color: ['#F7B731'],
   grid: {
      left: '1%',
      right: '0%',
      bottom: '15%',
      top: '5%',
      containLabel: true
   },
   xAxis: {
      type: 'value',

      splitLine: {
         show: false
      },
      axisLabel: {
         show: false
      },
      axisTick: {
         show: false
      },
      axisLine: {
         show: false
      }
   },
   yAxis:
   {
      type: 'category',
      inverse: true,
      axisTick: 'none',
      axisLine: 'none',
      show: true,
   }
   ,
   dataZoom: [
      {
         show: attackSourcesDataFmt(attaData).length > 6,
         // realtime: true,
         // start: 0,
         right: '5%',
         width: 8,
         // height: 10, // 组件高度
         showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
         // end: 35,
         startValue: 0,
         endValue: 5,
         brushSelect: false, // 是否开启刷选功能
         orient: 'vertical',
         backgroundColor: 'transparent',
         showDataShadow: false,
         fillerColor: 'rgba(64, 83, 133, 0.8)',
         // borderColor: 'transparent',
         handleSize: 0
      },
      {
         zoomLock: true, // 这个开启之后只能通过鼠标左右拉动，不能滚动显示
         type: 'inside',
         orient: 'vertical'
      }
   ],
   series: [
      {
         // 左侧底部椭圆 1号
         type: 'pictorialBar',
         symbolSize: [12, 15],
         symbolOffset: [0, 0],
         z: 12,
         itemStyle: {
              normal: {
                color: (params) => {
                  return params.value === 0 ? 'transparent' : colorObj[0]['0']
                }
              }
            },
         data: attackSourcesDataFmt(attaData)
      },
      //   中间椭圆 3 号
      {
         type: 'pictorialBar',
         symbolSize: [12, 15],
         symbolOffset: [0, 0],
         z: 12,
         symbolPosition: 'end',
         itemStyle: {
              normal: {
                color: (params) => {
                  return params.value === 0 ? 'transparent' : colorObj[0]['1']
                }
              }
            },
         data: attackSourcesDataFmt(attaData)
      },
      {
         name: '',
         type: 'bar',
         barWidth: '15px',
         nameTextStyle: {
            width: 20,
            fontSize: 14,
            fontFamily: 'Times New Roman',
            borderColor: '#51bbfe',
            borderWidth: 1,
            backgroundColor: '#022453',
            color: '#fff',
            padding: [4, 5, 4, 165]
         },
         itemStyle: {
            normal: {
               barBorderRadius: 7,
               color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                     offset: 0,
                     color: colorObj['0']
                  },
                  {
                     offset: 1,
                     color: colorObj['1']
                  }
               ])
            }
         },
         label: {
            normal: {
               show: true,
               position: ['-5', '-30'],
               formatter: function (params) {
                  // const valueStyle = params.dataIndex > 2 ? 'b1' : 'b0'
                  return '{a|' + params.name + '}' + '{' + 'b|' + params.value + '}' + '{c|' + unit + '}'
               },
               rich: {
                  a: {
                     color: '#5B5B5B',
                     //   verticalAlign: 'bottom',
                     align: 'top',
                     padding: [0, 875, 0, 5],
                     lineHeight: 35,
                     fontSize: 14,
                     width: 70,
                     height: 22,
                     fontFamily: 'PingFangSC-Regular, PingFang SC',
                     fontWweight: 400
                  },
                  b: {
                     width: 10,
                     height: 18,
                     color: ' #5B5B5B',
                     fontSize: 16,
                     lineHeight: 30,
                     align: 'right',
                     padding: [0, 5, 0, 0]
                  },
                  c: {
                     color: '#909399',
                     fontFamily: 'Microsoft YaHei',
                     fontSize: 10,
                     lineHeight: 30,
                     align: 'right',
                     padding: [0, 0, 0, 0]
                  }
               }
            }
         },
         data: attackSourcesDataFmt(attaData)
      },
      {
         type: 'bar',
         barWidth: '15px',
         barGap: '-100%',
         margin: '20',
         data: salvProMax,
         textStyle: {
            // 图例文字的样式
            fontSize: 10,
            color: '#DADADA'
         },
         itemStyle: {
            normal: {
               color: '#DADADA',
               fontSize: 10,
               barBorderRadius: 30,
               opacity: 0.2
            }
         }
      }
   ]
};