Echarts在线免费图表

 
            let data = [
   {
      "value": 11520,
      "name": "居民小区"
   },
   {
      "value": 21130,
      "name": "荐椎工地"
   },
   {
      "value": 11710,
      "name": "餐饮企业"
   },
   {
      "value": 11450,
      "name": "公共机构"
   },
   {
      "value": 38911,
      "name": "其他"
   }
]
let data1 = JSON.parse(JSON.stringify(data))
let total = 0
let left = 0
data.forEach((item, index) => {
   total += item.value
})
data.forEach((item, index) => {
   item.width = (item.value / total)
   item.left = left
   left += (item.value / total)
   if (index > data.length / 2) {
      item.minSize = 40 - 10 * (index - (data.length / 2))
      item.maxSize = 40 - 10 * (index - (data.length / 2))
   } else {
      item.minSize = 10 * (index + 1)
      item.maxSize = 10 * (index + 1)
   }
   item.data = [data1[index]]
})
let optionSeries = data.map(item => ({
   name: item.name,
   type: 'funnel',
   orient: 'horizontal',
   top: '-25%',
   width: (item.width * 100) + '%',
   left: item.left * 100 + '%',
   minSize: item.minSize,
   maxSize: item.maxSize,
   label: {
      show: false,
   },
   labelLine: {
      show: false,
   },
   emphasis: {
      disabled: true,//是否关闭高亮状态。
   },
   itemStyle: {
      borderWidth: 0,//去掉白边
   },
   silent: true,// 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件quanmei。
   data: item.data,
}))
let rich = {}
let color = ['#FF955F', '#4346D3', '#FFCF5F', '#2276FC', '#EE6F7C']
color.forEach((item, index) => {
   rich[`point${index}`] = {
      width: 8,
      height: 8,
      borderRadius: 2,
      backgroundColor: color[index],
   }
})
let option = {
   color: color,
   legend: {
      left: 13,
      top: '36%',
      selectedMode: false, // 图例禁止点击
      // itemHeight: 8,
      // itemWidth: 8,
      // itemGap: 10,
      icon: 'none',
      formatter(name) { // 该函数用于设置图例显示后的百分比
         let idx = data1.findIndex((item) => item.name == name)
         return `{point${idx}|}{a|${name}}{b|${data1[idx].value}}`
      },
      data: data1.map(item => item.name),
      textStyle: {
         color: '#333',
         fontSize: 12,
         padding: [10, 0, 0, 0],
         rich: {
            ...rich,
            a: {
               width: 70,
               padding: [0, 0, 0, 10],
            },
            b: {
               width: 55,
               fontWeight: 'bold',
            }
         },
      },
   },
   grid: {
      left: 0,
      bottom: 0,
      right: 0,
      top: 0
   },
   series: optionSeries
};