Echarts在线免费图表

 
            var leftData = [
    {
        "value": "120",
        "name": "第一步"
    },
    {
        "value": "100",
        "name": "第二步"
    },
    {
        "value": "80",
        "name": "第三步"
    },
    {
        "value": "60",
        "name": "第四步"
    },
    {
        "value": "40",
        "name": "第五步"
    },
    {
        "value": "20",
        "name": "第六步"
    },
    {
        "value": "0",
        "name": "第七步"
    }
];
var rightData = [
    {
        "value": "120",
        "name": "第一步"
    },
    {
        "value": "100",
        "name": "第二步"
    },
    {
        "value": "80",
        "name": "第三步"
    },
    {
        "value": "60",
        "name": "第四步"
    },
    {
        "value": "40",
        "name": "第五步"
    },
    {
        "value": "20",
        "name": "第六步"
    },
    {
        "value": "0",
        "name": "第七步"
    }
];

var max = 0
var arr1 = leftData.map(item => item.value)[0]
var arr2 = rightData.map(item => item.value)[0]
if(Number(arr1) > Number(arr2)) {
   max = arr1
} else {
   max = arr2
}
var bgData = leftData.map(item => {
   return {
      name: item.name,
      value: max + ( max * 0.3) // 背景长度加长，使数值靠内
   }
})

// 透明度后续处理，先定义颜色
var colors = ["rgba(172, 139, 228", "rgba(34, 105, 224", "rgba(89, 169, 255", "rgba(11, 191, 174", "rgba(112, 198, 145",
        "rgba(252, 187, 52", "rgba(237, 116, 108"];


option = {
        backgroundColor: "#ffffff",
        tooltip: {
          show: false,
        },
        calculable: true,
        series: [
         // 背景色、居中白色字
          {
            name: '',
            type: 'funnel',
            top: 60, // 漏斗顶部与图片顶部距离
            width: '90%',
            height: '85%',
            sort: 'none',
            gap: 3,  // 间隔
            x: '5%',
            minSize: '100%',
            label: {
              normal: {
                show: true,
                color: '#ffffff',
                fontSize: 16,
                fontWeight: 'bold',
                fontFamily: 'SourceHanSansCN',
                lineHeight: 18,
                textBorderColor: '#ffffff',
                textBorderWidth: 0,
                formatter: function(params) {
                  return params.name;
                },
                position: 'center',
              },
            },
            labelLine: {        // 标签的视觉引导线样式
              normal: {
                show: true,      // 是否显示引导线
                length:	30		// 视觉引导线第一段的长度。
              }
            },
            itemStyle: {        // 图形样式
              normal: {
                color: function(params) {
                  let obj = new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: colors[params.dataIndex] + ', 0)',
                    },
                    {
                      offset: 0.2,
                      color: colors[params.dataIndex] + ', 0.2)',
                    },
                    {
                      offset: 0.5,
                      color: colors[params.dataIndex] + ', 0.3)',
                    },
                    {
                      offset: 0.8,
                      color: colors[params.dataIndex] + ', 0.2)',
                    },
                    {
                      offset: 1,
                      color: colors[params.dataIndex] + ', 0)',
                    },
                  ]);
                  return obj;
                },
                opacity: 1    // 背景图形透明度
              }
            },
            tooltip: {
              show: false			// 让背景图形的提示框不显示
            },
            zlevel: 2,
            data: bgData
          },
          {
            name: '',
            type: 'funnel',
            top: 60, // 漏斗顶部与图片顶部距离
            width: '35%',
            height: '85%',
            gap: 3,  // 间隔
            x: '15%',
            sort: 'none',
            minSize: '25%',
            funnelAlign: 'right',
            center: ['40%', '50%'],
            data: leftData,
            roseType: true,
            label: {
              normal: {
                show: true,
                color: '#37393C',
                fontSize: 16,
                fontWeight: 'bold',
                lineHeight: 21,
                formatter: function(params) {
                  return params.value;
                },
                position: 'left',
              },
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  return colors[params.dataIndex] + ', 0.55)'
                },
                borderWidth: 0,
              }
            },
            zlevel: 1,
          },
          {
            name: '外部',
            type: 'funnel',
            width: '35%',
            height: '85%',
            top: 60, // 漏斗顶部与图片顶部距离
            gap: 3,  // 间隔
            x: '50%',
            sort: 'none',
            minSize: '25%',
            funnelAlign: 'left',
            center: ['40%', '50%'],
            data: rightData,
            roseType: true,
            label: {
              normal: {
                show: true,
                color: '#37393C',
                fontSize: 16,
                fontWeight: 'bold',
                lineHeight: 21,
                formatter: function(params) {
                  return params.value;
                },
                position: 'right',
              }
            },
            itemStyle: {
              normal: {
                color: function(params) {
                  return colors[params.dataIndex] + ', 1)'
                },
                borderWidth: 0,
              }
            },
            zlevel: 1,
          },
        ]
      };