Echarts instrument Panel Instance Code (source download) _javascript Tips

You can see the dashboard at a glance in the car cockpit, using the dashboard made by using Echarts can easily display the user's data, clearly see the scope of a certain indicator value, the dashboard form of the report used in a variety of statistical systems, this article combined with examples to explain the instrument panel in the sales task completion rate of the statistical application.

Effect Demo Source Download

Html

First introduce echarts and then add Div#mychart to the place where you need to place the chart, plus width and height attributes.

<script src= "Echarts.min.js" ></script> 

Javascript

Next, initialize the Echarts instance, then set the options, and finally render the image.

var MyChart = echarts.init (document.getElementById (' MyChart ')); 
option = { 
tooltip: { 
formatter: {A} <br/>{b}: {c}% " 
}, 
series: [ 
{ 
name: ' Business metrics ', 
Type: ' gauge ', 
detail: {formatter: ' {value}% '},//dashboard display data 
axisline: {//instrument panel axis style 
LineStyle: { 
width :} 
, 
splitline: {//Split line style 
length:20 
}, 
data:[{value:50, Name: ' Completion rate '}] 
} 
] 
}; 

The ToolTip in the option setting is a prompt box component, and the default parameter show:true is the display prompt box. The parameter formatter is a balloon float content format that supports both string templates and callback functions. In general we use string templates, template variables have {a}, {b},{c},{d},{e}, respectively, indicating series name, data name, data value, etc. When trigger is ' axis ', there will be multiple series of data, at which point the index of the series can be represented by {A0}, {A1}, {A2}, and later indexed by this method. {A},{b},{c},{d} does not have the same meaning under different chart types. The chart parameters for pie chart, dashboard, funnel chart three types are: {A} (series name), {b} (data item name), {C} (numeric), {D} (percent).

The series in the option is the series list. Each series determines its own chart type by type, which contains many parameters. Where the parameter name represents the series name, is used for ToolTip display, legend legend filtering, and is used to specify the corresponding series when setOption updates data and configuration items. The parameter type refers to the chart type, type: ' Gauge ' is the dashboard. Parameter detail refers to the dashboard details, used to display data, you can define the height of the data display, background colors, border color, and so on, in this example, the dashboard details are shown as percentages. Parameter axisline can define the relative configuration of the dashboard axis, such as axis style. The parameter splitline is used to define the separator line style in the dashboard, such as line length, line color, line width, and so on. The parameter data is used to show the data, and you can set the value and name of the dashboard metric.

If it is a dynamically changing dashboard, you can use SetInterval () to periodically change the meter value, such as the following code.

Clearinterval (timeticket); 
var timeticket = setinterval (function () { 
Option.series[0].data[0].value = (math.random () *). ToFixed (2)-0;
   
    mychart.setoption (option, true); 

   

The above content for you to introduce the Echarts dashboard instance code, I hope to help you!