<!DOCTYPE html>
<html>
<head>
? ? <meta charset="utf-8">
? ? <title>第一個(gè) ECharts 實(shí)例</title>
? ? <!-- 引入 echarts.js -->
? ? <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
? ? <!-- 為ECharts準(zhǔn)備一個(gè)具備大邢炀椤（寬高）的Dom -->
? ? <div id="main" style="width: 600px;height:400px;"></div>
? ? <script type="text/javascript">
? ? ? ? // 基于準(zhǔn)備好的dom徘跪，初始化echarts實(shí)例
? ? ? ? var myChart = echarts.init(document.getElementById('main'));
? ? ? ? // 指定圖表的配置項(xiàng)和數(shù)據(jù)
? ? ? ? var option;
option = {
? title: {
? ? text: 'Funnel'
? },
? tooltip: {
? ? trigger: 'item',
? ? formatter: '{a} <br/>培廓 : {c}%'
? },
? toolbox: {
? ? feature: {
? ? ? dataView: { readOnly: false },
? ? ? restore: {},
? ? ? saveAsImage: {}
? ? }
? },
? legend: {
? ? data: ['Show', 'Click']
? },
? series: [
? ? {
? ? ? name: 'Funnel',
? ? ? type: 'funnel',
? ? ? left: '10%',
? ? ? top: 60,
? ? ? bottom: 80,
? ? ? width: '80%',
? ? ? min: 0,
? ? ? max: 100,
? ? ? //漏斗的形成形狀 控制
? ? ? minSize: '20%',
? ? ? maxSize: '100%',
? ? ? //
? ? ? sort: 'descending',
? ? ? gap: 3,
? ? ? label: {
? ? ? ? show: true,
? ? ? ? position: 'inside'
? ? ? },
? ? ? labelLine: {
? ? ? ? length: 40,
? ? ? ? lineStyle: {
? ? ? ? ? width: 1,
? ? ? ? ? type: 'solid'
? ? ? ? }
? ? ? },
? ? ? itemStyle: {
? ? ? ? // 梯形塊狀 的樣式顏色設(shè)置
? ? ? ? borderColor: '#fff',
? ? ? ? borderWidth: 10
? ? ? },
? ? ? emphasis: {
? ? ? ? label: {
? ? ? ? ? fontSize: 30
? ? ? ? }
? ? ? },
? ? ? data: [
? ? ? ? { value: 60, name: 'Visit' },
? ? ? ? { value: 40, name: 'Inquiry' },
? ? ? ? { value: 20, name: 'Order' }
? ? ? ]
? ? }
? ]
};
? ? ? ? option && myChart.setOption(option);
? ? </script>
</body>
</html>
