» » ECharts a real estate sales customer funnel map

 

ECharts a real estate sales customer funnel map

Author: bamboo06 on 28-11-2016, 02:59, views: 4262

9
Funnel diagram for business processes more standardized, long cycle, links and more process analysis, through the funnel of all aspects of business data comparison, to visually identify and explain the problem. In the e-commerce website analysis, usually used for conversion rate comparison, it can show the user from entering the site to achieve the final conversion rate of purchase. In CRM, the customer sales funnel chart is used to show the customer conversion comparisons at each stage.

This paper demonstrates the use of Echarts examples of the sale of a real estate customer funnel plot, through the funnel chart to visually demonstrate the conversion rate of each stage. For the sales process to produce four stages of customer types, such as potential customers - the intention of customers - the negotiation phase - signing. The four stages of data will be a funnel-shaped. Another simple description is that there are 100 customers to see real estate, and ultimately have 20 contract to buy, and the remaining 80 may have to look at some of it, some want to buy but for some reason to give up the purchase.

HTML

The old rules, first of all, the introduction of Echarts, and then placed in the place where the need to add div # myChart, while adding width and height attributes.
<script src="echarts.min.js"></script>  
<div id="myChart" style="width: 600px;height:400px;"></div> 


javascript
Now to initialize the echarts instance, and then set options, and finally render the image.
// Initializes the echarts instance based on the prepared dom
var myChart = echarts.init(document.getElementById('myChart'));

option = {
    title : {
        text: 'A real estate sales customer funnel map',
        subtext: 'Purely fictional',
		left: 'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c}%"
    },
    legend: {
		bottom: 10,
		left: 10,
		orient: 'vertical',
        data : ['Potential customer stage', 'intention customer stage', 'negotiation stage', 'signing']
    },
    //calculable : true,
    series : [
        {
            name:'Funnel diagram',
            type:'funnel', //Funnel diagram
            left: '10%',
            top: 60,
            //x2: 80,
            bottom: 60,
            width: '80%',
            // height: {totalHeight} - y - y2,
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort : 'descending', //Data sort, if it is: ascending, it is a pyramid
            gap : 2, //Data image spacing
            label: {
                normal: {
                    show: true, //The Text tab is displayed
                    position: 'inside' //Built-in graphic text labels, outside is outside, there left, right, inner, center
                },
                emphasis: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            labelLine: { //Sets the guideline that appears when the text label position is left or right
                normal: {
                    length: 10, //length
                    lineStyle: {
                        width: 1, //Line width
                        type: 'solid' //Type: implementation, and dotted lines: dashed and dotted
                    }
                }
            },
            itemStyle: { //Image Style
                normal: {
                    borderColor: '#fff', //Stroke color
                    borderWidth: 1  //Stroke width
                }
            },
            data:[ //Content data
                {value:25, name:'Signed'},
                {value:50, name:'Negotiation stage'},
                {value:75, name:'Intended Customer Phase'},
                {value:100, name:'Lead phase'}
            ]
        }
    ]
};
// Use the configuration item and data you just specified to display the chart.
myChart.setOption(option);

Legend is the legend, we put the legend on the lower left, vertical display four different stages (with different colors) of the legend. When setting the series, the parameter type is set to 'funnel' meaning the funnel map, the parameter sort can be set funnel map is inverted (descending) or pyramid-shaped (ascending). For the data in the funnel, in this case is set directly, the actual application, you may need to get from the back-end json data.

Category: Javascript / HTML5 / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
19 June 2017 02:06

Cesar Madisyn

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
ECharts a real estate sales customer funnel map looks quite fascinating, I just am so much pleased with visiting the website and seeing all the good stuff there, Keep updating more about the chart

<
  • 0 Comments
  • 0 Articles
11 August 2017 19:38

VIctoria Gulia

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This is a to a remarkable degree enlightening article. I in like path agree UK Essay Writing Service with your post title and your truly well light up your point of view. I am famously anxious to see this post. A commitment of appreciation is all together for share with us. Keep it up and share the more most related post.

fabulous work!

<
  • 0 Comments
  • 0 Articles
14 September 2017 17:27

renee betrand

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Hmm nice of you ot have let us know about it all, surely helped with You have done best essay writing help an amazing job with it all, keep up the good work! Please keep on sharing about such softwares in the future too but for that we need to be more flexible

<
  • 0 Comments
  • 0 Articles
2 November 2017 20:36

Dwayne Sammy

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Nice post. I have seen many posts but never seen such a informative post before. Thank you very much for it and carry on sharing it. rubber sheet

<
  • 0 Comments
  • 0 Articles
3 November 2017 07:28

Allan

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
This is my first comment here so I just wanted to give a quick shout out and tell you I genuinely enjoy reading through your articles. Thanks for shared this post.
massage center in lahore
massage center in lahore
massage center in lahore
massage center in lahore
massage center in lahore
massage center in lahore
massage center in lahore
massage center in lahore

<
  • 0 Comments
  • 0 Articles
9 November 2017 21:47

Chris

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Very well written article about real estate sales, you have made a great effort in making this post which i appreciate it a lot. I will come back to this website to read more articles.
online shop rubber matting

<
  • 0 Comments
  • 0 Articles
22 November 2017 00:00

Dwayne Sammy

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
What a good blog here. You have done a very good work here taking out your time to explain in detail. Thanks a lot and carry on it. online source for food packaging boxes

What a good blog here. You have done a very good work here taking out your time to explain in detail. Thanks a lot and carry on it. online source for food packaging boxes

<
  • 0 Comments
  • 0 Articles
6 December 2017 17:30

gfhdfhg

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Swiss traditional smart watch is a combination of rolex replica watches high-tech innovation and the traditional Swiss watchmaking process. It is a combination of replica watches uk modern and classical, and even a bridge linking Silicon Valley and Switzerland. Instead of using the digital screen of fake rolex watches a typical smart watch on the dial of the Swiss traditional smart watch, Constance and Apex held the traditional Swiss craftsmanship and displayed the time with a pointer to uk replica watches preserve the classic beauty.

<
  • 0 Comments
  • 0 Articles
17 February 2018 21:56

FilmoraGo APK

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Information
Comment on the news site is possible only within (days) days from the date of publication.