Echarts在线免费图表

 
            let ranking1 = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAMAAACZHrEMAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAutQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+/L///7///3//PX/////////8tL/5KX/7MD/+/D/8M3/7sX//vv/8dL/677/57H/5Kb/89f/+Of/6LL//////////vz/9Nz/78r/6bb//fj/+Oj/8M7/7L//8dD/5Kn/7MH/7cT/9uL/57D/6LT/89b/////+u//67v/8dH/6rn/6bX/+u7/8Mz/67z/9dz/9+X/78j//PP/9t//9d3/+Ob/7sj//fb/56//9Nr/5av/+ev/6rv/9+T///z//PT/5ar/9uH/////8tP/5q3/673/5qz/8tX/5Kj/7cL/+en/9uD//ff/9+L/8c//5aj/7sb/////6LP/9Nn/+ez/8tT/+u3//Pb/567/7cX/78n/////78v/7ML//vn/////5q7/6bj/9+P/////////+er/7sf/////+/H/6rj/5an//////vr/9Nv/////7cP/5Kf/6bf/9d7/////89j/9d//+uz/////////////6rr/////////////////////////////////////////////////////////////////////////////GVp0dgAAAPl0Uk5TACdVg7DFztfg6fL/EUJwnsz39cmbbT8PGF2g4p8SUZPWUB1609J4FGnC/mgFa2oIC3PncjrNEwJl7GMBF8NG6AOKiCvqLfDvQfhYj3xO/Swj5RrKkFpPKCoK1YC/vGAMDRD2Ce7mBMghIt7/////3UD//////////////////ziY/////////////////////zD////////////////////////////////////t//////////////////+o////////////0P////T////xIP//SP///7j//9j/////6////8BfjP/jXkvkHPtcgWK5YYfUgiVnnK5TLRojcQAACilJREFUeJzNnHtgFMUdxxeMkjAQqm0pGNpYVKwxkdYKARGJWonxRSm2qPgEFTV3UX4k3MFdYiHcxZgElJdJSkgiEtIkmlwgRQOGhAoBESGEEjSh1lbtu7Wt2v7ZmX3O7N5md+927/L9Z3dmd2c+Ozu/ec9yXOQaNfqChAsvGpOYNBahsUmJYy66MOGC0aOiCDAyjRufPOFrF6OwuuTr3/jmxG/FimTS5EtTwnMoSpkyeZLjIN/+TuplRiCSLkv9rpMJNPXyK8ySCLpy2lRnSK763tVp1lCI0q6+5irbUdIzDPOJnlKuTbcVZXrkKALOdNtQvv+D66JBIbruhzbhXD8jWhSiGdfbgDJzSgTZNpzSJsyMEiVz1mx7UIhm3zAnGpYb59qHQjT3xshZbppnLwtC826KECXrZptyC620W7IiYZlq8yeSNDeCGuLWHznDglDSbVZZJs53igWh7NutsYzOcY4FoZw7rLAkO5B1aaXNMs9yp7MoRHeZZclwngWhDHMsd98TC5h77jbDMl6n1W+3Lh5vzLJgbGxYcFdrgRHLjxfGigWhhT8ZniXdloaUWS0avnF8byxZELp3OJafxpYFoZ/psyy+JNYw2ffpsdw/JtYsCD1wvw7MktizILQkPMsoR2tqPeUsDgvzYDxYEHooHMvD8WFBKEzj5hEbO0jWlPKoBibGxR0tTdH32NL4wSwdNxLMWpLKvJdlxxPm8WUMTHI8WRBKZhLmifjCLHySgrkmviwIPUzBLI83zHKF5SmH+2zGSnt6ZNi1INm65zwTk/hyXdKZO09z8VlphO05ynMFrCSHfAA3ORbAKtVTHoBcfPDCaqswa3x+8awQijRXnxdhfm4FZi0D41lX7JauFIFG66kHAwBB8bQEXtDAiBVUOj0spA9T6OVVqsC4gwUvApQpMOVeRisZmArYIJ1uhJc0MElC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`;
let colors = [
  '#98EECC', '#FF78C4', '#E4A5FF', '#30A2FF', '#FC4F00'
]
let data = [
  { value: 60, name: 'Visit' },
  { value: 40, name: 'Inquiry' },
  { value: 20, name: 'Order' },
  { value: 80, name: 'Click' },
  { value: 100, name: 'Show' }
]
// 用于补全园后面和矩形的 底色
// 一查不能设置偏移；使用阴影偏移且同时背景色不能是透明的；这里和背景色一致
let rich_items_z = {
  width: 15,
  height: 40,
  backgroundColor: 'rgba(255,255,255,1)',
  shadowColor: 'gold',
  shadowBlur: 0,
  shadowOffsetX: 54,
  shadowOffsetY: 0,
}
// 圆的
let rich_items_a = {
  width: 50,
  height: 50,
  borderRadius: 200,
  align: 'center',
  // borderWidth: 1,
  // borderColor: '#333',
  backgroundColor: {    //排名用图；文字如果换行就多看一眼爆炸
    image: ranking1,
  },
  shadowColor: 'rgba(255,50,100,0.4)',
  shadowBlur: 6,
  shadowOffsetX: 0,
  shadowOffsetY: 0,
}
// 矩形的
let rich_items_b = {
  width: 145,
  height: 40,
  backgroundColor: 'gold',
  borderRadius: [0, 6, 6, 0],
  color: "white",
  padding: [0, 15, 0, 0]  // 细调文字居中
}
const rich_items = {};
colors.map((v, k) => {
  let rich_items_z_key = 'z' + k;
  let rich_items_a_key = 'a' + k;
  let rich_items_b_key = 'b' + k;
  rich_items[rich_items_z_key] = { ...rich_items_z, shadowColor: v }
  rich_items[rich_items_a_key] = { ...rich_items_a }
  rich_items[rich_items_b_key] = { ...rich_items_b, backgroundColor: v }
})

data.map((v, k) => {
  v['labelColor'] = colors[k]
})
option = {
  backgroundColor: '#fff',
  color: colors,
  title: {
    text: 'Funnel'
  },
  tooltip: {
    trigger: 'item',
    formatter: (fp) => {
      return `${fp.data.name} ${fp.data.value}`;
    }
  },
  legend: {},
  series: [
    {
      name: 'Funnel',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '60%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'ascending',
      gap: 2,
      label: {
        show: true,
        position: 'right',
        mll: '123',
        formatter: (p) => {
          let k = p.dataIndex;
          return `{z${k}|}{a${k}|} {b${k}|${p.data.name}}`
        },
        rich: { ...rich_items, isLabel: true }    //isLabel用于判断click label
      },
      labelLine: {
        length: 50,
        show: false
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      data: data
    }
  ]
};

// 点击label，找到与之关系的图
myChart.getZr().on('click', (params) => {
  // 看上面的rich
  if (params.topTarget && params.topTarget.parent.style?.rich.isLabel) {
    console.log(params.topTarget.parent)
    alert(params.topTarget.parent.style.text)
  }
})