漏斗图

描述:当前是关于Echarts图表中的 漏斗图 示例。
 
            let colorList = [
   new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#7330A4',
   }, {
      offset: 1,
      color: '#BB1BB4',
   }]),
   new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#13AD8B',
   }, {
      offset: 1,
      color: '#9029BD',
   }]),
   new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#61BDFF',
   }, {
      offset: 1,
      color: '#15A67E',
   }]),
   new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#4D88C5',
   }, {
      offset: 1,
      color: '#3EB0FF',
   }]),
   new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
      offset: 0,
      color: '#58ABC8',
   },
   {
      offset: 1,
      color: '#27DAEF',
   }])]
let chartData = [
   { name: '樱井莉亚', value: '47' },
   { name: '天海翼', value: '41' },
   { name: '泷泽萝拉', value: '139' },
   { name: '铃原爱蜜莉', value: '87' },
]
option = {
   color: colorList,
   tooltip: {
      confine: true,
      formatter: '{b0}:{c0}' + 'kw·h',
   },
   series: [
      {
         name: '',
         type: 'funnel',
         x: '10%',
         top: '10%',
         width: '80%',
         height: '30%',
         min: 0,
         minSize: '26%',
         maxSize: '70%',
         gap: 15,
         data: chartData,
         roseType: true,
         label: {
            color: '#fff',
            position: 'center',
            formatter(params) { // 格式化代码 自定义 quanmei
               return '{name|' + params.data.name + '\n' + '} {style|' + params.data.value + 'kw·h}'
            },
            rich: {
               style: {
                  color: '#fff',
                  marginTop: 20,
               },
               name: {
                  color: '#fff',
               },
            },
         },
         itemStyle: {
            borderWidth: 0,
         },
      },
   ],
};