ECharts-html实训（五）

2301_77563994

已于 2024-04-01 13:11:39 修改

阅读量430

点赞数 8

文章标签： echarts html 前端

于 2024-04-01 13:11:25 首次发布

本文链接：https://blog.csdn.net/2301_77563994/article/details/137083180

版权

一、漏斗图

二、金字塔图

一、漏斗图

漏斗图代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>

<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        option = {
  title: {
    text: '漏斗图'
  },
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b} : {c}%'
  },
  toolbox: {
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  legend: {
    data: ['添加购物车', '购物结算', '核对订单', '提交订单', '完成支付']
  },
  series: [
    {
      name: '漏斗图',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside'
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid'
        }
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      data: [
        { value: 60, name: '核对订单' },
        { value: 40, name: '提交订单' },
        { value: 20, name: '完成支付' },
        { value: 80, name: '购物结算' },
        { value: 100, name: '添加购物车' }
      ]
    }
  ]
};
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option); 
    </script>
</body>

</html>

漏斗图代码的效果图：