Echarts在线免费图表

 
            var barData3d = [
   // 立体柱状图数据
   { name: '水田', value: 260.67 },
   { name: '水浇地', value: 231.13 },
   { name: '旱地', value: 180.87 },
   { name: '果园', value: 159.19 },
   { name: '茶园', value: 148.75 },
   { name: '橡胶园', value: 138.62 },
   { name: '其他园地', value: 110.27 },
   { name: '农村道路', value: 96.53 },
   { name: '水库水面', value: 75.88 },
   { name: '其他', value: 54.31 },
];
var xData = [];
var yData = [];
let isShowYData = false
barData3d.map((item) => {
   xData.push(item.name)
   yData.push(item.value)
   if (item.value !== 0) {
      isShowYData = true
   }
})
option = {
   backgroundColor:"black",
   //你的代码
   tooltip: {
      trigger: 'item',
      formatter: function (params) {
         return (
            '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ffcf20;"></span>' +
            '&nbsp' +
            params.name +
            ':' +
            '&nbsp' +
            '&nbsp' +
            params.value +
            '万公顷'
         )
      }
   },
   animation: true,
   xAxis: [
      {
         type: 'category',
         data: xData,
         axisTick: {
            alignWithLabel: true
         },
         nameTextStyle: {
            color: '#82b0ec'
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: '#82b0ec'
            }
         },
         axisLabel: {
            interval: 0,
            formatter: function (value) {
               let ret = '' // 拼接加\n返回的类目项
               var maxLength = 4 // 每项显示文字个数
               var valLength = value.length // X轴类目项的文字个数
               var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
               if (rowN > 1) {
                  // 如果类目项的文字大于5,
                  for (let i = 0; i < rowN; i++) {
                     let temp = '' // 每次截取的字符串
                     var start = i * maxLength // 开始截取的位置
                     var end = start + maxLength // 结束截取的位置
                     // 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                     temp = `${value.substring(start, end)}${i !== rowN - 1 ? '\n' : ''}`
                     ret = ret + temp // 凭借最终的字符串
                  }
                  return ret
               } else {
                  return value
               }
            },
            textStyle: {
               color: 'rgba(255, 255, 255, 0.9)',
               width: 24,
               height: 18,
               fontSize: 12,
               fontWeight: 400,
               lineHeight: 18
            },
            margin: 20
         }
      }
   ],
   dataZoom: [
      {
         show: yData.length > 6,
         // realtime: true,
         // start: 0,
         bottom: 10,
         height: 8, // 组件高度
         showDetail: false, // 即拖拽时候是否显示详细数值信息 默认true
         // end: 35,
         startValue: 0,
         endValue: 5,
         brushSelect: false, // 是否开启刷选功能
         backgroundColor: 'transparent',
         showDataShadow: false,
         fillerColor: 'rgba(64, 83, 133, 0.8)',
         // borderColor: 'transparent',
         handleSize: 0
      },
      {
         zoomLock: true, // 这个开启之后只能通过鼠标左右拉动，不能滚动显示
         type: 'inside'
      }
   ],
   yAxis: [
      {
         name: '万公顷',
         nameTextStyle: {
            color: 'rgba(255, 255, 255, 0.6)',
            padding: [0, 35, 5, 0]
         },
         //   nameLocation: 'middle',
         show: true,
         type: 'value',
         axisLabel: {
            textStyle: {
               color: 'rgba(255, 255, 255, 0.9)'
            }
         },
         splitLine: {
            lineStyle: {
               color: 'rgba(255,255,255,0.15)',
               type: 'dashed'
            }
         },
         axisLine: {
            show: true
         }
      }
   ],
   series: [
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [20, 10],
         symbolOffset: [0, -6], // 上部椭圆
         symbolPosition: 'end',
         z: 12,
         // "barWidth": "0",
         //   barWidth: "30",
         label: {
            normal: {
               width: 39,
               height: 20,
               show: true,
               position: 'top',
               // "formatter": "{c}%"
               fontSize: 13,
               fontWeight: 400,
               color: 'rgba(255, 255, 255, 0.9)',
               lineHeight: 15
            }
         },
         color: '#ffcf20',
         data: yData
      },
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [25, 10],
         symbolOffset: [0, 7], // 下部椭圆
         // "barWidth": "20",
         z: 12,
         color: '#ffcf20',
         data: yData
      },
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: function (d) {
            return d > 0 ? [32, 15] : [0, 0]
         },
         symbolOffset: [0, 12], // 下部内环
         z: 10,
         itemStyle: {
            normal: {
               color: 'transparent',
               borderColor: '#FFCF20',
               borderType: 'solid',
               borderWidth: 2
            }
         },
         data: yData
      },
      {
         name: '',
         type: 'pictorialBar',
         symbolSize: [40, 20],
         symbolOffset: [0, 18], // 下部外环
         barMinHeight: 1,
         z: 10,
         itemStyle: {
            normal: {
               color: 'transparent',
               borderColor: '#FFCF20',
               borderType: 'solid',
               borderWidth: 2,
               opacity: 0.2
            }
         },
         data: isShowYData ? yData : []
      },
      {
         type: 'bar',
         // silent: true,
         barWidth: '20',
         barGap: '10%', // Make series be overlap
         barCateGoryGap: '10%',
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [
                  {
                     offset: 0,
                     color: 'rgba(255,207,32,0.6)'
                  },
                  {
                     offset: 1,
                     color: 'rgba(255,207,32,0.1)'
                  }
               ])
               // opacity: 0.5,
            }
         },
         data: yData
      }
   ]
};