Jquery ECharts Funnel chart of a real estate sales customer

The funnel chart is suitable for the business process comparison specification, the cycle is long, the link many process analysis, through the funnel each link business data comparison, can intuitively discover and explain the problem. In the analysis of the electric quotient website, it is usually used to compare the conversion rate, it can show the final conversion rate of the user from entering the website to realizing the purchase. In CRM, the Customer Sales funnel chart is used to show customer conversion comparisons at various stages.

In this paper, we use Echarts to establish a sales funnel chart of a real estate, and show the conversion rate of each stage through the funnel chart. For the sales process, there are four stages of customer type, such as potential customers-the intention of customers-negotiation phase-signing. The data in these four phases will be a funnel-shaped one. Another simple description is that there are 100 customers to see the real estate, the final 20 signed to buy a building, the remaining 80 may be part of it to see just, there are some want to buy but for some reason to give up buying.
Html
As usual, first introduce echarts and then add Div#mychart to the place where you need to place the chart, plus the width and height attributes.
<script src= "Echarts.min.js" ></script>

<div id= "MyChart" style= "width:600px;height:400px;" ></div>

Javascript

Now you want to initialize the Echarts instance, then set the options, and finally render the image.
var MyChart = echarts.init (document.getElementById (' MyChart '));

option = {
Title: {
Text: ' A sales Customer funnel map ' in a real estate,
Subtext: ' Pure fiction ',
Left: ' Center '
},
ToolTip: {
Trigger: ' Item ',
Formatter: "{A} <br/>{b}: {c}%"
},
Legend: {//Legend
Bottom:10,
Left:10,
Orient: ' Vertical ',
Data: [' Potential customer phase ', ' intention customer phase ', ' negotiation phase ', ' signing ']
},
Calculable:true,
Series: [
{
Name: ' Funnel Chart ',
Type: ' funnel ',//Funnel chart
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 yes: Ascending, pyramid-like
Gap:2,//Data image spacing
Label: {
Normal: {
Show:true,//Display text labels
Position: ' inside '//built-in graphics text label, outside is external, and Left,right,inner,center
},
Emphasis: {
TextStyle: {
Fontsize:20
}
}
},
Labelline: {//Set the guide line displayed when the text label is left or right
Normal: {
Length:10,//length
LineStyle: {
Width:1,//Line width
Type: ' Solid '//type: implementation, and dotted line: dashed and dotted
}
}
},
ItemStyle: {//Image style
Normal: {
BorderColor: ' #fff ',//Stroke color
Borderwidth:1//Stroke width
}
},
data:[//Content data
{value:25, Name: ' Sign Up '},
{value:50, Name: ' Negotiation phase '},
{value:75, Name: ' Intent client phase '},
{value:100, Name: ' Lead stage '}
]
}
]
};


Displays the chart using the configuration items and data that you just specified.
mychart.setoption (option);
Legend refers to the legend, we put the legend in the lower left corner, vertical display four different stages (in different colors) of the legend. When setting series, the parameter type is set to ' funnel ', which means the funnel diagram, and the parameter sort can set whether the funnel is inverted (descending) or pyramid (ascending). For the data in the funnel, this example is set directly, and in practice, it may be necessary to get the JSON data from the backend